Question

Using a Google Chrome Extension, I would like to fire some event or somehow detect every HTTP response I receive in my browser.

Pretty much – I want to detect exactly what the “Network” tab of the Chrome developer tools sees using a Google Chrome Extension.

For example, if I open the Network tab and go to Google.com I see every .js, .css, image, etc. Can I somehow detect that?

Edit:

I have tried the following (which I would expect to get fired after each request completes):

chrome.webRequest.onCompleted.addListener(function(details) { alert('hey'); });

But that never seems to get fired.

Answer 1

You can use the Web Request api for that, be aware that this came in at Chrome version 17 so youll have to set the minimum_chrome_version to 17.
http://code.google.com/chrome/extensions/webRequest.html
http://code.google.com/chrome/extensions/manifest.html#minimum_chrome_version

manifest.json

{
  "name": "WebRequest",
  "description": "WebRequest - onCompleted",
  "version": "0.1",
  "permissions": ["<all_urls>", "webRequest"],
  "background": {
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

background.js

chrome.webRequest.onCompleted.addListener(function(details) {
    console.debug(details);
}, {
    urls: ["<all_urls>"]
});

Go to the background page and look in the console when a page is loading/loaded.