为 chrome 扩展打开后台和 content_script 之间的消息端口

Question

我正在开发一个 Chrome 扩展，它涉及通过从后台脚本到内容脚本传递消息消息端口。根据 documentation，我必须首先查询我要连接的内容脚本所在的选项卡运行，然后使用该选项卡的 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 引发了错误。我猜一旦我让这个选项卡查询工作，消息传递就会开始工作，所以有没有人知道这里发生了什么我无法查询当前的活动选项卡？我已经在许多其他 Whosebug 响应中看到过这个确切的查询，它在 message passing docs.

中的一个示例中

Answer 1

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

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

你可以starting the message passing from content scripts。
您还可以添加一些其他触发点来启动消息传递。例如，单击 browserAction 时调用 chrome.tabs.query。

为 chrome 扩展打开后台和 content_script 之间的消息端口

Opening a message port between background and content_script for a chrome extension

javascript

message-passing

google-chrome-extension

google-chrome-devtools