Mozilla Add-ons Blog

We recently received some great news from Jay Meattle of Shareaholic and wanted to share it with the community:

“This week we closed an angel round of funding for Shareaholic to support and accelerate ongoing development from prominent east coast angels. We may also be a part of a NY Times story this Sunday!

Other add-on authors should use Extend Firefox as a launching platform — as you never know – their add-on may just end up becoming a lot bigger than themselves and change their lives. Extend Firefox is a lot bigger than the great prizes on offer. Extend Firefox kickstarted my awesome Shareaholic journey. I adore our users and the resulting community that has formed around Shareaholic, it has been really fulfilling, and there isn’t a day that we wouldn’t go way above and beyond for our users.”

A couple of things to take away from this are that the Mozilla platform offers developers the tools to build successful web ventures as well as the support and distribution channels to get your product out to a large, focused audience. In addition, the Extend Firefox contest is an excellent way to get introduced into add-on development and also make your mark in the browser application world.

Jay, Mozilla congratulates you on your success and we hope to continue to provide the best platform, tools & support for developers to build world-class applications such as Shareaholic.

This was originally posted on Mark Finkle’s blog. Mark is a member of the Fennec mobile team.

The add-on (extension) mechanism built into the Mozilla platform is very powerful. One of the optional features is support for options (preferences) dialogs. As discussed in my last post, Fennec doesn’t like dialogs. In addition, Fennec has a simple, clean preference system. While designing the Fennec Add-ons Manager, we discussed how we would support add-on options. We didn’t want popup dialogs of random and complicated XUL.

After brainstorming a few ideas, we settled on a simple idea. Fennec uses special <setting> XUL tags to create it’s list of preferences. Add-ons would be forced to use the same tags. The options would be merged into the Fennec Add-on Manager, not displayed as a popup dialog. Of course, add-ons can support more than one application, so we needed to make sure that the options XUL for Fennec could coexist with the options XUL for other applications. Let’s take a look at how this all works:

Install Manifest

Add-ons use install.rdf to identify the XUL used for displaying the preferences. This is optional.

<em:optionsURL>chrome://myaddon/content/options.xul</em:optionsURL>


This is needed for any add-on that wants to use an options dialog.

Chrome Manifest

Add-ons use the chrome manifest to selectively override XUL, and other resources, between different applications using the application flags

override chrome://myaddon/content/options.xul chrome://myaddon/content/fennec-options.xul application={a23983c0-fd0e-11dc-95ff-0800200c9a66}

This will tell Mozilla to use fennec-options.xul anytime the options.xul resource is requested.

Options XUL

As I said, the XUL allowed for the Fennec options system is limited to a few new tags. Here is an example of a Fennec options dialog:

<?xml version="1.0"?>

<!DOCTYPE mydialog SYSTEM "chrome://myextension/locale/mydialog.dtd">

<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <setting pref="extensions.myaddon.debugging" type="boolint" on="1" off="2"
title="Enable debugging"/>
  <setting pref="extensions.myaddon.profiling" type="bool" title="Enable profiling">
    Profiling can affect the performance of the application
  </setting>

  <setting pref="extensions.myaddon.logging" type="bool" title="Save logs"/>
  <setting pref="extensions.myaddon.logging.path" type="string" title="Log folder"/>
  <setting type="button" title="Clear logs">
    <button label="Clear" oncommand="MyAddon.clearLogs();"/>
  </setting>
</vbox>

Note that we don’t have any <script> support and we are limited to <setting> tags. The root <vbox> just acts as a container, it isn’t merged into the main window. Here is how the options look in Fennec:

As always, we appreciate your feedback. I’m in the process of updating the Fennec Best Practices documents with this information.

A big thank you goes out to Vivien Nicolas, a Mozilla intern in the Paris office, for turning my super-great design into a reality. Shaver told me there’d be days like this!

The October 2nd deadline is fast approaching and with only 29 days left to build the next great web experience, we wanted to remind you of the resources available to help you during the contest period:

Mozilla Developer Center

Your best source of information and starting point for Mozilla technical question should be the Mozilla Developer Center. With the breadth of information provided there, it’s an invaluable information resource for pushing your add-on to the next level.

Firefox 3.5 Add-on Development

The following docs are specific to add-on development for Firefox and a great resource for understanding how to take advantage of Firefox 3.5’s features.

Firefox Add-on Documentation
Firefox 3.5 for Developers
Firefox Add-ons Developer Guide

Add-on Tutorials

These tutorials will give you the jumpstart you need to get cranking with your development.

How to develop a Firefox extension by Robert Nyman
Video Tutorial – Extensions Bootcamp: Zero to “Hello World” in 45 Minutes
Extension Development 101

Style Guides

Making sure your code is well-formed will help to make your add-ons more maintainable and easier to review by the judges and editors.

JavaScript Style Guide
XUL Style Guide

Community

Mozilla was built on community support so you’ll be able to find plenty of help in the Extend Firefox Discussion Forum.