热乎，新鲜出炉，基于Manifest V3 的Chrome 浏览器插件实现对http请求及响应的拦截修改

留给XXX的时间不多了...

至2025 年 6 月：Chrome MV2 将不再支持。

废话不多说，开始主题：

项目结构：

manifest.json 文件：

{
  "manifest_version": 3,
  "name": "Lv",
  "version": "1.0",
  "author": "NQCTEK",
  "description": "An extension to modify request bodies and response.",
  "icons": {
    "16": "icons/logo.png",
    "19": "icons/logo.png",
    "38": "icons/logo.png",
    "48": "icons/logo.png",
    "128": "icons/logo.png"
  },
  "action": {
    "default_title": "QBee Chrome Ext",
    "default_icon": "icons/logo.png",
    "default_popup": "popup/index.html"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "declarativeNetRequest"
  ],
  "options_page": "option/index.html",
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": [
        
        "<all_urls>"

      ],
      "exclude_matches": ["http://127.0.0.1:8090/*"],
      "exclude_globs": ["http://127.0.0.1:8090/*"],
      "js": [
        "content/content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "inject/inject.js",
        "ukey/ukey.js"
      ],
      "matches": [
            "<all_urls>"
      ],
      "exclude_matches": ["http://127.0.0.1:8090/*"],
      "exclude_globs": ["http://127.0.0.1:8090/*"]
    }
  ]
}

service-worker.js 文件

chrome.runtime.onInstalled.addListener(() => {
    console.log("Background JS Extension installed");
});

content.js 文件

const script = document.createElement('script');
script.src = chrome.runtime.getURL('inject/inject.js');
(document.head || document.documentElement).appendChild(script);

inject.js 文件

const interceptFetch = () => {
    const originalFetch = window.fetch;
    window.fetch = async function(...args) {
        const [resource, config] = args;

        if (config && config.method != 'GET' && config.body) {
          // 修改请求体的逻辑
          let modifiedBody = config.body.replace(/a/g, "ACA");
          config.body = modifiedBody;
        }

        const response = await originalFetch.apply(this, args);

        console.log('Fetch response body:', response);

        // 读取并处理响应体
        const clonedResponse = response.clone();
        clonedResponse.text().then(body => {
            console.log('### Fetch response body:', body);
            // 在这里可以处理响应体
        });

        return response;
    };
}

const interceptXHR = () => {

    const xhr = XMLHttpRequest.prototype;
    const originalOpen = xhr.open;
    const originalSend = xhr.send;


    xhr.open = function (method, url, async, user, pass) {

        this.addEventListener('readystatechange', function () {
            if (this.readyState === 4) {

                //处理响应体 do something
        })
        
        return originalOpen.apply(this, arguments);
    }

    xhr.send = function (data) {
        console.log("send data: ", data);
        //处理请求体 do someting

        return originalSend.apply(this, arguments);
    }
}


interceptXHR()
interceptFetch()

打完收工！

另，AI工具普及， 如何拥有自己的AI工具，请参看如下文章：

一举获得chatgpt-4o,MJ绘画,viggle,luma 等热门AI工具，你值得拥有。