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.