执行脚本以从 Service Worker 修改标签页 html

问题描述

我正在尝试使用 service worker 拦截 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 和活动选项卡的权限？？）

解决方法

不需要 activeTab 权限，因为它无论如何都不会让您访问 chrome:// 页面（这些是受保护的浏览器 UI 页面），其目的不同，更多在 {{3} }.

也不需要 chrome.tabs.query。您可能希望在发出请求的选项卡中运行代码，在这种情况下只需使用 details.tabId，在 documentation 中查看更多信息。

不需要 service_worker，因为它不会被 webRequest 事件唤醒，这是 Chrome 中的 documentation。只需使用标准的 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'],});

google-chrome-extension javascript