Chrome扩展-包含XHR猴子修补程序的内容脚本运行得太慢，并且错过了初始请求。

Question

我有一个chrome扩展，用于拦截响应体数据，将其操作为有用的统计数据，然后在页面上呈现这些统计数据。

问题是，请求拦截器在最重要的请求已经发送/接收后加载，因此无法对它们进行抓取(请参见我从chrome网络选项卡附带的图像，希望这会使事情变得更清楚)。

目前，我的拦截器运行在一个与我感兴趣的urls相匹配的content.js脚本中。

INTERCEPTOR.JS

listenerFn = (event) => {
    console.log("Url:, ", event.target.responseURL);
    // DO OTHER STUFF
}

(
    () => {
        var XHR = XMLHttpRequest.prototype;
        var send = XHR.send;
        XHR.send = function() {
            this.addEventListener('load', listenerFn)
            return send.apply(this, arguments);
        };
    }
)();

我的清单(V3)脚本看起来像这样.

MANIFEST.JSON

{
    "manifest_version": 3,
    .....
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
          "matches": ["URL_OF_INTEREST.com/*"],
          "js": ["interceptor.js"],
          "run_at": "document_start"
        }
    ],
    "web_accessible_resources": [
        {
            "matches": ["<all_urls>"],
            "resources": ["interceptor.js"]
        }
    ],
    "permissions": [
        "scripting",
        "activeTab",
        "declarativeContent",
        "storage",
        "tabs"
    ],
    "host_permissions": [
        "*://*/*"
      ]
}

我觉得我的选择是：

1. 研究如何更快地注入拦截器脚本。
2. 延迟页面请求，直到拦截器被完全注入(不可能？)
3. 试着用chrome.WebRequest

我不知道这些是否有可能。1-我认为拦截器不能在当前的设置中被更快地注入(就像我在设置run_at时所做的那样)。我甚至不知道是否能做到这一点。我相信WebRequest不允许访问请求体。

有人向我提到，由于代码与页面内容无关，所以可以在background.js脚本中运行这段代码。所以也许这是个很好的探索途径。

下面我附上了两个图片，显示了chrome中的网络选项卡。

在第一个图像(它只显示XHR)中，绿色箭头是我需要抓取的请求，紫色的括号包含没有被截获的请求，黄色的是请求的请求。第二个图像(它同时显示XHR和JS文件)的颜色类似，但这包括一个蓝色箭头，显示何时运行interceptor.js文件。

​

​

如有任何建议或指导，将不胜感激。如果有人想要/需要更多的信息，请告诉我，

谢谢!

Answer 1

假设您的注入器脚本是通过DOM script元素的src加载的，它将异步加载并在页面加载的其他脚本之后运行。解决方案是在chrome.scripting.registerContentScripts世界中使用MAIN注册这个脚本。

1. 删除web_accessible_resources和加载interceptor.js的内容脚本中的代码
2. 将以下代码添加到background.js中： chrome.scripting.unregisterContentScripts({ids}).catch(() () chrome.runtime.onInstalled.addListener() => { const脚本= [{ id：‘拦截器’，js：‘拦截器’.js，匹配：‘>，runAt：'document_start'，world：'MAIN'，}；const id= scripts.map(s => s.id)；等待=> => {}；等待=>=>{}；})；

另一个问题是在content_scripts和web_accessible_resources中加载相同的文件。您应该使用两个不同的脚本，因为它们在两个不同的上下文中运行("worlds")。要在它们之间进行通信，可以使用CustomEvent消息传递(示例)。

最后，站点可能使用iframe来发出请求，在这种情况下，您需要将"all_frames": true添加到内容脚本的manifest.json声明中，如果manifest.json是about:blank或没有src，则可能添加"match_origin_as_fallback": true。