With the chrome extension, how to add html just below the page body tag?

Question

I want to have a chrome extension that adds a bit of bar to the top of some sites. A bar similar to the one you have at the top of this site if you are logged in.

From what I read, I need to do this with the content of the script, and I tried different things. I currently have a file called content.js which has the following

var iframe = document.createElement("iframe"); iframe.src = chrome.extension.getURL("iframe.html"); document.body.appendChild(iframe); 

Iframe.html file is just

 <button id="button">Click me!</button> <script> document.getElementById("button").addEventListener("click", function() { top.postMessage("clicked!", "*"); }, false); </script> 

This inserts this code at the bottom of the page, and my problem is that I would like to get it at the top. How can i do this?

Answer 1

You can add it to the beginning with insertBefore and firstchild as follows:

 document.body.insertBefore(iframe, document.body.firstChild);