Chrome扩展程序 - 从DOM到Popup.js消息传递 [英] Chrome Extension - From the DOM to Popup.js message passing
问题描述
- Contentcript.js
- Background.js
- .js
- Popup.html
我试图获得一个简单的谷歌浏览器扩展程序，其中消息/变量流经以下每个步骤： li> DOM内容（来自特定的HTML标签）
我已经想出了如何发送消息/ （ Background.js - > Popup.js 或 变量到 Background.js和 code> Background.js - > Contentscript.js ），但无法通过所有三个成功获得它（ Contentscript.js - > Background.js - > Popup.js ）。这是我的演示文件。
Dom
$ b $ p $
< h1 class =name> Joe Blow< / h1> $ b Content.js
fromDOM = $（'h1.name'）。text（）;
chrome.runtime.sendMessage（{contentscript：from：contentscript.js，title：fromDOM}，function（b）{
console.log（'on：contentscript.js = =='+ b.background）;
}）;
Background.js
chrome.tabs.getSelected（null，function（tab）{
chrome.extension.onMessage.addListener（function（msg，sender，sendResponse）{
sendResponse（{background：from：background.js}）;
console.log（'on：background.js ==='+ msg.title）;
}）;
}）;
Popup.js
chrome.extension.sendMessage（{pop：from：popup.js}，function（b）{
console.log（'on：popup.js ==='+ b.background）;
$（'。output'）。text（b.background）;
}）;
Popup.html
< html>
< head>
< script src =jquery.js>< / script>
< script src =popup.js>< / script>
< / head>
< body>
< p class =output>< / p>
< / body>
< / html>
Manifest.json
{
name：Hello World，
version：1.0，
manifest_version：2，
description：我的第一个Chrome扩展程序，
background：{
scripts：[background.js]
}，
权限：[
标签
]，
browser_action：{
default_icon：icon.png，
default_popup：popup .html
，
content_scripts：[
{
matches：[http：// * / *]，
js ：[jquery.js，contentscript.js]，
run_at：document_end
}
]
}
我有一种感觉，我知道旅行是什么，但文件严重缺乏 manifest_version：2 ，它很难破译。一个简单的，可重复使用的例子在学习过程中会非常有用，因为我确信这是一个常见问题。
好的，在你的代码中改变一些东西应该使它像你想要的那样工作。并非所有的改变都是必要的，但这只是我可能做到的。
内容脚本
var fromDOM = $（'h1.name'）。text（）;
chrome.runtime.sendMessage（{method：'setTitle'，title：fromDOM}）;
背景
var title;
chrome.runtime.onMessage.addListener（function（message，sender，sendResponse）{
if（message.method =='setTitle'）
title = message.title;
else if（message.method =='getTitle'）
sendResponse（title）;
}）;
Popup.js
chrome.runtime.sendMessage（{method：'getTitle'}，function（response）{
$（'。output'）。text（response）;
}）;
I'm trying to get a simple Google Chrome extension working where a message/variable flows through each of the following steps ...
- DOM content (from specific HTML tag)
- Contentscript.js
- Background.js
- Popup.js
- Popup.html
I've figured out how to send a message/variable to Background.js and from it in one direction (Background.js -> Popup.js or Background.js -> Contentscript.js), but can't get it through all three successfully (Contentscript.js -> Background.js -> Popup.js). Here are the files in my demo.
Dom
<h1 class="name">Joe Blow</h1>
Content.js
fromDOM = $('h1.name').text();
chrome.runtime.sendMessage({contentscript: "from: contentscript.js", title: fromDOM}, function(b) {
console.log('on: contentscript.js === ' + b.background);
});
Background.js
chrome.tabs.getSelected(null, function(tab) {
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
sendResponse({background: "from: background.js"});
console.log('on: background.js === ' + msg.title);
});
});
Popup.js
chrome.extension.sendMessage({pop: "from: popup.js"}, function(b){
console.log('on: popup.js === ' + b.background);
$('.output').text(b.background);
});
Popup.html
<html>
<head>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<body>
<p class="output"></p>
</body>
</html>
Manifest.json
{
"name": "Hello World",
"version": "1.0",
"manifest_version": 2,
"description": "My first Chrome extension.",
"background" : {
"scripts": ["background.js"]
},
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js","contentscript.js"],
"run_at": "document_end"
}
]
}
I have a feeling I know what the trip-up is, but the documentation is severely lacking for manifest_version: 2 that its tough to decipher. A simple, reusable example would be very helpful in the learning process, as I'm sure this is a common issue.
Alright, changing a few things in your code should make it work like you want. Not all of the changes I am going to make are necessary, but this is just how I might do it.
Content Script
var fromDOM = $('h1.name').text();
chrome.runtime.sendMessage({method:'setTitle',title:fromDOM});
Background
var title;
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
if(message.method == 'setTitle')
title = message.title;
else if(message.method == 'getTitle')
sendResponse(title);
});
Popup.js
chrome.runtime.sendMessage({method:'getTitle'}, function(response){
$('.output').text(response);
});
这篇关于Chrome扩展程序 - 从DOM到Popup.js消息传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
