javascript - 在 firefox 扩展中使用 jQuery

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 开始，Chrome 资源不能再从 <img> 中引用, <script> ，或从不受信任的来源加载的内容中包含或添加的其他元素。此限制适用于不受信任的源定义的元素和受信任的扩展添加的元素。如果需要明确允许此类引用，请设置 contentaccessible标记为 yes 以获得旧版本 Firefox 中的行为。