在背景和 content_script 之间为 chrome 扩展打开消息端口

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 中打开过。所以接下来，我通过使用此处访问的开发工具在 var port = chrome.tabs.connect(tabs[0].id, { name: "example" }); 这一行的 background.js 中设置了一个断点

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

Answer 1

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

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

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