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

Question

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 not sure if this is allowed in Chrome.

Thanks.

Chrome Dev Tools have an Network panel. Have you tried that? — Mrchief, Jul 26 '11 at 14:51
Yeah was reading through the source, was hoping to find a better way of doing it, thanks though. — Pickled, Jul 26 '11 at 15:05
@Pickled, Identical to http://stackoverflow.com/q/6685503/632951 ? — Pacerier, Jun 21 '15 at 21:56

Justin Harris · Answer 1 · 2022-02-04T20:43:47.637

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)
}

but you cant read document image css... response body, only xhr type response . so how do i get css response — walkman, May 17 '22 at 11:18

score 5 · Accepted Answer · answered Jul 26 '11 at 14:53

5

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

answered Jul 26 '11 at 14:53

Walialu

4,096
2
27
29

9

You will want to go here as it is not experimental anymore! https://developer.chrome.com/extensions/webRequest – Eric Bishard Apr 29 '16 at 18:00

warfish · Answer 3 · 2023-03-02T17:51:17.617

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.

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

3 Answers3

Linked