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

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

变化

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

到

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

Answer 2

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

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

UPDATE：

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

Answer 3

Firefox的现代版本内置了Console，Inspector，Debugger，Profile和Network跟踪功能。只需点击菜单 - >开发人员，然后选择你需要的工具

或者使用另一个答案中推荐的Firebug。