如何在 Google Chrome 扩展中为 webRequest 事件 onBeforeRequest 执行脚本

Question

遵循 Chrome Extension Manifest V3 规则我想创建一个扩展，它监听特定的网络请求，并且首先，只需将它们记录到当前打开的选项卡的控制台（稍后我想添加为当前选项卡中的页面自定义脚本和样式）。

为此，我尝试利用 chrome.scripting.executeScript。

当我实现来自 https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/examples/page-redder/manifest.json 的示例时，它的工作方式与 chrome.action.onClicked 侦听器的预期一样。

一旦我尝试在 chrome.webRequest.onBeforeRequest 侦听器中执行脚本，就会弹出此错误：

Error in event handler: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'target': Missing required property 'tabId'. at chrome.webRequest.onBeforeRequest.addListener.urls ()

缺少必需的属性 tabId？我认为它与生命周期有关，但我不知道该怎么做。这是我的清单：

{
    "name": "Getting Started Example",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js",
        "matches":   [ "<all_urls>"]
    },
    "host_permissions": [
        "<all_urls>"
    ],
    "permissions": [
        "activeTab",
        "tabs",
        "webRequest",
        "webNavigation",
        "management",
        "scripting"
      ]
  }

这是我的脚本，我只是稍微修改了“redden”-example:

function reddenPage(url) {
    console.log(url);
}
  
chrome.webRequest.onBeforeRequest.addListener((tab) => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: reddenPage,
      args: [tab.url],
    });
},
  {urls: ["*://*.google.com/*"]},
    []);

Answer 1

我不知道具体原因，但是来自 Github 的脚本似乎不起作用。它是这样工作的：

不仅是几个括号变了，看tab代替了(tab)，还有tab.tabId代替了tab.id:

chrome.webRequest.onBeforeRequest.addListener(tab => {
    chrome.scripting.executeScript(
        {
        target: { tabId: tab.tabId },
        function: reddenPage,
        args: [details.url],
        },
        () => { console.log('ZZZ') });
    },  {
        urls: ['<all_urls>']
    });

如何在 Google Chrome 扩展中为 webRequest 事件 onBeforeRequest 执行脚本

How to executeScript for webRequest event onBeforeRequest in Google Chrome Extension

google-chrome

google-chrome-extension

chrome-extension-manifest-v3