在background和content_script之间打开一个用于chrome扩展的消息端口

Question

我正在开发一个Chrome扩展程序，其中涉及通过消息端口从后台脚本传递到内容脚本的消息。 根据文档，我必须首先查询我要连接的内容脚本正在运行的选项卡，然后使用该选项卡的ID打开端口。 所以我的后台脚本和内容脚本如下所示：

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var port = chrome.tabs.connect(tabs[0].id, { name: "example" });
    port.postMessage("hello world");
});

content_script.js

chrome.runtime.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
        console.log(msg);
    });
});

并且没有消息打印到控制台。 我首先通过在content_script port.onMessage.addListener(function(msg) {从未被命中这一行）的这一行放置断点来进行一些调试。这让我相信端口从未在background.js中打开。所以接下来，我在此行的background.js中设置一个断点var port = chrome.tabs.connect(tabs[0].id, { name: "example" });使用这里访问的开发工具

事实证明我的查询实际上并没有将任何标签返回到回调中，因此tabs[0].id会引发错误。 我猜测，一旦我得到这个标签查询工作，消息传递将开始工作，所以有谁知道这里发生了什么，我无法查询当前的活动标签？ 我已经看到在许多其他StackOverflow响应中使用的这个确切的查询，它在消息传递文档中的示例中。

Answer 1

请确保当前活动选项卡允许注入内容脚本，我的意思是，当您在后台页面中调用chrome.tabs.query时，活动标签页不是chrome://extensions页面。 这通常发生在重新加载扩展时，在这种情况下，在您调用chrome.tabs.query({active: true, currentWindow: true}) ，您将获得带有chrome://extensions url的选项卡，而此页面没有默认情况下不允许注入内容脚本。

为避免这种情况，您可以调整消息传递方式：

1. 您可以从内容脚本开始传递消息 。
2. 您还可以添加一些其他触发点来启动消息传递。 例如，单击browserAction时调用chrome.tabs.query 。