如何将 Chrome 扩展挂钩到网络浏览器流量

我正在尝试编写一个 chrome 扩展来拦截网络流量并修改数据。

如果有人能准确地告诉我应该使用哪个 API 以及在哪里可以找到文档，我将不胜感激。

利用网络请求 https://developer.chrome.com/extensions/webRequestAPI 并看看他们的events https://developer.chrome.com/extensions/webRequest#events.

创建具有权限的清单activeTab获取您所在的当前选项卡的权限，以及网址模式 https://developer.chrome.com/apps/match_patterns您希望启用该扩展。这webRequestBlocking需要专门设置用于阻止和修改流量的权限。

清单.json

{
  "manifest_version": 2,
  "name": "network intercepter",
  "description": "intercept/modify/block data",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "host_permissions": [
    "https://*.google.com/*"
  ],

  "permissions": [
    "activeTab",
    "webRequest",
    "webRequestBlocking"
  ]
}

创建后台脚本并根据您要执行的操作开始添加 webRequest 侦听器。This https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest/BlockingResponse在做出这些选择时对我很有用。

背景.js

var onBeforeSendHeadersListener = function(details) {
    // view request + headers to be send
    console.log(details);

    // block XMLHttpRequests by returning object with key "cancel"
    if (details.type == "xmlhttprequest") {
        return {
            cancel: true
        };
    }

    // modify the user agent of all script resources by changing the requestHeaders and then return an object with key "requestHeaders"
    if (details.type == "script") {
        for (var i = 0; i < details.requestHeaders.length; i++) {
            if (details.requestHeaders[i].name == "User-Agent") {
                details.requestHeaders[i].value = "I'm not a bot";
            }
        }
        return {
            "requestHeaders": details.requestHeaders
        };
    }
}


var onBeforeRequestListener = function(details) {
    // all images will now be loaded from this location instead
    // CAREFUL! CROSS ORIGIN REQUESTS WILL NOT BE BLOCKED WITH CHROME EXTENSIONS
    if (details.type == "image") {
        return {
            "redirectUrl": "https://foo.bar/image.jpg"
        };
    }
}


chrome.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeadersListener, {
    urls: ["https://*.google.com/*"]
}, ["requestHeaders", "blocking"]);

chrome.webRequest.onBeforeRequest.addListener(onBeforeRequestListener, {
    urls: ["https://*.google.com/*"]
}, ["requestBody", "blocking"]);

访问 chrome://extensions 并打开后台页面，然后转到其控制台。然后访问https://google.com https://google.com通常，您会看到所有图像都更改为新位置，XHR 被阻止，脚本资源的用户代理也发生更改，并且在后台控制台中您将找到发出的请求。