Chapter 4: Dynamic Development

Firefox’s support for dynamic extension development is the single most useful feature for developers. This capability allows you to work on your extension and see the results in real time! You no longer have to repackage your extension every time you want to test changes to either your XUL overlays or JavaScript code. Not only does this reduce your development time, but it makes debugging even easier than before.

How does this feature work? Well, we can thank the chrome manifest that we created in chapter 2 for this capability. You see, up until now, I haven’t told you everything there is to know about the chrome manifest. The version we created back at the beginning of this tutorial was created specifically for dynamic development. In other words, we won’t be packaging our extension with that version of the chrome manifest (there are some changes we need to make to it before we can package things up). There are a few steps we have to take to "enable" dynamic development for our extension, but first I’d like to present you with some sound advice.

A Word of Warning

Extension development can be a somewhat dangerous thing, especially when working with XUL overlay files. I highly recommend that you avoid developing your extensions in the same profile that you normally use for web surfing. In other words, you should create a brand new profile in which you do all of your development and testing. This will prevent you from losing key browser data: stored passwords, cookies, bookmarks, and any other stuff you would hate to lose.

To learn more about how profiles work in Firefox, consult either the tutorial I offer on the subject, or the official profile documentation. Creating and using a new profile is an easy task, and it will save you a great deal of headache down the road.

How to Develop Dynamically

The majority of our work has already been completed in the chrome manifest (even though you may not have realized what we were doing at the time). Now all that we need is a file to point Firefox to our extension’s location on our hard drive. We will do so through the use of a "pointer" file.

First, create a text file anywhere on your computer and give it the same name as the GUID we used in the install manifest. For this tutorial, the value we chose was tuttoolbar@borngeek.com; so our text file should use that exact same name. Unfortunately for Windows users, the ".com" file extension usually indicates an executable. In our case, it will just be a simple text file. If you would like to keep the ".com" portion out of the filename for now you may do so; just remember to update the GUID value in the install manifest to match your altered name (and remember to change it back when you package your extension).

Inside of this file we will place exactly one line of text: the absolute path to the folder where your extension is stored (that is, the folder that contains your install.rdf and chrome.manifest files). In my case, this tutorial extension is stored in the following location on my computer:

C:\Born Geek\TutToolbar

You should clearly use the path to the extension on your computer, unless the path happens to exactly match the one above (and I doubt that it does). After typing the absolute path to your extension, save the file.

We now must move this file to our development profile’s folder. The profile documentation I mentioned earlier discusses exactly how to locate your profile folder. Once you find where the profile is located, place the pointer file we just created in the extensions folder within the profile folder. Here is how my sample profile file structure looks (trimmed down for brevity’s sake):

+- tl5wlpz3.Nightly/
   +- bookmarkbackups/
   +- chrome/
   +- extensions/
      +- tuttoolbar@borngeek.com
      +- (... other files and folders ...)

As you can see from the name of my profile’s top folder, I use a "Nightly" profile to try out nightly Firefox builds as well as to do my extension development. Once the pointer file you have created has been placed in the proper location, start Firefox, making sure that you use your development profile (again the profile documentation mentioned earlier will show you how to do this). If you have done everything right up until this point, you should see your toolbar, in all of its un-skinned glory!

The Development Cycle

So now that we have enabled dynamic extension development, how do we use it? The process is actually very simple:

  1. Edit your extension files.
  2. Reopen the window(s) that the modified files apply to, or use the Reload Chrome feature of the Extension Developer’s Extension.

There are two special cases you should be aware of:

As you can already see, this will be an incredibly handy tool as we develop and debug our extension. Now let’s make this ugly toolbar we’ve created look a little better!

| Table of Contents |