我正在开发一个 chrome 扩展，它需要根据侧面板中勾选的复选框来操作 DOM。
我试图通过存储在 chrome 本地存储中勾选了哪些复选框，然后从侧面板脚本发送消息到内容脚本来运行 DOM 脚本，该脚本检索存储在本地存储中的参数，然后相应地操作 DOM 。 我的扩展程序未注册后台脚本。
我尝试了多种围绕 chrome.tabs.sendMessage 的方法，但我一直遇到同样的错误：
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
这是我的代码：
manifest.json：
{
"manifest_version": 3,
"name": "Name",
"description": "Description",
"version": "1.0",
"side_panel": {
"default_path": "./sidepanel/sidepanel.html"
},
"permissions": [
"sidePanel",
"storage",
"tabs",
"activeTab"
],
"content_scripts": [
{
"matches": ["www.pageurl.com/*"],
"js": ["./utilities/background.js"]
}
]
}
sidepanel.html：
<!DOCTYPE html>
<html lang="en">
[...]
<body>
[...]
<input id="triggerBtn" type="checkbox" name="" class="switch is-rounded is-outlined is-info" />
[...]
</body>
<script src="./sidepanel.js"></script>
</html>
sidepanel.js :
document.getElementById("triggerBtn").addEventListener("click", () => {
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
var tab = tabs[0];
chrome.tabs.sendMessage(tab.id, "TEST");
});
});
实用程序/background.js :
chrome.runtime.onMessage.addListener((message) => {
console.log(message);
});
我做错了什么？
当您的消息不一定有接收端时，我会收到此错误。这使得实施起来相当复杂。
但是，在您的情况下，永远没有接收端；您需要在内容脚本和弹出/侧面板脚本之间放置一个服务工作者来传递消息。
还有；非常确定“tabs”权限消除了对“activeTab”的需要。