如何通过Chrome扩展捕获Fetch/XHR请求并打印到控制台

问题核心原因 #

你的代码未生效主要是两个问题：

• Content Script默认运行在隔离沙箱环境，无法直接修改页面主世界的window.fetch和XMLHttpRequest原型
• Manifest配置存在错误（matches域名不完整，多余的web_accessible_resources配置）

修正后的Manifest配置 #

{
  "manifest_version": 3,
  "name": "Request Interceptor",
  "version": "1.0",
  "host_permissions": [
    "https://*.abc.com/path/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://*.abc.com/path/*"],
      "js": ["inject.js"],
      // 关键配置：让脚本运行在页面主世界，才能覆盖原生API
      "world": "MAIN"
    }
  ]
}

修正后的inject.js脚本 #

(function() {
  // 拦截Fetch请求
  const originalFetch = window.fetch;
  window.fetch = async function(...args) {
    console.log('🔍 拦截到Fetch请求:', args);
    try {
      const response = await originalFetch(...args);
      // 克隆响应，避免原响应体被消耗导致页面无法读取
      const clonedRes = response.clone();
      const resContent = await clonedRes.text();
      console.log('📥 Fetch响应内容:', {
        状态码: response.status,
        请求地址: response.url,
        响应体: resContent
      });
      return response;
    } catch (err) {
      console.error('❌ Fetch请求错误:', err);
      // 必须重新抛出错误，否则页面的错误处理逻辑会失效
      throw err;
    }
  };

  // 拦截XMLHttpRequest
  const originalOpen = XMLHttpRequest.prototype.open;
  const originalSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function(method, url, ...rest) {
    this._reqInfo = { 请求方法: method, 请求地址: url };
    this.addEventListener('loadend', () => {
      console.log('🔍 拦截到XHR请求:', this._reqInfo);
      console.log('📥 XHR响应内容:', {
        状态码: this.status,
        响应地址: this.responseURL,
        响应体: this.responseText
      });
    });
    originalOpen.apply(this, [method, url, ...rest]);
  };

  XMLHttpRequest.prototype.send = function(...args) {
    console.log('📤 XHR发送数据:', args);
    originalSend.apply(this, args);
  };
})();

关键说明 #

• world: "MAIN"：Manifest V3专属配置，让Content Script进入页面主执行上下文，才能修改页面原生的API
• 响应克隆：Fetch和XHR的响应体仅能读取一次，克隆后读取可避免影响页面正常业务逻辑
• 错误重抛：Fetch拦截的catch块必须重新抛出错误，否则页面自身的错误捕获逻辑会失效

内容的提问来源于stack exchange，提问作者Ron