Question

I have a user script (for chrome and FF) that adds significant functionality to a page, but has recently been broken because the developers added some AJAX to the page. I would like to modify the script to listen to the pages xmlhttp requests, so that I can update my added content dynamically, based on the JSON formatted responseText that the page is receiving.

A search has turned up many functions that SHOULD work, and do work when run in the console. However they do nothing from the context of a user script.

(function(open) {

    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {

        this.addEventListener("readystatechange", function() {
            console.log(this.readyState);
        }, false);

        open.call(this, method, url, async, user, pass);
    };

})(XMLHttpRequest.prototype.open);

From: How can I intercept XMLHttpRequests from a Greasemonkey script?

This works perfectly in the console, I can change this.readyState to this.responseText and it works great (though in the script I will need it to turn the JSON data into an object, and then let me manipulate it within the userscript. Not just write to the console). However if I paste it into a userscript nothing happens. The xmlhttp requests on the page do not seem to be detected by the event handler in the userscript.

The page doing the requesting is using the jquery $.get() function, if that could have anything to do with it. Though I don’t think it does.

I can’t imagine that there isn’t a way, seems like any userscript running on an AJAX page would want this ability.

Brock Adams · Accepted Answer · 2011-11-24 07:56:23Z

Since the page uses $.get(), it’s even easier to intercept requests. Use ajaxSuccess().

This will work in a Greasemonkey(Firefox) script:
Snippet 1:

unsafeWindow.$('body').ajaxSuccess (
    function (event, requestData)
    {
        console.log (requestData.responseText);
    }
);

Assuming the page uses jQuery in the normal way ($ is defined, etc.).

This should work in a Chrome userscript (as well as Greasemonkey):
Snippet 2:

function interceptAjax () {
    $('body').ajaxSuccess (
        function (event, requestData)
        {
            console.log (requestData.responseText);
        }
    );
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ    = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

addJS_Node (null, null, interceptAjax);

Re:

“But how then do I get that data to the script? … (So I can) use the data later in the script.”

This works in Greasemonkey(Firefox); it might also work in Chrome’s Tampermonkey:
Snippet 3:

function myAjaxHandler (requestData) {
    console.log ('myAjaxHandler: ', requestData.responseText);
}

unsafeWindow.$('body').ajaxSuccess (
    function (event, requestData) {
        myAjaxHandler (requestData);
    }
);

But, if it doesn’t then you cannot share JS information (easily) between a Chrome userscript and the target page — by design.

Typically what you do is inject your entire userscript, so that everything runs in the page scope. Like so:
Snippet 4:

function scriptWrapper () {

    //--- Intercept Ajax
    $('body').ajaxSuccess (
        function (event, requestData) {
            doStuffWithAjax (requestData);
        }
    );

    function doStuffWithAjax (requestData) {
        console.log ('doStuffWithAjax: ', requestData.responseText);
    }

    //--- DO YOUR OTHER STUFF HERE.
    console.log ('Doing stuff outside Ajax.');
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ    = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

addJS_Node (null, null, scriptWrapper);

But how then do I get that data to the script? You added a function to the page, rather than have the userscript grab the data. It can write to the console, but I can’t use the data later in the script. Unless I am missing something? — zeel, Nov 24, 2011 at 6:45
See the updated answer. For a GM script it’s a piece of cake. For a Chrome userscript, the traditional approach is to inject your entire script. — Brock Adams, Nov 24, 2011 at 7:21
That gets me “Object [object DOMWindow] has no method '$'” I imagine that this is more an issue regarding jquery? — zeel, Nov 24, 2011 at 7:34
Which snippet gets you that? If it’s the last snippet (with scriptWrapper) then, yes, nonstandard jQuery is suspect. Link to the target page. — Brock Adams, Nov 24, 2011 at 7:38
No, the first one in your edit. The page can not be linked to, as it requires an account to view. The script running the jquery is in a independent .js file BTW, though I didn’t think that made a difference. Thing is they use the ‘$’ in that script, so it should be defined. — zeel, Nov 24, 2011 at 7:50

1 Answer