javascript - 为 chrome 扩展打开 background 和 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) { 中的这一行放置断点进行了一些调试，这从未被击中。这让我相信该端口从未在后台打开.js. 接下来，我在 background.js 中的这一行 var port = chrome.tabs.connect(tabs[0].id, { name: "example"});通过使用此处访问的开发工具

事实证明，我的查询实际上并未将任何选项卡返回到回调中，因此 tabs[0].id 引发错误。我猜一旦我让这个选项卡查询工作，消息传递就会开始工作，所以有没有人知道这里发生了什么我无法查询当前的事件选项卡？我已经在许多其他 StackOverflow 响应中看到过这个确切的查询，它在 message passing docs 中的一个示例中。 .

Answer 1

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

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

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