The number people using Firefox for Android is increasing, and so is traffic to addons.mozilla.org. This makes mobile Firefox add-on development more relevant than ever. Don’t miss this opportunity to reach an audience of 10 million and counting! Are you ready to take on the challenge? Get the details »

The trouble is, we don’t have that many add-ons, in fact as of this writing there are only currently 122 extensions that are compatible with Firefox for Android. I suspect part of the problem is that Firefox on Android is different:

• There is no XUL on Android.
• All addons on Android need to be ‘restartless’.

Needless to say, Mobile Firefox extensions are different, and so some developers may be a bit wary of jumping in with both feet. This post is a guide to show you some of the main capabilities available to you on Android in particular around UI integration and tooling.

Prerequisites

If you want to do Android-oriented development you’re going to need to install the Android SDK in order to get the Android Debug Bridge ( aka ‘adb’ ). Head on over to the Android developer portal and follow their install instructions, and be warned it is a hefty download.

If you don’t have an android device handy, it should be possible to run the Android emulator and install Fennec into it. In practice we’ve found this to be quite slow, using the arm emulator – one workaround might be to use the x86 emulator and x86 builds of Fennec, which are now available.

In both cases, you will need to enable ‘USB Debugging’ in the developer options – if you are running Jelly Bean ( 4.2 ) you will need to first read about the trick to get the developer options to show up in settings.

UI Integration

Integrating with the Firefox for Android ( Fennec ) UI is fundamentally different than with traditional XUL add-ons due to the use of Android’s native UI. To help with this, the Fennec team has provided extension developers with two global objects they can use to do common tasks: BrowserApp and NativeWindow.

BrowserApp is a utility object that allows you to enumerate, fetch, open and close tabs, interact with user preferences and even quit the browser! While there is no exciting UI or system integration here, BrowserApp provides key functionality in a simple and usable way. Some annotated code samples:

// Add a tab
let tab = BrowserApp.addTab();
 
// Log the titles of all open tabs
function logTabTitles(window) {
  var tabs = window.BrowserApp.tabs;
  tabs.forEach(function(tab) {
    window.console.log(tab.window.document.title);
  });
}
 
// Listening for tab events
function watchTab(aEvent) {
  // the target is a XUL browser element
  let browser = aEvent.target;
}
 
BrowserApp.deck.addEventListener("TabOpen", watchTab, false);
BrowserApp.deck.addEventListener("TabClose", watchTab, false);
BrowserApp.deck.addEventListener("TabSelect", watchTab, false);

More examples and documentation can be found on MDN.

NativeWindow is where all the cool kids hang out.

NativeWindow’s primary purpose is to allow developers to easily extend Fennec’s UI, via four key utilities:

• menu: add items to Fennec’s main menu
• doorhanger: user interactions via native doorhanger UI
• contextmenus: exactly what you think it is
• toast: not bread-related, but instead a light-weight way of doing native in-app notifications.

// Add a menu item
menuID = NativeWindow.menu.add(label, icon, callback);
 
// Show a doorhanger
NativeWindow.doorhanger.show(message, value, buttons, tabID, options);
 
// add a context menu item
menuID = NativeWindow.contextmenu.add(label, selector, callback);
 
// show a 'toast' notification 
NativeWindow.toast.show(message, duration);

Using the Add-on SDK

The Add-on SDK, which has built-in support for running and testing extensions with a device, as well as Fennec support for most relevant SDK modules. The great thing about this that if you are used to using the SDK, most modules will work as expected. For a complete of what is and isn’t supported, please see the documentation.

Deployment: just use cfx! You will need to add some mobile specific arguments to your cfx command-line though. To help with this, I’ve written a quick UNIX shell script that should help:

#!/bin/bash
 
cfx -b /usr/local/bin/adb --mobile-app=fennec --app=fennec-on-device --force-mobile -v -o $1

The above command-line assumes you are using a Firefox nightly build on your android device, other options include firefox, firefox_beta and fennec_aurora.

While there is no built-in support for NativeWindow in the SDK, it is pretty simple to get access to it and mix and match NativeWindow’s capabilities with those included already in the SDK:

// get a global window reference
const utils = require('api-utils/window/utils');
const recent = utils.getMostRecentBrowserWindow();
 
// show a Toast notification
recent.NativeWindow.toast.show("Hello world!", "short");

For more extensive examples of mixing the SDK with NativeWindow calls, check out my ‘Fennec+’ example extension on Github.

Click on the thumbnail to open a gallery in a new tab.

The Bare-bones Approach

If you’re more comfortable developing a restartless add-on Mark Finkle from the Firefox for Android team has created a great template as a Github repo to get you started. The template includes a full bootstrap.js implementation and examples of how to use NativeWindow and BrowserApp as well some simple scripts for building your extension and pushing it to a device or emulator via adb.

Pretty Pictures

To give you an idea what UI integration looks like on Android, I’ve added some screenshots to show off the various types of things:

Additional Resource

• Add-on SDK mobile development docs
• MDN Mobile Add-on docs
• Android SDK site

nsIFilePicker crash if overriding component has not implemented a domfiles getter. This crash bug was recently filed, caused by an add-on that overrides the nsIFilePicker component. The crash appeared in Firefox 22, due to bug 832923, which changed the nsIFilePicker interface. So, if your add-on does that, you should update its implementation to make sure it includes the domfile and domfiles getters.

The crash bug will be fixed so that Firefox doesn’t crash even when faced with the interface mismatch. However, affected add-ons still won’t work correctly unless updated.

Feedly

A productive way to organize, read and share the content of your favorite feeds, blogs and news sites. Feedly offers a seamless transition from Google Reader.

Newssitter

An easy-to-use feed reader for the sidebar with a news ticker and news recommendations. Offers support for premium news providers and social media news providers like Facebook.

Bamboo Feed Reader

A feed reader and more – read articles in RSS, Atom, and OPML. You can also import and export in OPML format, search your feeds, and block HTML ads.

NewsFox

NewsFox is an efficient three-pane, email-style Atom/RSS feed reader.

Brief

Brief makes reading RSS feeds as easy and intuitive as it gets. Designed to have exactly the right set of features, it is powerful and simple at the same time. Feeds are presented on a seamless, interactive page which lets you bookmark and tag items with a single click.

Sage

A lightweight RSS and Atom feed aggregator extension that has a lot of what you need and not much of what you don’t.

The Review Queues

• Most nominations for full review are taking less than 4 weeks to review.
• Most updates are being reviewed within 10 days.
• Most preliminary reviews are being reviewed within 10 days.

These stats are taken from the last queue report:

• 119 nominations in the queue awaiting review.
• 106 updates in the queue awaiting review.
• 101 preliminary review submissions in the queue awaiting review.

If you’re an add-on developer and would like to see add-ons reviewed faster, please consider joining us. Add-on reviewers get invited to Mozilla events and earn cool gear with their work. Visit our wiki page for more information.

Firefox 22 Compatibility

The compatibility blog post for Firefox 22 is up, and the compatibility bump for AMO add-ons will be run probably next week. Firefox 22 is scheduled to be released on June 25th.

As usual we recommend using the Aurora and Beta branches to test your add-ons ahead of time.

Firefox 25 Compatibility

There are some pretty big changes coming up in Firefox 25, so I did an early post on it. Please give it a look.

Update: please read this update for one more compatibility issue that was just discovered.

General

• Add-ons that set default zoom level will give unexpected results when Firefox becomes hidpi-aware on Windows. Add-ons that use nsIMarkupDocumentViewer.fullZoom will most likely see unexpected results under certain circumstances.
• Make getUserData and setUserData ChromeOnly. Those functions will no longer be available for content, only from privileged code.
• FillInHTMLTooltip should move into XBL binding. This is no longer a global function in browser.js.

Places

There is much more Places code cleanup happening in 22, so that file system access happens asynchronously. Read the documentation of Places utilities for alternatives of these functions and objects.

• Remove deprecated synchronous favicons APIs. From nsIFaviconService, the following methods were removed: setFaviconUrlForPage, setAndLoadFaviconForPage, setFaviconData, setFaviconDataFromDataURL, getFaviconData, getFaviconDataAsDataURL, getFaviconForPage, and getFaviconImageForPage.
• Stop implementing nsIGlobalHistory2. nsIBrowserHistory no longer extends nsIGlobalHistory2, so it doesn’t implement addURI, isVisited or setPageTitle anymore.
• Move markPageAsXXX methods to nsINavHistoryService. They were moved from nsIBrowserHistory to nsINavHistoryService.
• Remove nsINavHistoryService::AddVisit.
• Remove deprecated nsILivemarkService interface.

XPCOM

• Stop defining |Components| object in content scopes. The Components object will no longer be available from content, with a few exceptions (DOM interface constants), which are mentioned in bug 429070.
• Remove nsISupportsArray usage from nsITreeView. This changes the signatures and return types for the following functions: getRowProperties, getCellProperties, getColumnProperties. These functions now return a whitespace delimited list.
• Remove the dummy PrivateBrowsing service. Removes nsIPrivateBrowsingService entirely, which was just left as a temporary compatibility shim.
• attributes should be defined on Element and not Node. attributes and hasAttributes (see comments below) are now members of Element, instead of Node.
• Fold NSPR and NSS into mozjs (for Windows) or libxul (for other platforms). If your add-on has binary components or you build against Mozilla code for other reasons, this is possibly important. I’ve already been contacted a couple of times about failed builds because of this.

New!

• Give both version numbers to bootstrap methods when an addon is down/upgraded. If your add-ons is bootstrapped, this gives you better information when performing an add-on upgrade.

Please let me know in the comments if there’s anything missing or incorrect on these lists. If your add-on breaks on Firefox 22, I’d like to know.

The automatic compatibility validation and upgrade for add-ons on AMO will happen soon, so check your email if you have an add-on listed on our site.

Anyone can nominate add-ons for the board’s consideration, so don’t be shy. Simply email amo-featured@mozilla.org with your suggestion (you’re welcome to submit your own for consideration). In fact, three of the four add-ons featured this month are community nominations!

Pick of the Month: Video Resumer

Video Resumer automatically resumes YouTube videos from where you played them last. Without this extension, for example, when you click through YouTube videos, back and forth, they always start from the beginning.

Great add-on for viewing long videos. Really liked it, thanks!”

Get Video Resumer »

Also Featured:

Clean Links
Converts obfuscated/nested links to genuine clean links. Get it now »

Prevent Tab Overflow
Make sure your tabs stay visible all the time. Get it now »

YouTube Video and Audio Downloader
An extension to download YouTube videos in various formats and extract the audio file. Get it now »

There are two major add-on compatibility changes to look forward to, and I’m giving you this heads up just so that you’re aware and plan ahead. Things might change as we move forward, and I’ll keep you posted about it, but you should definitely check out the Nightly builds in July, or the Aurora builds during the month of August. It’s likely that your add-on will be affected by these or other changes.

Australis

This is a major theme revamp in Firefox that has been worked on for quite a while. One of its objectives is to simplify the UI, taking add-ons into account.

There are major changes coming to how toolbars work. There is some back and forth going on over the topic of removing the Add-on Bar completely. It doesn’t look like a final decision has been made, but in the best case it will be a harder to find customization target, and it the worst case it will be gone entirely.

The main toolbar will also have a dedicated area for add-on buttons and widgets, and it looks like user-created custom toolbars will also be gone. Overall, you should plan for a minimalistic toolbar UI. While most add-ons do this already, it’s possible that the API to add toolbar buttons will be very different, and there will be changes to be made for all of them.

You can do early testing of the Australis changes by installing the UX Nightly Branch. If you have any feedback from these tests, please share it in the comments below.

Session Restore

Like many other areas of Firefox code, Session Restore is getting the asynchronous treatment to improve its performance. If you look at bug 874381 and its dependencies, there are several changes to this module that will affect add-ons. Particularly, there are many add-ons that rely on private variables (starting with __SS) that will no longer exist.

There’s a list of affected add-ons in this blog post, and some of the developers have already been notified. However, you should check yourself if your add-on relies on any of these private variables and start migrating away from them, since they will be gone in 25.

Once we’re closer to the Firefox 25 release, we will have more information and hopefully better documentation to point you to. For now, I hope this heads up will be useful and you start looking into these big changes that are coming up.

We recently heard some great news from our support team that we want to share with you. Thanks to the last update in the Babylon translation software installer, support requests related to the way it customizes Firefox have dropped sharply, as much as 60% in some areas.

Like with many other software packages, Babylon’s installer includes an add-on that customizes Firefox, adding a toolbar and changing some settings like the home page. Until recently there wasn’t a Right Way of doing this, so every software vendor did it their own way. This has lead to an inconsistent and unsatisfying user experience, which has brought a great deal of work to our support staff.

To deal with add-on user experience problems, we started Project Squeaky last year. One of our first accomplishments was to establish the Add-on Guidelines, a short checklist that all add-on developers should follow. If you read the guidelines, you’ll notice that install experience and settings changes are specified to greater detail than the others, given that they are the ones we’ve identified as the most common problems users encounter.

We have been in contact with software vendors like Babylon for quite a while now, and these discussions have yielded positive results. We’re especially happy about the progress we’ve made with Babylon because their install base is particularly large, causing the support team to immediately notice the change in user sentiment after their install experience was improved.

This one positive outcome is very exciting for us, and we hope to continue moving forward in this area. There’s much planned  for the rest of the year, and we hope users will greatly benefit from  all that is coming.

This post originally appeared on the Apps blog, and we’re re-posting it for the AMO community in case anyone here is interested!

***

A majority of add-ons on AMO are reviewed by volunteer contributors, and they are a big reason why addons.mozilla.org is a safe, thriving place for submitting and downloading add-ons. With the launch of Firefox Marketplace, contributors will again play an important role in helping to shape and nurture a new community.

App reviewers ensure apps submitted to the Firefox Marketplace adhere to security and privacy policies, and meet quality and user experience standards. In return, reviewers enjoy perks such as invitations to special Mozilla events around the world, fast-tracked reviews of their own apps, and cool gear from the incentives program.

You’ll have front-row seats to the apps arriving in the Marketplace, and as one of the first reviewers, you’ll have an opportunity to mentor new reviewers, and have a voice in how the community evolves.

Did we pique your interest? Learn more about the program here, or apply today!