How to insert an html to the top of a page?

Question

I need to find a way to insert an HTML page into the top of any page using an extension. It should basically appear as a bar that fills the width of the full screen and occurs right below the bookmarks bar, so right above the body. I have the HTML page ready, but I have absolutely no idea how to reflect that on my manifest file, or on javascript.

I have tried to use default popup on browser action, and I've tried to run the javascript file in the background (content.js) and then have it insertBefore but it doesn't seem to do anything.

This is my manifest file

    {
      ...
      "background":{
      "scripts": ["content.js"],
      "persistent": false
    },
  ....
  "browser_action": {
    "default_icon": {
      "256": "img.png"
    }
  },
  "icons": {
    "128": "img.png"
  }
}

And this is my javascript file-(content.js)

    var iframe = document.createElement('iframe');
    iframe.src = chrome.extension.getURL("iframe.html");
    document.body.insertBefore(iframe, document.body.firstChild);

Sorry if the code blocks are wrong, this is my first post