jquery - 附加到正文的 Chrome 扩展内容脚本无法正常工作

Question

我有一个我正在开发的 google chrome 浏览器扩展的内容脚本，它会在用户所在的任何网页的顶部注入一个水平条。问题是当我导航到 google.com 时，谷歌导航栏出现在我的栏上。这是前置代码

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

这是它的外观：

这是它在 google.com 上的外观

我正在尝试不同的方法，如果我在其他人之前解决问题，我会发布它。非常感谢任何帮助/指导。谢谢！

Answer 1

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

我希望这个是好的。

Answer 2

尝试以下操作：

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

让我知道如果你不能让这个工作。

Answer 3

将 bar 的 z-index css 属性设置为一个大数字：

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

Answer 4

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