Writing Browser Extensions

Today at the She’s Geeky unConference in San Francisco, I gave a presentation on Writing Browser Extensions. It’s something I’ve been immersed in for the last several months. I started out knowing nothing about them, and after getting up to speed and producing a browser extension with versions for Firefox, Chrome, Safari and Internet Explorer, I thought it would be fun to share what I’ve learned. We had a small group of very interested participants, and I showed them the very basics of what the simplest extension code looks like. Mostly it was more an overview of what extensions do and how they work. The more difficult browsers (IE and Firefox) have way too much detail to do justice in an hour, and as I told them, the easier ones (Chrome and Safari, and probably Opera although I haven’t taken a look at that one) are so straightforward and have such good documentation that nobody really needs me to explain coding details, you can just go read the docs and be on your way in no time. I promised to post a list of useful links, and here they are.

Example code:

Here is some example code I showed the participants. It’s rather trivial, just a demo of the most minimal Google Chrome extension. It’s only four lines of JavaScript and simply inserts an image at the top of any page you navigate to.

Developer resources:

Chrome and Safari
These two are just joyfully easy.

Firefox
Mozilla’s API offers vastly more power and freedom, at the cost of greater complexity. You control the browser chrome in an XML-based language called XUL, the Javascript is a bit trickier to program, and the documentation isn’t nearly as well organized. You have to really hunt for what you need. Below are a few good starting points. One thing I forgot to mention during my presentation is that Mozilla is working on a special SDK called Jetpack, currently in beta, that presents a simpler, more manageable API but with more limited power (no XUL, for one thing). Much of the time you can do without the most advanced features, so this should suit many projects well and present a much gentler learning curve. I haven’t investigated deeply yet, but I imagine it might make Firefox a comparable developer experience to Chrome and Safari. (One can hope. :-) ) Read about it at the links below.

Internet Explorer (MSDN)
Now this is a whole different kettle of fish, of course. The parts list is a lot bigger; I only became familiar with “browser helper objects” (BHOs), which was the part I needed. BHOs are written normally in C++, and particularly if you’re not used to Windows development, it can be slow going. The documentation is extensive, fragmented, and not at all self-contained; it bleeds into the rest of Windows development so there’s no real boundary around what you might have to know. And to deploy your app to the world, you need to create a separate installer, an adventure in itself. The links below are just a starting point. You’re gonna have to want this one bad! But it is definitely possible to get somewhere with this. The tutorial described below as “key” was extremely important for me. There was lots left to figure out after that, but I never would have gotten anywhere without that one.

Awesome annual conference, December in Silicon Valley:

I really enjoyed discovering this and attending in 2010. I was disappointed that Apple and Microsoft didn’t participate, though. MS had participated in previous years. Safari didn’t yet support extensions in 2009, so 2010 would have been Apple’s chance to make a big deal about it. Google, Mozilla, and Opera (all the way from Norway) were all there, which was great.

Extension repositories/galleries/web-stores:

This entry was posted in Web development and tagged , , , , , , . Bookmark the permalink.

Comments are closed.