title: Chrome extension: Insert fixed div as UI
body: <p>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:</p>
  
  <p>Here is my manifest:</p>
  
  <pre><code>{
      "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"
      }
  }
  </code></pre>
  
  <p>Here is the function in background.js that will be performing this functionality:</p>
  
  <pre><code>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 );" +
                              //set attributes for div
                              "div.id = 'myDivId';" +
                              "div.style.position = 'fixed';" + 
                              "div.style.top = '50%';" +
                              "div.style.left = '50%';" +
                              "div.style.width = '100%';" +   
                              "div.style.height = '100%';" + 
                              "div.style.backgroundColor = 'red';" + 
                              //set attributes for btnForm
                              "btnForm.action = '';" +
                              //set attributes for btn
                              //"btn.removeAttribute( 'style' );" +
                              "btn.type = 'button';" +
                              "btn.value = 'hello';" +
                              "btn.style.position = 'absolute';" +
                              "btn.style.top = '50%';" +
                              "btn.style.left = '50%';";
  
  
  
      chrome.tabs.executeScript( null, { code: prepHtmlStyle } );     
      chrome.tabs.executeScript( null, { code: insertDiv } );             
  
  }
  </code></pre>