Running Greasemonkey javascript only after page JS changes content?

Question

On some websites, HTML tags load after certain events occur (javascript function loading a query or search, or user needs to scroll down).

When writing your own javascript functions to try to edit these tags via window.onload, since the tags technically don't exist yet, the function does nothing. Placing the functions at the bottom of the body doesn't work, since those tags do not load after waiting a bit of time, but after their associated javascript functions create them.

For example, if you wanted to change the grey-black colour of the divs in Google Images after a search (which loads more pictures as you scroll down, but doesn't do anything if you don't), even you attempt to write a Greasemonkey script to perform actions with window.onload, it would not do anything after scrolling down since it's already loaded.

Would a possible (but crude) solution be to re-run the function each time the user scrolls down (like a mouse listener of sorts)? Or would you recommend another method? Just delaying the function doesn't quite work since it would depend on when the user decides to scroll.

you can use the newer MutationObserver events to monitor the adding of new content. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver — dandavis, Dec 10 '14 at 02:09
@dandavis: Hey, that did the trick! I ended up using a JS library called 'Mutation Summary' (which is actually based off of Mutation Observer) and I figured out how to hook these so-called mutations! Thanks a bunch! (P.S. I'm not sure how to mark your comment as the answer...) — Cake Princess, Dec 10 '14 at 23:52
Post your MutationObserver answer at the duplicate question, it should get upvotes there. — Brock Adams, Dec 12 '14 at 23:52

score 1 · Answer 1 · answered Dec 10 '14 at 02:19

Here's an example of how an image is added when the window is scrolled:

window.onscroll = myFunction;

function myFunction() {

  if (!document.getElementById('img1')) {
    var img1 = new Image();
    img1.id = 'img1';
    img1.src = 'http://placekitten.com/g/200/300';
    document.body.appendChild(img1);
  }

}

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

Running Greasemonkey javascript only after page JS changes content?

1 Answers1