Developing Add-ons for Firefox for Android

Margaret Leibovic

Developing Add-ons for Firefox for Android

Mobile Add-ons

  • People use phones and tablets differently than desktop computers
  • Small screens mean less visible UI
  • No more XUL, but you can still build add-ons in JS!

So what can mobile add-ons do?

Interact with Native Android UI

  • Customize menu items
  • Show notifications
  • Open/close tabs
  • Show prompts/dialogs
  • Customize the home page (API in progress)

Interact with Web Content

  • Modify the DOM
  • Listen for events
    • Web progress
    • Touch events
  • Get the user's location

Interact with Profile Data

  • Query history/bookmarks database
  • Set preferences
  • Store data

Some Existing Add-ons

  • Ad-Block Plus
  • Tap Translate
  • Phony
  • Mobile Password Manager
  • These and more on addons.mozilla.org

Now let's build an add-on!

View Source Add-on

Basic Restartless Add-on

  • install.rdf
    • Install manifest with metadata, such as the add-on's identifier, author, and target application
  • bootstrap.js
  • build.sh and config_build.sh
    • The basic restartless add-on skeleton also includes a build script to package and install your add-on

Implementing the UI

  • loadIntoWindow() to initialize our add-on
  • unloadFromWindow() to clean up any changes we've made
          var menuId;
          function loadIntoWindow(window) {
            menuId = window.NativeWindow.menu.add(
              "View Source", null, function() { viewSource(window); });
          }
          function unloadFromWindow(window) {
            window.NativeWindow.menu.remove(menuId);
          }

Implementing Behavior

  • Now we need to implement the viewSource() function
          function viewSource(window) {
            let url = window.content.location.href;
            window.console.log("displaying source for " + url);
            window.BrowserApp.addTab("view-source:" + url);
          }

Testing the Add-on

  • Packaging
    • Zip up install.rdf and bootstrap.js into a .xpi file
  • Installing
    • Put your add-on on your device using adb push
    • Open the .xpi file using Firefox
  • If you are using the add-on skeleton, you can run ./build.sh to do this all for you!
    • Edit config_build.sh to name your .xpi file
    • Make sure adb is in your root path

Using Remote Developer Tools

  • Remote debugger
  • Remote inspector (new in Firefox 26!)
  • Documentation about using these tools is available on MDN

Demo time!

More Resources