执行脚本以修改服务工作者的选项卡 html

Question

我正在尝试使用服务工作者拦截 GET 请求并将 GET 请求的输出打印到当前页面，但是我无法在页面上执行任何 Javascript...

这是我使用的扩展代码（通用化以适用于所有 URL）

manifest.json

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 2,

  "permissions": [
    "webRequest",
    "<all_urls>",
    "activeTab",
    "*://*/*",
    "tabs"
  ],
  
  "background": {
    "service_worker": "background.js"
  }
}

background.js

chrome.webRequest.onBeforeRequest.addListener(
    function(details)
    {
    chrome.tabs.query(
        { currentWindow: true }, 
        function(tabs) 
        {
            chrome.tabs.executeScript(tabs[0].id, 
            {
                code: 'alert("yo")'
            }, function() { });
        });
     return {cancel: false};
  },
  {urls: ["<all_urls>"]},
);

我一直收到错误 Unchecked runtime.lastError: Cannot access contents of url "chrome://extensions/". Extension manifest must request permission to access this host.（即使我允许所有 URL 和活动选项卡的权限？？）

Answer 1

不需要 activeTab 权限，因为它不会让您访问 chrome:// 页面（这些是受保护的浏览器 UI 页面），它的目的是不同的，更多在 documentation.

也不需要chrome.tabs.query。您可能想要运行选项卡中发出请求的代码，在这种情况下只需使用 details.tabId，请参阅 documentation.

中的更多信息

不需要 service_worker，因为它不会唤醒 webRequest 事件，这是 Chrome 中的 known bug。只需使用标准 ManifestV2 scripts.

  "background": {
    "scripts": ["background.js"]
  }

此外，您可能希望将请求的 types 限制为仅 xhr:

chrome.webRequest.onBeforeRequest.addListener(details => {
  chrome.tabs.executeScript(details.tabId, {
    frameId: details.frameId,
    code: 'console.log(' + JSON.stringify(details) + ')',
  }, () => chrome.runtime.lastError); // suppressing errors
}, {
  urls: ['<all_urls>'],
  types: ['xmlhttprequest'],
});

执行脚本以修改服务工作者的选项卡 html

Executing script to modify tab html from service worker

javascript

google-chrome-extension