google chrome extension http request monitoring for tab

Question

I am working on google chrome extension application. I want, as soon as user's http request on browser's tab finished it give some alert. Means as browser finishes its request app could be able to listen it.

Right now i am using below code. It reads tab url after request finished.

chrome.webRequest.onCompleted.addListener(function() {
    var mydiv = document.createElement('div');  
        chrome.tabs.getSelected(null,function(tab) {
        mydiv.innerHTML = tab.url;      
    });         
    document.body.appendChild(mydiv);
});

But it's not working for me. Any help?

Answer 1

You are probably running the code from your background page (or else the chrome.webRequest API won't be available. From there (background page) it is not possible to interact with a webpages DOM.

You can achieve what you want like this:

Solution A

1. Have a content script injected into the webpage at "document_end" or "document_idle" .

2. The content script (once injected) will create your div and add it to the DOM.

Solution B

1. Have your background page listen for page load. BTW, chrome.tabs.onUpdated might be better suited for the task. Eg:

   \nchrome.tabs.onUpdated.addListener(function(tabId, info, tab) {   \n    if (info.status && (info.status == "complete")) { \n        // The page is loaded, so inject a content script \n    } \n}); \n

2. Upon page load programmatically inject a content script.

3. The content script (once injected) will create your div and add it to the DOM.