Fire Greasemonkey script on AJAX request

Question

I am working on a user script and I've just found that the script is not run when the main page makes AJAX requests.

Is there any way to fire the user script both on main page load and on AJAX requests?

Answer 1

The smart way to rerun the script's code on AJAX requests, is to focus on the key bits of the page and check for changes.

For example, suppose a page contained HTML like so:

<div id="userBlather">
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div>

and you wanted the script to do something with each comment as it came in.

Now you could intercept all AJAX calls, or listen for DOMSubtreeModified(deprecated), or use MutationObservers, but these methods can get tricky, finicky, and overly complicated.

A simpler, more robust way to get ajax-ified content on a wild page is to poll for it using something like the waitForKeyElements function, below.

For example, this script will highlight comments that contain "beer", as they AJAX-in:

// ==UserScript==
// @name            _Refire on key Ajax changes
// @include         http://YOUR_SITE.com/YOUR_PATH/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

function highlightGoodComments (jNode) {

    //***** YOUR CODE HERE *****

    if (/beer/i.test (jNode.text () ) ) {
        jNode.css ("background", "yellow");
    }
    //...
}
waitForKeyElements ("#userBlather div.comment", highlightGoodComments);

/*--- waitForKeyElements():  A utility function, for Greasemonkey scripts,
    that detects and handles AJAXed content.

    IMPORTANT: This function requires your script to have loaded jQuery.
*/
function waitForKeyElements (
    selectorTxt,    /* Required: The jQuery selector string that
                        specifies the desired element(s).
                    */
    actionFunction, /* Required: The code to run when elements are
                        found. It is passed a jNode to the matched
                        element.
                    */
    bWaitOnce,      /* Optional: If false, will continue to scan for
                        new elements even after the first match is
                        found.
                    */
    iframeSelector  /* Optional: If set, identifies the iframe to
                        search.
                    */
) {
    var targetNodes, btargetsFound;

    if (typeof iframeSelector == "undefined")
        targetNodes     = $(selectorTxt);
    else
        targetNodes     = $(iframeSelector).contents ()
                                           .find (selectorTxt);

    if (targetNodes  &&  targetNodes.length > 0) {
        btargetsFound   = true;
        /*--- Found target node(s).  Go through each and act if they
            are new.
        */
        targetNodes.each ( function () {
            var jThis        = $(this);
            var alreadyFound = jThis.data ('alreadyFound')  ||  false;

            if (!alreadyFound) {
                //--- Call the payload function.
                var cancelFound     = actionFunction (jThis);
                if (cancelFound)
                    btargetsFound   = false;
                else
                    jThis.data ('alreadyFound', true);
            }
        } );
    }
    else {
        btargetsFound   = false;
    }

    //--- Get the timer-control variable for this selector.
    var controlObj      = waitForKeyElements.controlObj  ||  {};
    var controlKey      = selectorTxt.replace (/[^\w]/g, "_");
    var timeControl     = controlObj [controlKey];

    //--- Now set or clear the timer as appropriate.
    if (btargetsFound  &&  bWaitOnce  &&  timeControl) {
        //--- The only condition where we need to clear the timer.
        clearInterval (timeControl);
        delete controlObj [controlKey]
    }
    else {
        //--- Set a timer, if needed.
        if ( ! timeControl) {
            timeControl = setInterval ( function () {
                    waitForKeyElements (    selectorTxt,
                                            actionFunction,
                                            bWaitOnce,
                                            iframeSelector
                                        );
                },
                300
            );
            controlObj [controlKey] = timeControl;
        }
    }
    waitForKeyElements.controlObj   = controlObj;
}

---

Update:

For convenience, waitForKeyElements() is now hosted on GitHub.

This answer shows an example of how to use the hosted function.

Answer 2

Another way — simpler and smaller but less flexible — is to use a JavaScript time delay to wait for the AJAX/jQuery to load and finish. For example, if the following HTML was dynamically generated after first load:

<div id="userBlather">
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div>

Then a greasemonkey script like this would be able to modify it:

// Wait 2 seconds for the jQuery/AJAX to finish and then modify the HTML DOM
window.setTimeout(updateHTML, 2000);

function updateHTML()
{
    var comments = document.getElementsByClassName("comment");
    for (i = 0; i < comments.length; i++)
    {
        comments[i].innerHTML = "Modified comment " + i;
    }
}

See guidance here: Sleep/Pause/Wait in Javascript