Change content of a webpage dynamically with a Firefox extension using Javascript without Greasemonkey

Question

I'd like to change the content of webpages to put an element that changes according to the webpage.

eg I'd like to display a div element with the text "You are on http://www.google.com " when a user is on the website http://www.google.com but when a user goes to http://www.yahoo.com the div should change and display "You're on http://www.yahoo.com ".

What I'm looking for is some kind of example to begin with (I hope not being the first person to think of this kind of trick).

Answer 1

Here is one way to get something on the page, to show the current URL. This is not the proper approach, but it will give some visible change to start with.

These steps will start with the hello world example mentioned above, and modify it to inject some text on the web page.

get original files

1. Save the extension file locally on your computer.
2. Renaming the XPI file to starter.zip
3. Copy out the contents of starter.zip into a new folder "showUrl", so you can edit the files.
4. Open browserOverlay.js in a text editor ( in showUrl/content/ )

insert new code

1. The menu item Tools | Hello World: | Hello World! will trigger this method:

    XULSchoolChrome.BrowserOverlay = { /** * Says 'Hello' to the user.  */ sayHello: function(aEvent) { // code starts here. 

2. Add this code to he "sayHello" function

    sayHello: function(aEvent) { try { // gBrowser is a global value var document = gBrowser.contentDocument; 
    var doc_bodies = document.getElementsByTagName('body'); var doc_body = doc_bodies[0]; var first_element = doc_body.firstChild; var url_div = gBrowser.contentDocument.createElement('div'); url_div.id = 'added-by-firefox-extension'; url_div.innerHTML = document.URL; // add the url at the top of the document body doc_body.insertBefore( url_div, first_element ); // add the url at the end of the document body doc_body.appendChild( url_div ); } catch(e) { alert(e); }

3. compress the contents of showUrl

4. change the extension of the zip file to xpi
5. drag and drop the xpi file onto firefox
6. navigate to a web page
7. open menu item Tools | Hello World! | Hello World!

For me, the main pain point was figuring out how to use gBrowser to get at the web page.

Answer 2

You are looking for an existing Firefox add-on called Greasemonkey (very popular among java script geeks). It enables you to change the content of webpage dynamically via java script through userscripts .

There are lots of user scripts already available at http://userscripts.org/ for your purpose. Learn from them and modify it for your use.

Answer 3

Your question is overly broad. There's a number of steps you need to make in order to start developing a Firefox extension. There's plenty of documentation and examples to get you started here: https://developer.mozilla.org/en/extensions

Answer 4

You should learn XUL (and XBL with binding ) to append XUL-DOM-Nodes. You should not append HTML-Nodes to the HTML-document. See the Extensions-section on how to build an extension.

Answer 5

You can do something like this:

Start with two hide div: the first one will have a js condition (onChange, for example) that will be written with the URL of the site (after the js load). Then the js change the innerHTML (or only the class, if you use a css for make visible a label) that will contain the value of the first div.

It's quite simple:)