There were a lot of new things we had to learn, and after many hours of production we realized we had a lot of tricks that extension developers might not be aware of. We make sure the functionality is perfect, but always focus a lot of time on UI design.
I’ve come up with a list of a few UI things we discovered with firefox that really give a lot of control to the designer, so the plugin doesn’t have to look stale and generic.
Better looking preferences, using a list instead of tabs to navigate.
Initially we build our preferences using the tabbox. This worked, but seemed cumbersome for the user. Then we looked at some of our favorite plugins — we found that the web developer toolbar does a great job with their preferences.
Styling the selected listitem background color
After we created our list, we needed to make it look better. We had no use for the default blue. There’s a simple css trick to adjust this: see gist below.
This makes the selected and the current states have a blue background. You can add other properties, such as color and what not, but the [selected=”true”][current=”true”] is what’s important.
Communication between windows
We created a simple Enable/Disable button to allow the user to start and stop the plugin. This would turn a preference to either true/false. The problem was that if there was another Firefox window running, it wouldn’t be smart enough to know if the plugin changed. A simple fix was to make a timer check to see if the preference has changed. See the gist below.
Detect tab change
There’s a quick and easy way to check to see which tab your window is on. All you need to do is a listener on the gBrowser in your js. See the gist below.
Anything can be styled
Firefox gives you 100% control to customize how all of the XUL items look, therefore there aren’t any excuses why your extensions don’t have to look dull!
For further reference, here are bookmarks of Firefox links:
XUL Reference – this will be your best friend.
How to build a Firefox extension
Getting started with extension development
Firefox/Thunderbird Extension Wizard – this will generate a base template to work off of, as well as a unix file to compile it. It’s pretty awesome.
Let’s build an extension — Mozilla’s guide to building firefox extensions.
Dialogs and Prompts – excellent overview on how dialogs and prompts work. Most plugins consist of dialogs, so it’s essential to read over this.
Here’s all the code mentioned above: