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 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 pletes):

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

But that never seems to get fired.

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. 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 pletes):

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

But that never seems to get fired.

• javascript
• google-chrome-extension

2 Answers 2

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./chrome/extensions/webRequest.html
http://code.google./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.

Try this: background.js

chrome.webRequest.onCompleted.addListener
(
    TrackRequest,
    {urls: ["<all_urls>"]},
    ["responseHeaders"]
);


function TrackRequest(info)
{
        console.log(info);
}

and the manifest.js:

{
"name": "Ext",
"version": "1.0",
"manifest_version": 2,
"description": "Ext template",
"background": {
"scripts": ["background.js"]
},
"content_security_policy": "script-src 'self' chrome-extension-resource://readme.js; object-src 'self'",
"permissions": ["webRequest","*://*/"]
}

You cannot make an "allert" from background script. For debugging, go to extensions and click on "background page". You will see there the console output.