Question

我正在尝试开发一个firefox扩展，它在每个网页的底部绘制一个工具栏。

到目前为止，我设法使jQuery工作，我通过运行

证明了这一点

$("body",mr.env).css("background","black");

在 mr.on = function（）。

只要我点击与插件关联的菜单项，此代码就会使网页的背景颜色变黑。

但是，如果我尝试运行

 $('body',mr.env).append( ' <img src="img/check.png" /> ' );

它完全失败了。它在错误控制台中不显示任何错误，并且不显示图像。

为什么？

这是我的叠加XUL ：

<script src="window.js"/>   
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<!-- Firefox Tools menu -->
<menupopup id="menu_ToolsPopup">
    <menuitem id="menu_crypt_demo"  class="" image=""
          label="Use DnsResolver?" insertbefore="javascriptConsole" accesskey="o" 
          oncommand="DnsResolver.onMenuItemCommand(event);">
    </menuitem>
</menupopup>

这是JavaScript文件（window.js）：

var DnsResolver = {
    onLoad: function() {
    // initialization code
    this.initialized = true;

},

onMenuItemCommand: function() {
testextension.on();
window.open("chrome://dnsresolver/content/window.xul", "", "chrome");
}

};


window.addEventListener("load", function(e) { DnsResolver.onLoad(e); }, false);

if(!testextension){ var testextension={};}

(function(){

var mr=testextension;


mr.on=function(){
    mr.loadLibraries(mr); 
    var jQuery = mr.jQuery; 
    var $ = function(selector,context){ return new jQuery.fn.init(selector,context||window._content.document); };
    $.fn = $.prototype = jQuery.fn;

    mr.env=window._content.document;

            /*$("body",mr.env).css("background","black");*/
    $('body',mr.env).append('<img src="img/check.png" />');


$(mr.env).ready(function(){

    // hide and make visible the show
    $("span.close a",mr.env).click(function() {
        $("#tbar"),mr.env.slideToggle("fast");
        $("#tbarshow",mr.env).fadeIn("slow");
    });

    // show tbar and hide the show bar
    $("span.show a",mr.env).click(function() {
        $("#tbar",mr.env).slideToggle("fast");
        $("#tbarshow",mr.env).fadeOut();
    });
});


    /*$("body",mr.env).css("background","black");*/
}

// Loading the Jquery from the mozilla subscript method
mr.loadLibraries = function(context){
    var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
                                                 .getService(Components.interfaces.mozIJSSubScriptLoader);
    loader.loadSubScript("chrome://dnsresolver/content/jquery-1.4.4.min.js",context);
    var jQuery = window.jQuery.noConflict(true);
    if( typeof(jQuery.fn._init) == 'undefined') { jQuery.fn._init = jQuery.fn.init; }
    mr.jQuery = jQuery;
}

})();

Answer 1

从Firefox 3开始，无法再从<img>，<script>或从不受信任的来源加载的内容中包含或添加的其他元素引用Chrome资源。此限制适用于由不受信任的源定义的元素和受信任的扩展添加的元素。如果需要明确允许此类引用，请将contentaccessible标志设置为yes以获取旧版Firefox中的行为。

Answer 2

使用FireFox中的HTML标签实际了解是否添加了img元素。它可能已添加，问题出在您的网址上。

我记得在构建我的FireFox扩展时，这些文件是通过特殊协议（chrome：//我认为）定位的，您可以在其中放置扩展名并可以浏览它。

在firefox扩展中使用jQuery

2 个答案: