Как подключить расширение chrome к трафику сетевого браузера

Question

Я пытаюсь написать расширение chrome, которое перехватывает сетевой трафик и изменяет данные.

Буду признателен, если кто-нибудь скажет мне, какой именно API мне следует использовать для этого и где я могу найти документацию.

Answer 1

Используйте API webRequest и посмотрите на их события .

Создайте манифест с разрешениями activeTab, чтобы получить разрешения для текущей вкладки, на которой вы находитесь, и шаблон URL , для которого вы хотите, чтобы расширение было включено. Разрешение webRequestBlocking необходимо установить специально для блокировки и изменения трафика.

manifest.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 в зависимости от того, какие действия вы хотите выполнить. Этот был полезен для меня при принятии этих решений.

background.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, а в фоновой консоли вы найдете запросы, которые были сделал.