title: Inserting a bar on top of every page on the web through browser extension
body: <p>I'm writing a browser extension that inserts a banner on top of every page that the user visits. The banner must not be sticky and must not block any existing content. (<a href="https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima" rel="nofollow">my chrome extension</a>)</p>
  
  <p>Currently I'm doing this by adding the banner content to the DOM through the following javascript in a contentscript that is inserted on every page:</p>
  
  <pre><code>$content = $('&lt;div id="lb-banner'&gt;blah blah&lt;/div&gt;');
  $('html:first').addClass('lb-banner-added').prepend($content);
  </code></pre>
  
  <p>I'm adding the content before body so that the banner is not affected by how the site is styled. Then, in order to push the main content of the page down while not affecting any potential site layout, I'm using the following styles:</p>
  
  <pre><code>html.lb-banner-added {
     position: relative;
     margin-top: 32px;
  }
  #lb-banner {
     height: 32px;
     width: 100%;
     position: absolute;
     top: -32px;
     display: none;
     ... other styles...
  }
  .lb-banner-added #lb-banner { display: block; }
  </code></pre>
  
  <p>This pushes the whole html down while the banner is absolutely positioned to fill in the empty space (in this case 32px).</p>
  
  <p>I have tried other methods to add the banner on top of every page. However this method is compatible with the most sites so far (even many of those with sticky headers).</p>
  
  <p>However this is definitely not the best solution as I cannot get it working on facebook, twitter, linkedin (works but is blocking some content), gmail/gcalendar/gdoc (works but caused some contents to be moved outside of the window), and many more.
  Furthermore, this method requires me to specify the height of the content, which is okay for now but I would prefer a more dynamic method.</p>
  
  <hr>
  
  <p><strong>Notes:</strong></p>
  
  <p>Without the styling I showed above, the banner would still appear on top of every page. However doing so will also break layout on many sites such as google.com. For example on Google, the banner will just cover the black nav bar and there will be extra spacing right before the search results.</p>
  
  <p>Here's the chrome extension that is in question <a href="https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima" rel="nofollow">https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima</a></p>