Is it possible to monitor HTTP Traffic in Chrome using an extension?

I am attempting to write a Chrome extension that needs to watch HTTP traffic to check if a specific domain is requested and then do other stuff based on that.

I want to keep it all as a single extension if possible, so can't use Fiddler etc. I know FireFox can do this as it's done in HttpFox, but am n开发者_开发百科ot sure if this is allowed in Chrome.

Thanks.

chrome.webRequest is helpful but it doesn't let you read the response body in Chrome.

I made an extension that intercepts all web requests using a script that is injected into the page by a content script. My example is here: https://github.com/onhello-automation/onhello/tree/main/app/scripts.

I used https://stackoverflow.com/a/48134114/1226799 to help write this but I corrected some issues in there and simplified it.

Some relevant parts:

manifest.json

    "content_scripts": [
        {
            "matches": [
                "https://example.com/*"
            ],
            "run_at": "document_start",
            "js": [
                "scripts/content_script.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "scripts/injected.js"
    ],
    "permissions": [
        "https://example.com/*"
    ]

scripts/content_script.ts (I use webextension-toolbox to build and I compile TypeScript to JavaScript)

import { browser } from 'webextension-polyfill-ts'

// You can use `browser`/`chrome` here and interact with extension stuff like storage and tabs.

const s = document.createElement('script')
s.src = browser.extension.getURL('scripts/injected.js')
s.onload = async function () {
    (this as any).remove()
};
(document.head || document.documentElement).appendChild(s)

scripts/injected.js:

// You CANNOT use `browser`/`chrome` here and you CANNOT interact with extension stuff like storage and tabs.

const XHR = XMLHttpRequest.prototype

const open = XHR.open
const send = XHR.send
const setRequestHeader = XHR.setRequestHeader

XHR.open = function () {
    this._requestHeaders = {}

    return open.apply(this, arguments)
}

XHR.setRequestHeader = function (header, value) {
    this._requestHeaders[header] = value
    return setRequestHeader.apply(this, arguments)
}

XHR.send = function () {
        
    this.addEventListener('load', function () {
        const url = this.responseURL
        const responseHeaders = this.getAllResponseHeaders()
        try {
            if (this.responseType != 'blob') {
                let responseBody
                if (this.responseType === '' || this.responseType === 'text') {
                    responseBody = JSON.parse(this.responseText)
                } else /* if (this.responseType === 'json') */ {
                    responseBody = this.response
                }
                // Do your stuff HERE.
            }
        } catch (err) {
            console.debug("Error reading or processing response.", err)
        }
    })

    return send.apply(this, arguments)
}

maybe this is what you are looking for: http://code.google.com/chrome/extensions/trunk/experimental.webRequest.html#examples

You can use the Chrome webRequest API to intercept and monitor network requests. This API allows you to listen to different events : onBeforeRequest, onBeforeSendHeaders, onHeadersReceived, onCompleted, and onErrorOccurred.

chrome.webRequest.onBeforeRequest event listener is added to the extension

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.url.includes("example.com")) {
      // Do something here
    }
  },
  {urls: ["<all_urls>"]}
);

Remember to declare the webRequest permission in your manifest.json file:

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
],

You can try also some web sniffer like WebQSEE integrated into a browser.