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.

e.g. 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.