javascript - Inserting a bar on top of every page on the web through browser extension -


i'm writing browser extension inserts banner on top of every page user visits. banner must not sticky , must not block existing content. (my chrome extension)

currently i'm doing adding banner content dom through following javascript in contentscript inserted on every page:

$content = $('<div id="lb-banner'>blah blah</div>'); $('html:first').addclass('lb-banner-added').prepend($content);

i'm adding content before body banner not affected how site styled. then, in order push main content of page down while not affecting potential site layout, i'm using following styles:

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; }

this pushes whole html down while banner absolutely positioned fill in empty space (in case 32px).

i have tried other methods add banner on top of every page. method compatible sites far (even many of sticky headers).

however not best solution cannot working on facebook, twitter, linkedin (works blocking content), gmail/gcalendar/gdoc (works caused contents moved outside of window), , many more. furthermore, method requires me specify height of content, okay prefer more dynamic method.

notes:

without styling showed above, banner still appear on top of every page. doing break layout on many sites such google.com. example on google, banner cover black nav bar , there spacing right before search results.

here's chrome extension in question https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

if you're injecting ui directly dom, doesn't matter do, can never sandbox unwanted interference. example given page may load in elements asynchronously after page load, there's little can prevent shunting ui out of way. unless declare every css style explicitly ui elements, can overridden externally defined styles.

one common method used in browser extensions embed ui frame , plant right @ top of dom. it's not pretty solution, isolate styling unwanted interference.

is okay insert <iframe> page's content?


Comments

Post a Comment

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

i have android application, want convert blackberry 10 , google map needed in app,but blackberry 10 not support googlemap , blackberry developer web site supply way replace it.the sample below: @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); webview webview = (webview) findviewbyid(r.id.mywebview); webview.getsettings().setjavascriptenabled(true); webview.loadurl("http://maps.google.com/?ll=36.97, -122&lci=bike&z=13&t=p"); } i cannot understand it,i not know how add multiple markers on googlemap via url? can me? this worked me map shown in webview.
Read more

php - guestbook returning database data to flash -

i've been struggling problem long , unable make work, hope can me it. first, know php files correct , mysql database works fine. in flash, able submit comment database comments not display. did many tests such making returned_database flash separately , worked fine - can see old comments. long combine submitting 1 , returning 1 together, flash doesn't show comments more. put lower version flash effects on frame thinking doesn't collaborate returning flash, submitting flash works fine. since pretty complex problem hard me copy actionscript code because on different frames in flash. if has ideas fixing maybe can send file you?
Read more

delphi - Dynamic file type icon -

i want register file type in windows , make program delphi draw icon of file according contents (something custom icon format). how can this? thanks nortd , user539484 comments, searched internet "shell icon handler delphi" , found sample here , , shell+ components has component this.
Read more