Chrome 扩展 V3 - Service Worker 困惑

Question

之前从未进行过 Chrome 扩展。我对服务人员感到困惑。我想要做的就是当用户点击扩展图标时，运行一些 JavaScript 操纵 DOM。我的 background.js 脚本确实被识别为服务工作者。

    "background": {
        "service_worker": "./background.js"
    },

我不明白的是（在看了一堆 Youtube 视频之后）我的 background.js 文件应该如何构建？我只是想让它加载我的 content.js 文件。我在下面有一些模拟的例子来提供一个想法。

chrome.tabs.[some api event]((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete') {
        chrome.scripting.executeScript({
            target: { tabId: tabId },
            files: ["./content.js"
        })
    }
});

我不知道在 service worker 文件中做什么？我是否只注册 service worker 然后执行我的 content.js 文件？甚至不确定在 API 中使用哪个事件是正确的，只是运行我的 content.js？非常感谢任何有助于我进一步理解这一点的输入或页面链接。

Answer 1

您需要 chrome.action API 及其 onClicked 事件 + executeScript，而不是 chrome.tabs。

manifest.json:

  "action": {"default_title": "Click me"},
  "background": {"service_worker": "background.js"},
  "permissions": ["scripting", "activeTab"],

background.js（自动注册，无需显式注册）。

chrome.action.onClicked.addListener(tab => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js'],
  });
});

content.js:

// here you can access the web page DOM
console.log('Yay');

Chrome 扩展 V3 - Service Worker 困惑

Chrome Extension V3 - Service Worker Confusion

javascript

google-chrome-extension