title: Using mutationObserver doesn't seem to keep track of a changing table in the DOM
body: <p>I am trying to write a simple chrome extension that changes the values of a table in the DOM.The important thing here is that the webpage is using ajax commands to build and change the contents of this table.(First, there is nothing in the page.Then you click on a link, and with an ajax request(no page reloads) a table will be created and after that by clicking other links, this table will be modified).</p>
  
  <p>Here's the code I am using to listen to the table's changes :</p>
  
  <pre><code>var target = document.querySelector('#my-table');
  
  var observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
          alert('The table has appeared');
      });
  });
  
  var config = {
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true
  };
  
  observer.observe(target, config);
  
  observer.disconnect();
  </code></pre>
  
  <p>The problem is that nothing will happens when I press a link in the page that makes the table change.And when I was inspecting chrome's console to debug my work, I saw that it gave me this error as soon as the page loads : </p>
  
  <blockquote>
    <p>Uncaught NotFoundError: Failed to execute 'observe' on
    'MutationObserver': The provided node was null</p>
  </blockquote>
  
  <p>I am really lost and don't know what to do.Does anyone have any suggestions?
  ps:Here's my extension's manifest file:</p>
  
  <pre><code>"manifest_version": 2,
  
    "name": "MyExtension",
    "description": "Testing the Content Script api",
    "version": "1.0",
  
    "content_scripts": [
      {
        "matches": ["www.myWebsite.com"],
        "js": ["script.js"]
      }
    ],
  
    "browser_action": {
      "default_icon": "icon.png"
    }
  }
  </code></pre>