title: Monitoring elements in page
body: <p>I'm developing Google Chrome Extension, which finds some elements in some web-site and changes them in some way (so much "some", hmm :-) ). These elements are not displayed when HTML is loaded and they're loaded in scripts of the page. Also, they can appear much later.</p>
  
  <p>Currently I'm running checks every little time and ignore the elements, which are already processed:</p>
  
  <pre><code>var processed = [];
  
  //...
  
  function checkElements() {
      var elements = document.querySelectorAll(//...
  
      for (var i = 0; i &lt; elements.length; ++i) {
          var element = elements[i];
  
          if (processed.indexOf(element) &gt; -1) continue; // ignore processed elements
          processed.push(element);
  
          // process element
      }
  }
  
  setInterval(checkElements, TIMEOUT);
  </code></pre>
  
  <p>But that looks silly and it seems to me that performance is awful.</p>
  
  <p>Can I create some trigger on creating/changing of elements? What is the idiomatic JS way for doing that?</p>