Programming » Firefox Addons

Simple Addon for Android

This addon will add menu item that scrolls current page to the top

1. Create a folder with name to-top-test.

2. Create file install.rdf to give the addon a name, id and application binding (Thunderbird, Firefox, Android)

<?xml version="1.0" encoding="utf-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>to-top-test@test.org</em:id>
    <em:name>To Top Test</em:name>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
    <em:bootstrap>true</em:bootstrap>
    <em:unpack>true</em:unpack>
    
    <em:description>Adds menu item to scroll the page to the top</em:description>
    <em:creator>creator</em:creator>

    <em:targetApplication>
      <Description>
        <em:id>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</em:id>
        <em:minVersion>19.0</em:minVersion>
        <em:maxVersion>37.0</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>
id - any id with @
type - it's an addon (not theme)
bootstrap - it's restartless
targetApplication -> id - constant bound to Firefox for Android

3. Create file bootstrap.js which is the entry point of the addon

const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
Cu.import('resource://gre/modules/Services.jsm');

var menu;

function loadIntoWindow(window) {
  menu = window.NativeWindow.menu.add({
    name:"To Top Test",
    callback:function(){
      toTopTest(window);
    }
  });
}

function toTopTest(window){
  var win=window.content
  win.scrollTo(0,0)
}

function unloadFromWindow(window) {
  if (!window) return;
  window.NativeWindow.menu.remove(menu);
}

var windowListener = {
  onOpenWindow: function(aWindow) {
    let domWindow = aWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
    domWindow.addEventListener("UIReady", function onLoad() {
      domWindow.removeEventListener("UIReady", onLoad, false);
      loadIntoWindow(domWindow);
    }, false);
  },
};

function startup(aData, aReason) {
  let windows = Services.wm.getEnumerator("navigator:browser");
  while (windows.hasMoreElements()) {
    let domWindow = windows.getNext().QueryInterface(Ci.nsIDOMWindow);
    loadIntoWindow(domWindow);
  }
  Services.wm.addListener(windowListener);
}

function shutdown(aData, aReason) {
  if (aReason == APP_SHUTDOWN) return;
  Services.wm.removeListener(windowListener);
  let windows = Services.wm.getEnumerator("navigator:browser");
  while (windows.hasMoreElements()) {
    let domWindow = windows.getNext().QueryInterface(Ci.nsIDOMWindow);
    unloadFromWindow(domWindow);
  }
}

Here startup() is the function from which the addon working process begins. It calls the loadIntoWindow() function for each open window. This function adds the menu item with a name and callback function which triggers when the item is pressed.

The toTopTest() function performs the scrolling action itself.

Then when the addon is being removed the shutdown() function runs and calls the unloadFromWindow() for each open window. This function removes the created menu item using the object stored in the menu variable which was obtained in the loadIntoWindow() function when the menu item was created.

4. Pack the addon. Select 2 files in the folder and create a .zip archive with 7-zip. Then change the extension to .xpi.

5. Install on Android.

  1. Move the file to a folder on Android.
  2. Copy its path with any explorer tools (Total Commander, Root Explorer) or remember the folder, the path should be like

    file:///sdcard/install/addon.xpi

    Or associate .xpi file extension with Firefox (through a command like Open With)

    Android addon Open xpi with

  3. Open the Firefox for Android and paste the path or type it in the URL bar.

    Android addon URL for xpi

  4. Wait until the file is opened, then allow the installation and install the addon.

    Android addon allow installation

    Android addon Install addon

  5. Open the menu and the item To Top Test should be the last one.

    Android addon result menu

7. Test it, scroll a page down and press this button.

The project GitHub repository.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>