The discoveries I have made that lead to this:

• MSIE doesn’t like trailing commas. e.g. this throws up an a JScript error in Internet Explorer.

  {
    foo: 1,
    bar: 2,
  }

• I’m still tracking this one down, but I started getting errors when I did Element.show('non-existent-id') in Internet Explorer, but not FireFox. Why doesn’t Firefox complain? I think it should do.
  • Oh all right, it does complain. I missed the warning.

Doubtless this is just the beginning of a list.

Of course, I managed to waste plenty of time arriving at these problems, because Internet Explorer has such incredibly lacklustre development tools. For example, to get any idea at all of where the error in your code is¹, you have to install the Microsoft Script Debugger. This is very primitive, but it will show you where the error actually occurred, and gives you a fighting chance of examining some variables in the locality².

In my case, the script debugger didn’t even work properly when first installed. After reading somewhere that Visual Studio surperceded the Script Debugger, I remembered an experiment I’d performed a while back. It turned out that something called MDM had gottened installed. Deleting it and all associated registry entries made the Script Debugger spring back into life. Finally!

Another hint worth noting about the Script Debugger: if you want it to run in a non-administrator account, you need to put yourself in the “Debugger Users” group.

¹ The error that pops up in Internet Explorer gives you a line number without a filename which is none too helpful.

² Hint: you have to use alert() to see any useful output in the command window, then flick back to the browser to see the popup.

1. Set up a separate development profile in firefox that you can play around with. The article Setting up extension development environment is a good source for this. I also found this in my ~/.zshrc useful:

   alias firefoxdev="MOZ_NO_REMOTE=1 firefox -p dev -console"

2. Download roachfiend’s helloworld extension. Extract it into a directory called helloworld.
3. Inside the helloworld directory, remove the install.js file. It’s only used by older mozilla’s and we don’t care about it.
4. Inside helloworld/chrome, create a new helloworld directory and extract the contents of helloworld.jar into it. Then remove helloworld.jar.
5. Edit the install.rdf so that urn:mozilla:extension:file:helloworld no longer has a ”.jar” on the end.
6. Now we’re ready to import this lot into subversion:

   % cd helloworld
   % svn import $SVNROOT/helloworld/trunk/src

7. The extension needs to be built and imported into firefox once.

   % zip -9r ../helloworld.xpi *

8. Start firefox (in your development profile), do File / Open / helloworld.xpi and install. Then quit firefox.
9. Change into the development profile directory (I chose ~/work/mozdev to make it easy to find. Then replace the installed extension with the one checked out of subversion.

   % cd ~/work/mozdev
   % cd extensions
   % uuid="{9AA46F4F-4DC7-4c06-97AF-5035170633FE}"
   % mv $uuid $uuid.old
   % svn co $SVNROOT/helloworld/trunk/src $uuid
   % mv $uuid.old/uninstall $uuid

   Of course, this will differ if you have a different UUID (in which case don’t forget to update install.rdf!).

10. You probably want to set a property to ignore that uninstall directory:

    % svn propset svn:ignore uninstall $uuid
    % svn commit -m 'Ignore uninstall.'

11. Start firefox and check that the extension still works.
12. You might want to create a symbolic link to get into the directory easily.

    % cd
    % ln -s ~/work/mozdev/extensions/$uuid helloworld

At this point, you have a version of firefox, with access to a full expanded extension, which you can start developing in. Also the extension is inside subversion, so you can keep track of things sensibly. You’ll note that I imported the extension into a directory called “src”—that’s so that I can put a build script and other stuff above it, in case I ever actually get as far as releasing something.

The steps for cvs instead of subversion should be pretty similiar.

Two very good sources of documentation are: mozillazine knowledgebase: Extension development and devmo: Extensions. It seems like they held all the pieces I needed to pull this together even though I wasn’t coherent enough to spot it.

Originally, you had to register the chrome by hand. This involved editing the file chrome/installed-chrome.txt in the mozilla application directory (source: Rapid Application Developmen with Mozilla). You also had to develop your application in the same place. This is probably ok if you’re on windows, but it utterly sucks if you’re in Unix as you don’t have permission to do any of this.

Later on, along came firefox with it’s extension manager. This let you easily install extensions into your profile instead of system wide—a blessing for us Unix users, and probably making life easier for windows users too.

Developing under this setup now used install.rdf and chrome.manifest files. I have no idea if you can develop using the “edit+reload” style with this version.

Now, for firefox 1.1, the extension manager has changed again. And it’s all different. Whilst I understand all the reasons for doing so, the lack of documentation about how all this fits together is very annoying for people trying to develop against a stable platform.

But, looking at the docs shows that extensions really should be easier to get going with this new method. I hope.

Of course, all my troubles are probably because I’m using Ubuntu’s version of firefox instead of one of the official builds…

This time, I was following Getting started with extension development, which looked like just the ticket for getting going. Everything laid out in nice, easy steps. Except that I can’t make it work. The extension manager plainly refuses to see the extension I have created. And I have no idea why, because there appears to be no logging at all.

I’ve actually purchased two books on mozilla development over the years, but whilst they have good coverage of the innards, they have less than stellar coverage of how to get there.

Whilst I like firefox greatly, I do wish that it was more like Emacs in how it exposes its development functionality. That’s a lot easier to get started with.

Update: Pilot error. I failed to notice the “requires firefox 1.1 or better” notices contained within…

• Tells you which items you haven’t read yet.
• Better feed autodiscovery.
• Proper OPML export.

If you’re using Live Bookmarks at all in firefox, it’s worth checking out.

• A firefox extension to summarize all live bookmarks by download time, so you can immediately see which ones have new items.
• A thunderbird extension to understand Mailing List headers, so you can have a Reply-To-List button.

I suppose I’d better start cracking on them…

• AdBlock. Lets you switch off the annoying flashing adverts.
• Web Developer. If you’re developing web sites, you need this to understand how your web pages really work.
• View Cookies. A simple but useful tool if you’re developing web sites.
• Live HTTP Headers. Shows you what really happened under the hood. Again, more useful for web site developers.
• GreaseMonkey. This should be installed by default. It lets you use JavaScript to alter any web page in any way. Very handy for fixing up those little “broken” things lying around the web.
• Show Anchors. Really handy for linking to some particular piece of a web page instead of the page as a whole.

The other extremely handy extension is the DOM Inspector, but that’s more of a builtin thing than an extension.