title: Modify elements immediately after they are displayed (not after page completely loads) in greasemonkey script?
body: <p>I have <a href="https://greasyfork.org/en/scripts/12210-rotten-tomatoes-decimal-rating" rel="nofollow">this script</a>. It applies on RottenTomatoes movie pages , and modifies 3 elements<br>
  (1 visible text and 2 texts inside tooltips).</p>
  
  <p>Currently, (due to greasemonkey's <code>@run-at document-end</code>) it modifies the elements <strong>only after the page has completely loaded</strong>.  </p>
  
  <p>Additionally, there are many times where RottenTomates pages delay loading, up to 20 sec(!),<br>
  so that's additional delay to my script.</p>
  
  <p>This causes two things:</p>
  
  <ul>
  <li>a delay in displaying the modified visible text, and that,</li>
  <li>if you hover your mouse in either of the tooltips before the page is completely loaded, then, after it's loaded, it will probably only contain the initial text without my addition, or just my addition.</li>
  </ul>
  
  <p>To see this, install the <a href="https://greasyfork.org/en/scripts/12210-rotten-tomatoes-decimal-rating" rel="nofollow">script</a> and then visit <a href="http://www.rottentomatoes.com/m/the_liberator_2014/" rel="nofollow">this typical target page</a>.</p>
  
  <p><br>
  The RottenTomatoes pages load various content via XHR (as I've seen in Firefox Netowork Monitor),<br>
  but the 3 elements (that I want to modify) are displayed <strong>immediately</strong>, not when page has completely loaded.</p>
  
  <p><br>
  I have tried using <code>MutationObserver</code> to watch for the specific text value to appear on screen, but it doesn't seem to work. Its structure is like this:</p>
  
  <pre><code>var target = selector_for_element_containing_text ;    // the selector is:  document.querySelector('.audience-info &gt; div:nth-child(1)');
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
         modifyElements();
     });
  });
  var config = { attributes: true, childList: true, characterData: true, subtree: true };
  observer.observe(target, config);
  
  
  function modifyElements(){  // This is just the current code of my script
      // modify element 1 
      // modify element 2         
      // modify element 3 
  }
  </code></pre>
  
  <p><strong>How can I modify the elements immediately after they are displayed?</strong></p>