如何将Chrome扩展程序与网络浏览器流量挂钩 [英] How to hook chrome extension to network browser traffic

问题描述

我正在尝试编写一个Chrome扩展程序，以拦截网络流量并修改数据.

I'm trying to write a chrome extension which intercepts network traffic and modify the data.

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

I would appreciate if someone can tell me exactly which API I should use for this and where I can find the documentation.

推荐答案

使用 webRequest API，并查看其事件.

Make use of the webRequest API and have a look at their events.

创建具有权限activeTab的清单，以获取您所在的当前标签页和网址格式，您希望启用该扩展名. webRequestBlocking权限需要专门设置用于阻止和修改流量.

Create a manifest with permissions activeTab to get permissions for the current tab on which you are on, and the url pattern you wish the extension to be enabled for. The webRequestBlocking permission needs to be set specifically for blocking and modifying traffic.

{
  "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侦听器. 这对我做出这些选择非常有用

Create a background script and start adding webRequest listener based on which actions you want to perform. This was useful for me when making those choices.

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是阻止，脚本资源的用户代理已更改，在后台控制台中，您将找到发出的请求.

Visit chrome://extensions and open the background page, and go to its console. Then visit https://google.com normally, you will see that all images are changed to their new location, the XHR's are blocked, and the script resources have their User Agent changed, and in the background console you will find the requests that were made.

这篇关于如何将Chrome扩展程序与网络浏览器流量挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！