Run Greasemonkey script on the same page, multiple

Question

I'm totally new to Greasemonkey, javascript, in fact all the UI stuff.

Requirement: Userscript is run by GS once after the page loads. However, I need the same script to be run multiple times without refresh

Use case: For ex, Amazon.com search happens using Ajax. I need to embed a custom element in the search results.

I need to inject my content to the search-results-div along with the results every time a search happens in the same page (there's no page refresh)

My current script runs only with the page refresh.

I hope above explanation is clear. Please help.

Answer 1

You can use the DOMNodeInserted event to call your callback, e.g.:

document.addEventListener('DOMNodeInserted', function() { alert('hi') }, false);

Note that the event will be triggered by any change in the page structure, so you'll have to check that you're targeting the right change.

Answer 2

The simplest, most robust way is to use the waitForKeyElements() utility.

Here is a complete script that uses jQuery and waitForKeyElements to alter Amazon search results:

// ==UserScript==
// @name     _Amazon Search, alter results
// @include  http://www.amazon.com/s/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

function addCustomSearchResult (jNode) {
    //***** YOUR CODE HERE *****
    jNode.prepend (
        '<div id="result_000" class="fstRow">Buy my stuff, instead!</div>'
    );
}

waitForKeyElements ("#atfResults", addCustomSearchResult);