Chrome扩展程序每次在更改crome选项卡中发布从后台脚本到内容脚本的消息

Question

美好的一天。

我在将消息从后台脚本发送到内容脚本时遇到问题。 每次用户在浏览器选项卡之间切换时，我都会尝试发送消息。

我收到此错误。Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

下面是扩展本身的代码。

背景脚本：

chrome.tabs.onActivated.addListener(function changeTab(activeInfo) {
var port = chrome.tabs.connect(activeInfo.tabId);
console.log(port);
port.postMessage({tabId: activeInfo.tabId});
});

内容脚本：

chrome.runtime.onConnect.addListener(function(port) {
console.log(11111111);
port.onMessage.addListener(function(msg) {
console.log(22222222);
if(msg == undefined || Object.keys(msg).length == 0) return;
if(msg.checkExtensionRBPopup)
port.postMessage({active: window.localStorage.getItem('extension_rb_popup')});
});
});

清单：

{
"manifest_version": 2,
"name": "Rebatemango Extension",
"description": "Rebatemango",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js",
]
}
],
"permissions": [
"background",
"tabs",
"activeTab",
"declarativeContent",
"storage",
"clipboardWrite",
"cookies",
"tabCapture",
"displaySource",
"webNavigation"
],
"background": {
"scripts": [
"js/jquery.js",
"js/libs.js",
"background.js"
],
"persistent": false
},
"icons": {
"16": "images/mango.png",
"48": "images/mango.png",
"128": "images/mango.png"
}
}

请告诉我我做错了什么？ 如何修复或跟踪此错误？

Answer 1

您的内容脚本正在使用port.postMessage但后台脚本中端口的另一端没有侦听器，这就是显示错误的原因。

溶液：

使用简单的消息传递。不要使用端口，这里不需要它，并且您的实现会导致内存泄漏，因为它每次都会创建一个新端口而不释放它。简单的消息传递将自动处理此问题。

chrome.tabs.sendMessage(activeInfo.tabId, {foo: 1}, response => {
if (chrome.runtime.lastError) return;
console.log(response);
});

内容脚本侦听器：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
console.log(msg);
sendResponse({bar: 2});
});

---

其他原因。

如果在发送消息的确切时刻没有运行内容脚本，也可能会出现错误消息。发生这种情况是因为默认情况下，内容脚本在网页中的 DOMContentLoaded 事件之后运行。或者，该标签可能包含不受支持的网址，例如来自扩展页面或 https://chrome.google.com/webstore/的 chrome://或 chrome-extension://，或者runtime_blocked_hosts政策禁止的任何网址。对于第一个问题，您可以在 manifest.json 中的内容脚本声明中添加"run_at："document_start"。对于其他情况，除了抑制和忽略错误消息外，您无能为力。

此外，后台脚本会发送{tabId: activeInfo.tabId}但内容脚本中的 onMessage 侦听器不会读取它。相反，它读取msg.checkExtensionRBPopup，如果它不是发布问题的复制粘贴工件，则没有任何意义。