Databases
StackOverflow2013
Postsdbo
POInserting a bar on top of every page on the web through browser extension
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInserting a bar on top of every page on the web through browser extension
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDraco
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POInserting a bar on top of every page on the web through browser extension
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload