Question

我正在尝试使用简单的Google Chrome扩展程序来处理消息/变量流经以下每个步骤...

DOM内容（来自特定HTML标记）
Contentscript.js
Background.js
Popup.js
Popup.html

我已经想出了如何将消息/变量发送到 Background.js和从向一个方向发送（Background.js -> Popup.js或{{1} }），但无法成功通过所有三个（Background.js -> Contentscript.js）。以下是我演示中的文件。

的Dom

Contentscript.js -> Background.js -> Popup.js

Content.js

<h1 class="name">Joe Blow</h1>

Background.js

fromDOM = $('h1.name').text();

chrome.runtime.sendMessage({contentscript: "from: contentscript.js", title: fromDOM}, function(b) {
    console.log('on: contentscript.js === ' + b.background);
});

Popup.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.html

chrome.extension.sendMessage({pop: "from: popup.js"}, function(b){
    console.log('on: popup.js === ' + b.background);

    $('.output').text(b.background);
});

的manifest.json

<html>
<head>
  <script src="jquery.js"></script>
  <script src="popup.js"></script>
</head>
<body>

<p class="output"></p>

</body>
</html>

我有一种感觉，我知道这次旅行是什么，但{ "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" } ] }文件严重缺乏，难以破译。一个简单，可重用的例子对学习过程非常有帮助，因为我确信这是一个常见的问题。

Answer 1

好吧，更改代码中的一些内容应该让它按照您的意愿运行。并非所有我要做的改变都是必要的，但这就是我可能做到的。

内容脚本

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);
});

Chrome扩展程序 - 从DOM到Popup.js消息传递

1 个答案: