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

【问题标题】：How to executeScript for webRequest event onBeforeRequest in Google Chrome Extension如何在 Google Chrome 扩展程序中为 webRequest 事件 onBeforeRequest 执行脚本
【发布时间】：2021-12-15 18:51:40
【问题描述】：

按照 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 监听器中执行脚本，就会弹出这个错误：

事件处理程序中的错误：TypeError：调用错误 scripting.executeScript(scripting.ScriptInjection 注入，可选函数回调）：参数“注入”错误：属性错误 “目标”：缺少必需的属性“tabId”。在 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”示例：

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/*"]},
    []);

【问题讨论】：

1) 请参阅 onBeforeRequest 的文档，它的参数不是选项卡。 2) onBeforeRequest 是错误事件，因为请求可能需要很长时间才能得到响应，因此您的 executeScript 将在旧页面上运行。 3) ManifestV3 在这个用例中完全被破坏了，因为它不能在页面开始时运行，所以你总是会看到一闪而过的无样式内容。 MV3 中的唯一解决方案是 a) 在 Chrome 96 及更高版本中使用新的 chrome.scripting.registerContentScripts，b) 使用 manifest.json 中声明的内容脚本。
@wOxxOm 1) 对，谢谢，但这不会导致错误 2) 当然，这很好，但是我需要跟踪所有请求，我会保留它们，确实 3) 很好会试试你的a) / b) 谢谢！
仅供参考：按照文档，我最终得到一个 getTabId();功能，谷歌引用，但我不知道如何实现它。如果我尝试使用 chrome.tabs.query 自己构建它，chrome.scripting 似乎突然变得未知。似乎它不应该工作。
听起来您错误地将其放置在内容脚本中，例如在注入函数内部，根据定义，该函数作为内容脚本运行。内容脚本无法访问大部分chrome API。
uff..是的，经过数小时的尝试，我现在发现我引用了错误的文件。这是……令人兴奋的。谢谢。

标签： google-chrome google-chrome-extension chrome-extension-manifest-v3

【解决方案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>']
    });

【讨论】：