title: Can't append a child to page from a Chrome extension
body: <p>This is the simplified code, it's stops working after the appendChild line:</p>
  <pre><code>$preview = {
      designImg: '',
      thePage: null,
      designPreviewer: null,
      init: function(){
          var divNode = $('&lt;div&gt;').attr('id','layoutVsDesign').html('test');
          document.body.appendChild( divNode );
          alert('I never happen');
          this.designPreviewer = document.body.find('#designPreviewer');
      }
  };
  
  $(document).ready(function(){
      $preview.init();
  });
  </code></pre>
  <p>Any idea what I am missing?</p>
  <p>I also tried:</p>
  <pre><code>chrome.extension.getBackgroundPage().appendChild()
  </code></pre>
  <p>With pretty much the same result</p>
  <p>-EDIT-</p>
  <p>Using <a href="https://developer.chrome.com/extensions/content_scripts.html" rel="nofollow noreferrer">content scripts</a>:</p>
  <p>works (takes a string):</p>
  <pre><code>chrome.tabs.executeScript({
     code: 'document.body.style.display = &quot;none&quot;'
  });
  </code></pre>
  <p>But</p>
  <pre><code>chrome.tabs.executeScript({
     code: 'document.body.appendChild(&quot;&lt;div&gt;tttttttesttt&lt;/div&gt;&quot;)'
  });
  </code></pre>
  <p>or</p>
  <pre><code>chrome.tabs.executeScript({
     code: 'document.body.appendChild(node[0])'
  });
  </code></pre>
  <p>Won't work, how can I pass the node to the <code>code</code> parameter?</p>