使用 chrome.tabs.sendMessage 遇到困难

Question

我确信这个话题已经在这个网站上的某个地方讨论过，但作为一个新手，我自己无法真正弄清楚这一点..

我正在尝试编写一个非常“简单”的 chrome 扩展程序，以便当用户单击某个按钮时，它会触发警报。

据我了解，需要监听点击，然后后台必须与我的内容进行通信才能显示警报。

这是我的代码：

清单

{
  "name": "Test alert",
  "version": "1.0",
  "manifest_version": 2,
  "description": "This is a test",
  "browser_action": {
      "default_icon": "icon.png"
    },
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
  },
  "content_scripts" : [{
      "matches": ["<all_urls>"],
      "js" : ["content.js"]
  }]
}

背景

document.getElementById("edit-payment").addEventListener("click", function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "saySomething"}); });

内容

chrome.runtime.onMessage.addListener(function (msg) {
    if (msg.action === 'saySomething') {
        alert('hello');
    }
});

我在消息传递方面遇到了麻烦。有人可以启发我吗？ 谢谢您的宝贵时间！

我一直在尝试使用 chrome.tabs 但出了点问题。

Answer 1

后台脚本无权访问文档并且

document.getElementById("edit-payment")

不起作用。这是可以访问它的内容脚本！

Service Worker（后台脚本）：

扩展服务工作者处理并监听浏览器事件。事件类型有很多种，例如导航到新页面、删除书签或关闭选项卡。它可以使用所有Chrome API，但不能直接与网页内容交互；这就是内容>脚本的工作。

请参阅：https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/#extension-files