Writing Addon to Firefox with XUL and JS

Question

I want to write Firefox Addon, that when certain page is loaded, e.g : www.google.com, dynamically create a button in the DOM, that when I click on it, it takes me to another page, for example: www.stackoverflow.com.

Note: this button should appear only when google.com is loaded.

I searched to get some answers, so far nothing works, any help will be appreciated. Thanks.

Edit:

Thank you very much, that was very helpful. Can you please direct me how i'm doing the same thing in chrome extension? i'm tried with manifest.json and js file, but got no luck!

Answer 1

This is quite simple.

Assuming your 'page modification function' looks something like this:

function install_my_button(domWindow) {

  // insert your button here (e.g: into domWindow.document.body)

  var button = domWindow.document.createElement('BUTTON');
  button.value = 'OTHER DOMAIN';
  domWindow.document.appendChild(button);
  button.addEventListener('click', function(evt) {
    domWindow.location.href = 'http://stackoverflow.com';
  }, false, true); // yes - 4 arguments!

  // that will place the button at the bottom of the page 
  // you may wish to use some CSS to position it, or perhaps
  // find a specific container element within the page in
  // which to place it.

  // prevent multiple handling
  domWindow.__my_button_installed__ = 1; 
}

Then define a 'load' event handler which looks something like this (take note that this is where we limit this code to working on the target domain (e.g: google.com):

const Cc = Components.classes;
const Ci = Components.interfaces;
let consoleService = Cc["@mozilla.org/consoleservice;1"]
                       .getService(Ci.nsIConsoleService);
function LOG(msg) { consoleService.logStringMessage("EXTENSION: "+msg); }

let wm = Cc["@mozilla.org/appshell/window-mediator;1"]
           .getService(Ci.nsIWindowMediator);

var my_load_handler = function (evt) {
  try {
    var browserEnumerator = wm.getEnumerator("navigator:browser");
    while (browserEnumerator.hasMoreElements()) {
      var browserWin = browserEnumerator.getNext();
      var tabbrowser = browserWin.gBrowser;
      var numTabs = tabbrowser.browsers.length;
      for (var index = 0; index < numTabs; index++) {
        var currentBrowser = tabbrowser.getBrowserAtIndex(index);
        var domWindow = currentBrowser.contentWindow.wrappedJSObject;            
        // identify your target page (google.com or www.google.com)
        if (/\/\/(?:www\.)?google.com/.test(domWindow.location.href)) {
          // install the privileged method (if it's not already there!)
          if (!domWindow.hasOwnProperty('__my_button_installed__') {
            install_my_button(domWindow);
          } 
        } 

      }
    }
  } catch (e) {
    LOG(e);
  }
}

You'll need to run that for all (current & future) chromeWindow elements:

let windows = wm.getEnumerator("navigator:browser");
while (windows.hasMoreElements()) {
  let domWindow = windows.getNext().QueryInterface(Ci.nsIDOMWindow);
  WindowListener.setupBrowserUI(domWindow);
}
wm.addListener(WindowListener);

where WindowListener is defined as:

var WindowListener = {
  setupBrowserUI: function(window, xulWindow, othWindow) {
    window.gBrowser.addEventListener('load', my_load_handler, true); 
  },
  tearDownBrowserUI: function(window) { 
    window.gBrowser.removeEventListener('load', my_load_handler, true); 
  },
  onOpenWindow: function(xulWindow) {
    let domWindow = xulWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                      .getInterface(Ci.nsIDOMWindow);
    domWindow.addEventListener("load", function listener() {
      domWindow.removeEventListener("load", listener, false); 
      var domDocument = domWindow.document.documentElement;
      var windowType = domDocument.getAttribute("windowtype");
      if (windowType == "navigator:browser")
        WindowListener.setupBrowserUI(domWindow);
    }, false);
  },

  onCloseWindow: function(xulWindow) { },
  onWindowTitleChange: function(xulWindow, newTitle) { }
};

Answer 2

heres a demo addon that listens to if 'mozillazine' is found in the url and if it is, then it adds a div.

https://www.dropbox.com/s/7zzlobbonkzucqw/demo%20listen%20page%20load%20window%20listener.xpi

download that to desktop, then drag it to open firefox browser window, it will install. navigate to mozillazine.org and you will see a blue div gets inserted.

to customize:

1)download that 2) rename to zip 3) extract to folder 4) edit bootstrap.js to be www.google.com instead of mozillazine. 5) then zip that contents, and name it to xpi, drag to firefox to install (or use addon XPICompiler to zip and rename to xpi and install to firefox) 6) now navigate to any page with www.google.com and it will show the blue div

Answer 3

You don't need to create addon for this. Instead you can write greasemonkey script (this is a way simpler), and if you want - you can later compile greasemonkey script into Firefox addon.
Also all other major browsers are capable of running greasemonkey scripts - so you can use same script everywhere.