Firefox扩展访问DOM（使用jQuery）

Question

我正在尝试使用我的扩展和jQuery来操纵页面的HTML。

在这个简单的测试中，我试图首先加载jQuery，然后将所有h1替换为“Hello”，如下所示：$("h1").html("Hello");

请参阅此jsfiddle：http://jsfiddle.net/37vxJ/（减去jQuery部分：）

var myExtension = {
    init: function() {
        // The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
        if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
    },
    onPageLoad: function(aEvent) {
        var doc = aEvent.originalTarget; // doc is document that triggered the event
        setTimeout(function(){
            //alert("page is loaded \n" +doc.location.href);
            $("h1").html("Hello");
        }, 1000);
    }
}
window.addEventListener("load", function load(event) {
    //remove listener, no longer needed
    window.removeEventListener("load", load, false); 
    myExtension.init();  
},false);

我该如何做到这一点？

如果我取消注释：//alert("page is loaded \n" +doc.location.href);

扩展程序将打印出URL（1秒后）

Answer 1

使用firebug。这对我来说是最好的。

你可以在这里找到它： https://addons.mozilla.org/fr/firefox/addon/firebug/

更新：

有一个强大的服务，例如有一个逆向工程来检查DOM：只需点击蓝色箭头（在图片上提到），在你的元素上输入鼠标，你将获得GUI和DOM之间的同步。

Answer 2

您正试图在错误的上下文中使用jQuery。

更改

$("h1").html("Hello");

到

doc.defaultView.wrappedJSObject.$("h1").html("Hello");

Answer 3

Firefox的现代版本内置了控制台，检查器，调试器，配置文件和网络跟踪。只需点击Menu-＆gt; Developer并选择您需要的工具

或者按照另一个答案中的建议使用Firebug。