El script de contenido de Chrome Extension antepuesto al cuerpo no funciona correctamente

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' />");

Así es como se supone que debe verse:

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!

preguntado el 29 de julio de 12 a las 00:07

What you could do is to wrap the entire page in a div con position: relative; top: 20px; /*or whatever height your bar is*/ then prepend your bar. That would shunt the actual web page down even if some elements are positioned absolute (as they will not be positioned absolutely within the div, rather than the body) and place your bar above the web page. Let me know if this is the answer and I'll post it. -

PS that file doesn't exist on my computer - perhaps, if the above doesn't work, you could post your code? -

Hmm, great idea. I tried it out, but unfortunately there were no results. Here's what i did. $("body").prepend("<iframe class='toolbar' src='localhost/toolbar.php' /><div class='website'>"); $("body").append("</div>"); -

Its simpler than that - try $("body").wrapInner("<div class='website'></div>").prepend("<iframe class='toolbar' src='localhost/toolbar.php'></iframe>");. Eso debería hacer el truco. -

You do realize this is what the space below is for right? -

4 Respuestas

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

I hope this one is good.

Respondido 31 ago 12, 07:08

Worked perfectly! Thank you very much. Could you perhaps explain why this works? Thanks again! - Frankie Nwafili

$("body> :not (#pandiv)").css({position:'relative',top:'23'}); means take all body with all frames and controls except #pandiv and put on them stylesheet rule: position:relative; top:23px; - Kirill Shur

Pruebe algo como lo siguiente:

//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.

Respondido 29 Jul 12, 01:07

If I remove the wrapInner portion, the iframe displays but with the original problem of not pushing down the google navbar. If I use this solution with the wrapInner portion, the page is pushed down and there is room for my bar, but it does not show up. I've set the height and width appropriately but to no avail - Frankie Nwafili

Unfortunately I am not sure I can help, not without access to all the code or a JSFiddle. Any chance you could supply one? - clarkeychico

@FrankieNwafili: One possibility - it may be there is an error in the JS - can you check in Firebug or Chrome dev tools and see if there are any JS errors coming out of it? You may also like to put an http:// on the beginning of the iframe src - that is probably your problem come to think of it. - clarkeychico

As I suspected, if you try it on the jQuery wrapInner page, the iFrame actually tries to load api.jquery.com/wrapInner/localhost/toolbar.php which results in a 404. You need localhost/toolbar.php en lugar de. - clarkeychico

I'm sorry I didn't quite understand what you were getting at with that last comment - Frankie Nwafili

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

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

Respondido 31 Jul 12, 21:07

    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(){});

Respondido el 27 de Septiembre de 12 a las 23:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.