时间戳

首页 > 解决方案 > 如何将 chrome 扩展连接到网络浏览器流量

google-chrome-extension - 如何将 chrome 扩展连接到网络浏览器流量

问题描述

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

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

标签： google-chrome-extension

解决方案

使用webRequest API 并查看它们的事件。

创建一个具有权限的清单，activeTab以获取您所在的当前选项卡的权限，以及您希望为其启用扩展程序的url 模式。webRequestBlocking需要专门设置权限以阻止和修改流量。

清单.json

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

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

  "permissions": [
    "activeTab",
    "https://*.google.com/*",
    "webRequest",
    "webRequestBlocking"
  ]
}

创建一个后台脚本并根据您要执行的操作开始添加 webRequest 侦听器。在做出这些选择时，这对我很有用。

背景.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，你会看到所有的图片都换到了新的位置，XHR的被屏蔽了，脚本资源的User Agent也发生了变化，在后台控制台你会发现请求被制作了。

推荐阅读