CODEWITHSUNDEEP
jquerycssgoogle-chrome-extension
Frankie Nwafili
Frankie Nwafili

Reputation: 165

Chrome Extension content script prepend to body not working properly

I have a content script for a google chrome browser extension that I am working on, and it injects a horizontal bar to the top of whatever web page that the user is on. The problem is that when I navigate to google.com, googles nav bar appears over my bar. Here is the prepend code 

$("body").prepend("<iframe class='toolbar' src='http://localhost/toolbar.php' />");

Here is how it is supposed to look:

A website that the toolbar works on

And here is how it looks on google.com The problem that arises when the content is prepending to google. As you can see the google navbar overlaps with my bar

I'm trying different approaches, if I fix the problem before anyone else I'll post it. Any help/guidance is much appreciated. Thanks!

Upvotes: 0

Views: 998

Answers (4)

Kirill Shur
Kirill Shur

Reputation: 290

    enter code here

var v = document.getElementsByTagName('html')[0].style.top.toString().substring(0, 2);

            if (parseInt(v, 10) > 0) {

                var pxx = (v + 35).toString();
                document.getElementsByTagName('html')[0].style.position = "relative"
                document.getElementsByTagName('html')[0].style.top = pxx + "px";

            }
            else {

                document.getElementsByTagName('html')[0].style.position = "relative"
                document.getElementsByTagName('html')[0].style.top = "35px";
            }


  var url = chrome.extension.getURL('docz/links.html');
  var fRame =  $(document.createElement('iframe'));
  var wrapDiv = $(document.createElement('div'));

    wrapDiv.attr('id','wDiv');
    wrapDiv.css('width','100%');  
    wrapDiv.css('height','35px' );
    wrapDiv.css('position','fixed' );
    wrapDiv.css('top','0 !important');
    wrapDiv.css('z-index','2147482637');   

  fRame.attr('id','fr1');
  fRame.attr('scrolling','no');
  fRame.attr('src',url);
  fRame.attr('frameborder','0');
  fRame.css('position','absolute');
  fRame.css('top', '0 !important');


  fRame.css('width','100%');
  fRame.css('height','35px');
  fRame.css('border','none'); 
  fRame.css('border-radius','10px 10px 10px 10px');
  fRame.css('background-color','silver'); 
  fRame.appendTo(wrapDiv);
  wrapDiv.prependTo(document.body);


try this... before was more crude approach put this code int  $(function(){});

Upvotes: 0

Kirill Shur
Kirill Shur

Reputation: 290

$(function(){
    setTimeout(function(){
        $("your html").prependTo('body');
        $("body > :not('#panDiv')").css({position:'relative',top:'23px'});
    },1000);
}); //end $

I hope this one is good.

Upvotes: 1

Skal&#225;r Wag
Skal&#225;r Wag

Reputation: 2396

Set up the z-index css propery of your bar to a big number:

<iframe style="z-index:999999;"></iframe>

Upvotes: 0

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

Try something like the following:

//select the body
$("body")
//wrap the content in a div
.wrapInner("<div class='website'></div>")
//prepend the iframe to the body
.prepend("<iframe class='toolbar' src='http://localhost/toolbar.php'></iframe>");

Let me know if you can't get this working.

Upvotes: 0

Related Questions