Chrome extension: Insert fixed div as UI

I want to insert a div into a fixed position using a chrome extension. It will overlay the page that you are currently viewing. My concern is that I want this to work on any page without altering it (other than inserting my fixed div), but I don't know if that is possible with the way that I'm doing it. Currently, the button won't show up, and I had a lot of trouble getting the div to show up. By the way, the positioning is just temp for now, I will position it correctly once I get it on the page! :) Here's what I have:

Here is my manifest:

{
    "name":"poop",
    "version":"0.1",
    "manifest_version":2,
    "description":"shitty app I'm making",
    "background":{
        "scripts":[
            "scripts/modernizr.min.js", 
            "scripts/background.js"
            ],
        "persistent": false
    },
    "permissions":[
        "contextMenus", 
        "tabs",
        "http://*/*",
        "https://*/*"
        ],
    "icons":{
        "16":"images/icon_16.png",
        "128":"images/icon_128.png"
    }
}

Here is the function in background.js that will be performing this functionality:

function insertUIDiv()
{       
    var prepHtmlStyle   =   "document.documentElement.style.height = '100%';" +
                            "document.body.style.height = '100%';" +
                            "document.documentElement.style.width = '100%';" +
                            "document.body.style.width = '100%';";

    var insertDiv       =   "var div = document.createElement( 'div' );" +
                            "var btnForm = document.createElement( 'form' );" +
                            "var btn = document.createElement( 'input' );" +
                            //append all elements
                            "document.body.appendChild( div );" +
                            "div.appendChild( btnForm );" +
                            "btnForm.appendChild( btn );" +