Fire Greasemonkey script on AJAX request Fire Greasemonkey script on AJAX request ajax ajax

Fire Greasemonkey script on AJAX request


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.


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 DOMwindow.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