时间戳

首页 > 解决方案 > 如何在 Google Chrome 扩展程序中为 webRequest 事件 onBeforeRequest 执行脚本

google-chrome - 如何在 Google Chrome 扩展程序中为 webRequest 事件 onBeforeRequest 执行脚本

问题描述

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

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

解决方案

我不知道确切原因，但 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>']
    });

推荐阅读