Assignment #6
In this assignment, you will create your own Firefox extension. This extension will let users open groups of tabs at once.
Contact Assignment
Your contact for this assignment is Anna Loparev. Please direct questions about this assignment to Anna (see the Contact Page) because she will best know what's going on. You can also always contact Jeff, who may end up forwarding your question to Anna.
Still Confused?
Here are some helpful tutorials for making basic Firefox extensions:
Video Tutorial that teaches you how to make a simple Hello World extension. (NOTE: Do not use the instructions from here for packaging your extension.)
Official Mozilla Tutorial that starts with a really simple extension and builds upon it to emphasize different topics.
Setting Up Firefox
Profile
First, download the newest version of Firefox (3.6.15). This is the version that your code will be tested on.
Next, create a new Firefox profile for development. You can do this with the following command:
- Ubuntu:
/usr/bin/firefox -no-remote -P dev
- Other Linux/Unix distributions:
/usr/local/bin/firefox -no-remote -P dev
- Mac OS Snow Leopard (10.6) and newer:
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
- Older Mac:
arch -arch i386 /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
- Windows:
Start -> Run "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
- Windows 64 bit:
Start -> Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev
-no-remote tells Firefox that you want to have the ability to run multiple profiles at once. -P profileName tells Firefox that you want to open it under this profile You can add -console to open a console along with Firefox. This is useful in Windows, where you're not working in a terminal.
Now click Create Profile and go through the steps to create a new profile. It's important to create this new profile so that if your extension crashes, it doesn't affect all of the tabs where you are keeping your documentation.
Whenever you want to run Firefox with a particular profile, just use the same command, but replace dev with "profileName" (including quotes). From now on, we will call this profile the development profile.
Settings
Now we will set some variables. Type about:config into the URL. Set javascript.options.showInConsole and browser.dom.window.dump.enabled to true. Create a new boolean setting extensions.logging.enabled and set it to true. If you are using Firefox 4, set devtools.errorconsole.enabled to true.
Add-ons/Programs
Install DOM Inspector and Console Squared (in your development profile).
Optional: Download Komodo Edit. This editor works well with XUL, but you can use any text editor.
Make a Basic Working Extension
Use Add-on Builder to make a basic extension. Make sure that you follow the naming convention projName@firstname.lastname for the ID.
Type about:support in the URL using your development profile. Click on "Open Containing Folder". This will take you the profile folder. Go to the extensions subfolder. Create a new file whose filename is your extension's ID and whose only content is one line that contains the path to your extension project folder.
Now restart Firefox using your development profile.
Functionality
Your extensions should have the following basic functionality:
There should be a set of buttons in Firefox. When a user clicks on a button, a set of tabs associated with the button open in the browser.
For example, when a user starts Firefox, they should see something like this:

Implementation Details
You should use a CSS file outside of your XUL file and have the CSS file actually do something. It should be located in your skin folder.
There should be at least three buttons for tab groups. These buttons should be in a toolbar like in the picture above. You can pick how you want to style them.
Each tab group should have at least three URLs.
Do NOT use window.open() to open new tabs. Depending on Firefox preferences, your extension may end up opening a new window for every tab in a group.
If someone tries to click a button while at least one tab from the associated group is still open, then no new tabs are opened. For example, if someone clicked on the 'Blogs' button to open some blog websites...
...and then they closed one...
...then if they clicked the 'Blogs' button again, nothing would happen. However, clicking a different button, such as CSC210, would still open the appropriate tabs.
All URLs for tabs should be stored as preferences in your extension's defaults/preferences/prefs.js file. You will not get points for hardcoding them into your main javascript file.
Packaging it up
Zip the content, local, and skin directories into a single jar file called projectName.jar. Now, change chrome.manifest so that instead of 'chrome/someFolder', you have 'jar:chrome/projectName.jar!/someFolder'. NOTE: If you are using Linux, don't forget to use -r when you zip your files.
Finally, zip install.rdf, chrome.manifest, the chrome folder, and the defaults folder into a single xpi file called projectName.xpi. NOTE: If you are using Linux, don't forget to use -r when you zip your files.
Now, in yet another profile, drag your .xpi file anywhere onto the Firefox browser. Firefox should present a popup asking if you want to install your extension.
NOTE: As usual, you will be required to turn in a README.
Extra Credit
As usual, there are tons of fun and magical extra credit options to choose from for this assignment.
- Localization: Add at least one thing to the DTD file and at least one thing to the properties file (and actually use them).
- Advanced Feature Currently, if at least one tab from a group is open, then the corresponding button does nothing. This is rather boring, and its lack of feedback is not particularly user-friendly. To fix this, modify your code so that clicking on the button again opens all of the websites in the group that were closed or navigated away from.
- Workers: Use workers in your extension.
- XPCOM: Create and use an XPCOM component.
Props
This document was written by Anna Loparev. Some of the details were obtained from https://developer.mozilla.org/En/Firefox_addons_developer_guide and https://developer.mozilla.org/en/Setting_up_extension_development_environment.