CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Prashant Shukla
Prashant Shukla

Reputation: 329

google chrome extension http request monitoring for tab

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?

Upvotes: 1

Views: 1745

Answers (1)

gkalpak
gkalpak

Reputation: 48212

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. E.g.:

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

  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.

Upvotes: 1

Related Questions