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。