在 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 开始，不能再从 、

Answer 2

使用 FireFox 中的 HTML 选项卡可以实际了解是否添加了 img 元素。它可能已被添加，问题出在您的 URL 上。

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