Web Programming

CSC 210, Spring 2011

(Monday and Wednesdays, 2:00-3:15pm in CSB 209)



Submit At my.rochester.edu

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: Mockup One If the user clicks on the toolbarbutton labeled 'Blogs', then several related tabs open: Mockup Two

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... Mockup Two ...and then they closed one... Mockup Three ...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.

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.

Please email Jeffrey P. Bigham at jbigham@cs.rochester.edu with questions.

Valid XHTML 1.0 Transitional Valid CSS!