Firefox extension to access DOM (with jQuery) [duplicate]

Question

This question already has an answer here:

FireFox extension: How to access page element via jQuery? (1 answer)

Closed 9 years ago.

I'm trying to manipulate the HTML of a page using my extension and jQuery.

In this simple test, I'm trying to first load jQuery and then replace all h1's to "Hello", like this: $("h1").html("Hello");

See this jsfiddle: http://jsfiddle.net/37vxJ/ (minus the jQuery part:)

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

How can I make this work?

If I uncomment: //alert("page is loaded \n" +doc.location.href);

The extension will print out the URL (after 1 second)

Answer 1

You are trying to use jQuery in the wrong context.

Change

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

to

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

Answer 2

Use firebug. it is the best for me.

You can find it here: https://addons.mozilla.org/fr/firefox/addon/firebug/

UPDATE:

There is a powerful service such as there is a reverse engineering to inspect DOM : Just , click on the blue arrow (mentionned on the picture) , Enter mouse on your Element ,And you will get a synchronization between the GUI and DOM .

Answer 3

Modern versions of Firefox have built in Console, Inspector, Debugger, Profile and Network tracking. Simplyn click on Menu->Developer and select the tool you need

Alternatively use Firebug as recommended in another answer.