javascript - Chrome extension that runs code when ajax requests happen - Stack Overflow

admin管理员组

文章数量:1245189

So, to give a basic description of my issue.

I have a extension that is working right now (finally) that wraps phonenumbers in an type of tag.

It is working right now, but I am having an issue with anything that is dynamically loaded via JS based on user action, or based on ajax requests

For example, if I click a hotmail email, and open it, the script works, but only when I refresh the page so that the email loads and calls my contentscript.

I thought about getting around this by making the user click the icon for the extension, but that is not really the functionality that was requested.

If there is a way in Chrome to listen to ajax requests (which there seems to be) .html That is what I want to do, but I am not sure how to implement this. Do I treat it as a listener?

I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.

Anyhelp or even a pointer in the right direction would be great =)

Please be nice if this is a dumb question, I promise I have been Google'ing and searching forms for an answer and I can't seem to find anything. It is possible that I don't know enough to even ask the right question. I have been using javascript for about two weeks now... so my learning curve has been rough climb.

So, to give a basic description of my issue.

I have a extension that is working right now (finally) that wraps phonenumbers in an type of tag.

It is working right now, but I am having an issue with anything that is dynamically loaded via JS based on user action, or based on ajax requests

For example, if I click a hotmail email, and open it, the script works, but only when I refresh the page so that the email loads and calls my contentscript.

I thought about getting around this by making the user click the icon for the extension, but that is not really the functionality that was requested.

If there is a way in Chrome to listen to ajax requests (which there seems to be) http://code.google./chrome/extensions/webRequest.html That is what I want to do, but I am not sure how to implement this. Do I treat it as a listener?

I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.

Anyhelp or even a pointer in the right direction would be great =)

Please be nice if this is a dumb question, I promise I have been Google'ing and searching forms for an answer and I can't seem to find anything. It is possible that I don't know enough to even ask the right question. I have been using javascript for about two weeks now... so my learning curve has been rough climb.

• javascript
• ajax
• google-chrome-extension

Share Improve this question Follow asked Aug 2, 2012 at 22:53 njfifenjfife 3,57511 gold badge2323 silver badges3232 bronze badges 5

• How about chrome.webRequest.onCompleted.addListener(function(){/*your code here*/}); Put it in the background page. – Derek 朕會功夫 Commented Aug 2, 2012 at 23:17
• Here's my draft answer: pastebin./8ZB8ucAM. – Rob W Commented Aug 3, 2012 at 9:39
• To Derek, and Rob W, I have tried implimenting this in the way you have described. I first tried this in my background.js : 'chrome.webRequest.onCompleted.addListener(function(){ chrome.tabs.executeScript(null, {file: "typenex_contentscript.js"}); });' But that seemed to change nothing, I then implemented Rob's method with no result. Do I need to send message to my content script instead of Executing it? I am still not sure on the rules of this. Also, the ONLY way that a site like hotmail. can update their website the way they do is with XHRs right? There is not another way? – njfife Commented Aug 3, 2012 at 20:47
• And I DID give my extension permissions for tabs – njfife Commented Aug 3, 2012 at 20:48
• @njfife If you want people to be notified when you mention them in a ment you need to put the @ symbol before their name. – PAEz Commented Aug 4, 2012 at 22:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

When you say...

I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.

...where you using Mutation Events or Mutation Observers? Because I thought Observers where ment to fix that. Ive never done anything with Observers before and used Mutation Summary. It seemed able to do what you want except it didnt start observing until the document was ready/idle (not sure which) so you might have to do a scan on document ready and then fire the observer.
Here's what my test code looked like (in a content script)...

handleChanges = function(summaries) {
    // There may be more things to ignore
    var ignore = {
        SCRIPT: true,
        NOSCRIPT: true, 
        CDATA: true,
        '#ment': true
    }
    summaries.forEach(function(summary) {
        summary.added.forEach(function(node) {
            if (!ignore[node.nodeName] || (node.parentNode && !ignore[node.parentNode.nodeName]) && node.nodeValue.trim()) {
                node.nodeValue='PAEz woz ere - '+node.nodeValue;
            }
        })
    })

}

var observer = new MutationSummary({
    callback: handleChanges,
    // required
    rootNode: document,
    // optional, defaults to window.document
    observeOwnChanges: false,
    // optional, defaults to false
    queries: [{
        characterData: true
    }]
});

And another way of checking for a XMLHttpRequest is to hijack it, simply it can look like (in a content script at document start).....

function injectScript(source) {

    var elem = document.createElement("script"); //Create a new script element
    elem.type = "text/javascript"; //It's javascript
    elem.innerHTML = source; //Assign the source
    document.documentElement.appendChild(elem); //Inject it into the DOM
}

injectScript("("+(function() {

    function bindResponse(request, response) {
        request.__defineGetter__("responseText", function() {
            console.warn('Something tried to get the responseText');
            console.debug(response);
            return response;
        })
    }

    function processResponse(request,caller,method,path) {
        bindResponse(request, request.responseText);
    }

    var proxied = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function(method, path, async) {
            var caller = arguments.callee.caller;
            this.addEventListener('readystatechange', function() {
                if (this.readyState === 4)
                    processResponse(this,caller,method,path);
            }, true);
        return proxied.apply(this, [].slice.call(arguments));
    };
}).toString()+")()");

...which I learn't at the mega awesome Supper Happy Fun Blog.
But as you probably know now, thats not enough for ajax driven sites. Normally you have to write something specific for the site or maybe the Mutation Observer will meet your needs.

This is an updated answer using MutationObserver, since MutationSummary is not working anymore:

var observer = new MutationObserver(function(mutationsList) {
  console.log(`Something has changed`);
});

observer.observe(document.querySelector('.whatever'), {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true
});

• Make sure to change the .whatever selector to whichever class/id you are interested in.
• Make sure to specify true/false in the subtree option in case you are interested in children modifications of the selector or not.

本文标签： javascriptChrome extension that runs code when ajax requests happenStack Overflow