Javascript 在firefox扩展中使用jQuery

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

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

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

在中，mr.on=function（）

每当我点击与插件相关联的菜单项时，这段代码只会使网页的背景色变为黑色

但是，如果我想跑

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

$（'body'，mr.env.）。附加（“”）；

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

为什么呢

这是我的叠加XUL：

这是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;
}

})();

var DnsResolver={
onLoad:function（）{
//初始化代码
this.initialized=true；
},
onMenuItemCommand:function（）{
testextension.on（）；
窗口打开（“chrome://dnsresolver/content/window.xul",","铬",；
}
};
addEventListener（“加载”，函数（e）{DnsResolver.onLoad（e）；}，false）；
如果（！testextension）{var testextension={}；}
（功能（）{
var mr=测试扩展；
mr.on=函数（）{
李先生(mr),；
var jQuery=mr.jQuery；
var$=函数（selector，context）{returnnewjquery.fn.init（selector，context | | window._content.document）；}；
$.fn=$.prototype=jQuery.fn；
mr.env=window.\u content.document；
/*$（“body”，mr.env）.css（“background”，“black”）*/
$（'body'，mr.env.）。附加（''）；
$（mr.env）.ready（function（）{
//隐藏并使显示可见
$（“span.close a”，mr.env）。单击（函数（）{
美元（“#tbar”）、恩夫·斯莱德托格尔先生（“fast”）；
美元（“#tbarshow”，env先生）.fadeIn（“慢”）；
});
//显示tbar并隐藏显示栏
$（“span.show a”，mr.env）。单击（函数（）{
美元（“#tbar”，env先生）。滑动切换（“快速”）；
$（“#tbarshow”，mr.env）.fadeOut（）；
});
});
/*$（“body”，mr.env）.css（“background”，“black”）*/
}
//从mozilla下标方法加载Jquery
mr.loadLibraries=函数（上下文）{
var loader=Components.classes[“@mozilla.org/moz/jssubscript loader；1”]
.getService（组件.接口.mozijsubscriptLoader）；
loader.loadSubScript（“chrome://dnsresolver/content/jquery-1.4.4.min.js“，上下文）；
var jQuery=window.jQuery.noConflict（true）；
if（typeof（jQuery.fn._init）=‘未定义’{jQuery.fn._init=jQuery.fn.init；}
mr.jQuery=jQuery；
}
})();

使用FireFox中的HTML选项卡了解是否添加了img元素。它可能是被添加的，问题在于你的URL

---

我记得在构建我的FireFox扩展时，文件是通过一个特殊的协议（chrome://我想）定位的，在那里你可以输入扩展名并浏览它

从Firefox 3开始，chrome资源不能再从

、

、或从不可信源加载的内容中包含或添加的其他元素中引用。此限制适用于由不受信任的源定义的元素和由受信任的扩展添加的元素。如果需要明确允许此类引用，请将标志设置为“是”，以获取旧版本Firefox中的行为。

我的一个评论是使用CDN加载Jquery（谷歌），因为这样可以节省用户bandwidth@Tom好主意，FireFox扩展位于硬盘中，因此从硬盘加载速度更快。$（'body'，mr.env）.append（“”）；给出一个拒绝访问错误；关于URL，您也是对的：相对引用在我的特定代码中似乎不起作用，因为我正在从试图添加图像的body标记的上下文中引用图像。。。这个主体属于浏览器中加载的任何网页。你能访问URI吗(chrome://dnsresolver/content/check.png)通过工具栏，所以问题不在于JavaScript或jQuery，您可能需要寻找调用资源的正确方法。

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;
}

})();