从后台脚本传递到内容脚本的 Chrome 扩展消息不起作用

Question

我正在尝试创建 chrome 插件 Message Passing。 我的代码如下：

manifest.json：

{
    "name": "Sending Messages Test",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Send a Message to background.js from contentscript.js and send reply",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_title": "That's the tool tip",
        "default_popup": "popup.html"
    },
    // "permissions": ["tabs"],
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["contentscript.js"]
    }]
}

popup.html:

<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
    <button id="button">Color all the divs</button>
</div>

popup.js：

window.onload = function() {
  document.getElementById("button").onclick = function() {
    // alert("in popup.js");
    chrome.extension.sendMessage({
      message: "coming from popup"
    });
  }
}

contentscript.js

chrome.runtime.onMessage.addListener( function(request, sender) {
    alert("Contentscript has received a message from from background script: '" + request.message + "'");
    return true;
});

background.js：

var backgroundScriptMessage = " purple monkey dishwasher";

chrome.extension.onMessage.addListener(function(request, sender) {
    alert("Background script has received a message from contentscript:'" + request.message + "'");
    returnMessage(request.message);
});

function returnMessage(messageToReturn) {
    chrome.tabs.query({active: true}, function(tabs) {
      var joinedMessage = messageToReturn + backgroundScriptMessage;
      alert("Background script is sending a message to contentscript:'" + joinedMessage +"'");
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

当我在 chrome 扩展中解压插件并单击生成的图标时，我看到 2 个警报

1. 后台脚本收到来自 contentscript 的消息：'coming from popup'
2. 后台脚本已收到来自 contentscript 的消息：'来自弹出窗口'紫猴洗碗机

并且内容脚本中存在的第三个弹出窗口永远不会显示。我尝试搜索错误但没有运气。有人有解决办法吗？

Answer 1

查询当前活动标签时，不要忘记添加currentWindow: true

function returnMessage(messageToReturn) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var joinedMessage = messageToReturn + backgroundScriptMessage;
          alert("Background script is sending a message to contentscript:'" + joinedMessage +"'");
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

请使用runtime.onMessage 而不是extension.onMessage。

顺便说一句，你也可以在runtime.onMessage监听器中使用sender.tab.id获取sender tab id，这样就不需要查询tabs状态了。