Mobile/Fennec/Extensions

Fennec has support for extensions. Extensions are built using the same methods as any Mozilla-based extension. Since Fennec is a totally separate host application, there are some Fennec-specific issues that you need to handle when creating your extension. Most notably, the Fennec application ID and the differences in the user interface (UI) structure - the XUL used to build the UI. Extensions typically overlay the host application's UI to add toolbar buttons, menus and other features. Fennec is designed to work on devices with smaller screens and different usage models. For the most part, trying to use the same overlays in Firefox and Fennec is really not possible.

The Basics

In order to install an extension in Fennec, you need to follow the guidelines for building a Mozilla-based extension. To support Fennec specifically, you'll need to add Fennec to the list of target applications in the extension's install.rdf file. The code snippet will look something like this:

<em:targetApplication>
  <!–- Fennec -–>
  <Description>
    <em:id>{a23983c0-fd0e-11dc-95ff-0800200c9a66}</em:id>
    <em:minVersion>0.8</em:minVersion>
    <em:maxVersion>1.0.*</em:maxVersion>
  </Description>
</em:targetApplication>

In addition to the install manifest changes, you may want to expose your extension into the Fennec UI. Fennec does have a few familiar UI elements, such as a URL toolbar, a side toolbar with navigation controls and a browser content area. But Fennec doesn't have a main menu, statusbar, or even popup menus (yet). There are some new UI areas too: side toolbar holding the open tab thumbnails and a large offscreen panel for more complex UI features.

See the Fennec main window XUL file for the actual structure: browser.xul

There is a handy best practices document with lot's of valuable tips and tricks too.

Fitting into Fennec (User Interface Guide)

The Fennec user interface is much different than Firefox. For thing, there is much less user interface! With small screens and a focus on maximizing space for content, add-ons need to put a lot of thought into how to extend the Fennec UI. Check out the user interface guide for background and guidelines on building your add-on into Fennec's UI.

Supporting Add-on Options

Fennec uses a simplified options UI. The UI is created using specialized XUL tags, implemented in XBL. Add-ons must also use the same XUL tags when creating options. It's easy to support Firefox and Fennec style options in the same add-on.

There is information on setting up and using options in a Fennec add-on.

Porting an Existing Extension

Since there aren't many extensions designed explicitly for Fennec, you may need to port your favorite extensions. This usually means extracting and editing the install.rdf file to add Fennec as a target application. You may also need to modify the extension's overlay to be able to work with the Fennec UI. Many archive tools, like 7zip, can edit and update a file in the archive without needing to manually extract it and add it back into the XPI.

There is also a collection of Fennec-specific code snippets that might be helpful.

Debug Tools

There are not yet the same amount of tools available for developers as there are for desktop Firefox, but some efforts are underway. If running a desktop version of Fennec, you can install DOM Inspector. You can also launch Fennec using the -jsconsole flag to display an Error Console window.

The Error Console window is also integrated into Fennec itself. It’s hidden by default – you need to use about:config to display it.

• Navigate to “about:config”
• Set “browser.console.showInPanel” to “true”
• Restart Fennec
• Go to the Browser Panels to display the Error Console

Installing

Extensions can be hosted on websites and installed by clicking on the extension link in Fennec. Make sure the webserver is serving the extension XPI with the right MIME type (application/x-xpinstall). The add-on installation UI should appear after clicking the link. Fennec supports a basic Add-on Manager user interface, which allows a user to manage extensions. Using this interface, a user can also install extensions from AMO (addons.mozila.org). Extensions can be removed using the same dialog.