拦截 fetch() 不捕获所有 fetch 调用答案

【问题标题】：Intercept fetch() doesn't capture all fetch calls拦截 fetch() 不捕获所有 fetch 调用
【发布时间】：2022-11-21 18:20:00
【问题描述】：

我按照这里的答案：Intercept fetch() API requests and responses in JavaScript

注入.js

const { fetch: origFetch } = window;
window.fetch = async (...args) => {
  window.postMessage({ type: 'API_AJAX_CALL', payload: args }, '*');
  const response = await origFetch(...args);
  return response;
};

内容脚本.js

var headElement = (document.head || document.documentElement);
var injectJs = function (fileName) {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(fileName);
    headElement.insertBefore(s, headElement.firstElementChild);
};

// Register to receive the message from the injected script
window.addEventListener("message", function (event) {
    if (event.data.type && (event.data.type == "API_AJAX_CALL")) {
        console.log("CONTENT-SCRIPT-CONTEXT: Received the data " + event.data.payload[0]);
    }
}, false);

injectJs("inject.js");

显现

  "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["content.js"],
            "run_at": "document_start",
            "all_frames": true
        }
    ],

但是修补过的 api 只捕获了一些获取调用（用绿色圆圈标记 - 注入的内容脚本）。它甚至错过了在捕获少数提取调用之后发生的提取调用。

【问题讨论】：

标签： javascript google-chrome-extension monkeypatching

【解决方案1】：

这种事情是有限制的。这是您无法拦截的可能不完整的呼叫列表，如下所示：

在您的脚本运行之前开始的调用
在您的脚本运行之前，代码将 fetch 捕获到本地的调用（不太可能，但是...）：
```
(() => { const myFetch = fetch; /*...code using `myFetch`...*/ })();
```
service workers 打来的电话

你只能做你能做的。您可能想查看各种 webRequest 事件，例如 onBeforeRequest。

【讨论】：