title: Modify websites with Firefox Add-on
body: <p>I'm writing a Firefox Add-on that modifies some specific websites when I open them. But I don't like the API at all. 
  For example if I want to add a div-container that contains a button to a tab. It would look about like this:</p>
  
  <pre><code>var myScript = 'document.body.innerHTML += "&lt;div style=background-color:rgba(0,0,0,0.5);position:fixed;width:300px;height:300px;right:0px;top:0px;&gt;&lt;input type=button value=test&gt;&lt;/input&gt;&lt;/div&gt;";';
  tab.attach({ contentScript: myScript });
  </code></pre>
  
  <p>This is:<br>
  1. Completely unreadable.<br>
  2. Will look different on lots of websites because some websites add default styles to all input-elements.  </p>
  
  <p>So is there a more readable way to modify a website that doesn't require to add a script as a string?<br>
  And is there a way to overlay any element on the website (even flash)?</p>