title: How to set up MutationObserver to detect added DOM?
body: <p>Problem: I want to change some of the default text of Facebook to my own.</p>
  
  <p>I used jQuery's <code>text()</code>, but the problem is Facebook will add more DOM when user scrolls down, so I tried to use <code>MutationObserver</code> to detect whether there is new DOM coming in.</p>
  
  <p>I tried this in my chrome content_script:</p>
  
  <pre><code>// I need to detect new .UFILikeLink elements
  var target = document.querySelector('.UFILikeLink');
  
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation.type);
      alert('test');
    });    
  });
  
  var config = { attributes: true, childList: true, characterData: true };
  
  observer.observe(target, config);
  </code></pre>
  
  <p>but this doesn't work, the <code>alert()</code> is not firing.. I wonder is this the right way of using <code>MutationObserver</code>. </p>