title: chrome extension -- appending div to body not working with facebook like button
body: <p>I'm creating a chrome extension and I've been successful so far. As a last functionality I'm trying to attach a div (something that shows a small, non-irritating ad about my personal site) to the body of the currently opened tab/page when the user clicks the about section in my extension's panel. I got it working too. </p>
  
  <p>But the problem is, this div is NOT getting attached to the body tag of the main page if that page contains facebook like or twitter follow widget. Instead it gets attached to the body tag in the iframe of the above said widgets.</p>
  
  <p>When I checked the dom structure of such pages, these widgets create their own html>body structure within an iframe. And that's what causing this issue.</p>
  
  <p>I tried attaching this div to the first body element as follows:</p>
  
  <pre><code>var mainbody = document.getElementsByTagName('body');
  mainbody[0].appendChild(adDiv);  --&gt; adDiv = new element I created above this code with its own properties
  </code></pre>
  
  <p>By the above 2nd statement I was expecting it to get attached to the first  tag and not onto the inner  tags.</p>
  
  <p>Unfortunately this is not working either. I can see it getting attached to the facebook/twitter widget instead of the main . Is there anything wrong in what I'm doing?</p>
  
  <hr>
  
  <p><strong>Edit</strong></p>
  
  <p>From @stan's comment I was able to fix the issue in pages with facebook/twitter widget(ie the ones with iframes). Now my code looks like this:</p>
  
  <pre><code>document.body.appendChild(adDiv);
  </code></pre>
  
  <p>-- Thanks Stan.</p>
  
  <p>But now I'm facing another issue. In certain sites (like <a href="http://www.glassdoor.com/index.htm" rel="nofollow">http://www.glassdoor.com/index.htm</a>) div is not appearing in the page. What actually happens is, the div is getting attached to the body but at the very same moment its getting removed also. It can be seen only with the help of html inspector(chrome's inspector in this case).</p>
  
  <p>The div(adDiv) gets attached to the body in the markup and vanishes. <strong>It's as if its unable to bind itself to the body</strong>. Result: nothing appearing in the page. </p>
  
  <p>Any idea why this is happening? Its happening only in a minority of sites like the above said one.</p>
  
  <hr>
  
  <p><strong>background.js</strong></p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab){
      chrome.tabs.sendMessage(tab.id,{clicked:1});
  });
  </code></pre>
  
  <p><strong>content.js</strong></p>
  
  <pre><code>chrome.extension.onMessage.addListener(function(request,sender,sendResponse){
      if(request.clicked==1){
          /* Create adDiv and apply style to it using JS */
          document.body.appendChild(adDiv);
      }
  }
  </code></pre>