XUUUUL
If you've ever worked with XML, you're hired! I mean, sorry — if you've ever worked with XML, then XUL will look familiar. Every XUL script starts with a namespace declaration, and has its content inside tags like <tooltip> and <progressmeter>. Firefox's XUL parser sits right next to its parsers for things like HTML and JavaScript, and they work along similar lines. If you need to know about nuts and bolts, you can check out XULPlanet and its exhaustive minute-by-minute coverage. Mozilla.org has a lot of info too.
While you're doing that, the rest of us will plunge right in. An extension consists of a number of components, all keenly synchronized. Here's a summary of extension anatomy. If you unzip an XPI file, which is the format extensions come in, and which is really just a specialized ZIP archive, you'll see a few standard pieces. Some extensions are large and multifaceted, but they all contain a few key elements. Most crucially, there's a file called install.rdf and a directory called chrome, which contains a JAR file. There may also be optional directories of stuff like components, defaults, and plugins. As it happens, that JAR is also a ZIP file under another name (sorry if you know all this already), and when we peer inside it in turn, we find (possibly among other things) the XUL file that does all the work.
So, to make our extension, we need to create each one of those files. Before you groan, though, install this extension handily designed for the purpose. The extension requires Firefox or Mozilla to run — if you're trying to make a Firefox extension but all you have installed is IE, maybe you should just print out this article and go read it in the park.
Edit:
Who's Got the Button?
The Extension Developer's Extension includes a handful of tools to make our job easier, including an interactive XUL editor, a fantastic place to play around with XUL. Let's restart our browsers and fire that one up right now. You should find it in the Tools menu under Extension Developer. The XUL editor window comes in two panes: at the top is the place where you put your XUL code, and watch it render at the bottom. It starts out with the namespace declaration, and a label tag that says:
<label value="Put your XUL here!"/>
Unlike HTML, you can't just have text hanging out untagged in XUL. Delete that label tag and replace it with:
<button label="Cute as a button"/>
And then marvel at your accomplishments:
button
Look at that! You made a button!
What else can we do? We can put our button on a toolbar, so it's not just hanging there in space, by surrounding it with toolbar tags:
<toolbar> <button label="Cute as a button"/> </toolbar>
We can put in a menu, too, if you like menus:
<menubar>
<menu label="Menu">
<menupopup>
<menuitem label="Grilled Cheese"/>
<menuitem label="Chocolate Milk"/>
<menuitem label="Fried Pickles"/>
</menupopup>
</menu>
</menubar>
Edit:
Adding Value
Looks nice, eh? Too bad it doesn't do anything. Let's give our UI some functionality. We do that with event handlers and a bit of JavaScript. The most useful, because it's the most versatile, event handler is called "command". It's triggered when the user activates an element, say, by clicking a button, or choosing a menu item. So if we add an oncommand attribute to our button, we can execute a script when it gets clicked:
<button label="Cute as a button" oncommand="alert('Ooh, that tickles!');"/>
Nifty, yeah? The handler can call functions from an external JavaScript file too, which is more useful. Just include a pointer to it up top, after the window definition:
<script type="application/x-javascript" src="chrome://myextension/content/cutescript.js"/>
Edit:
Now Wrap It To Go
Probably, if you want your extension to bring you fame and popularity, it'll have to do something more exciting than pop up a cute message, but that's your business. I'm just here to walk you through the basics. That file, cutescript.js, we'll wrap up in our XPI when the time comes. Heck, let's start putting stuff in place now. Create a working directory, call it MyCuteExtension or something, and give it a subdirectory called chrome, and another subdirectory called content. Open your favorite text editor and create cutescript.js in the content directory — it should just look like this:
function tickle(){
alert("Ooh, that tickles!");
}
Next, in the same directory, create the XUL file, cutexul.xul, which is basically what we did above:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://myextension/content/cutescript.js" />
<button label="Cute as a button" oncommand="tickle();"/>
<menubar>
<menu label="Menu">
<menupopup>
<menuitem label="Grilled Cheese"/>
<menuitem label="Chocolate Milk"/>
<menuitem label="Fried Pickles"/>
</menupopup>
</menu>
</menubar>
</window>
Then zip up those two files, call the resulting archive cute.jar, and put it in chrome. Meanwhile, leave the original, unzipped files in content. That's the musculature of our beast. What else do we need? A little infrastructure. In the content directory, create a file called contents.rdf. The RDF will explain what's what in the extension. It should look like this:
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Seq about="urn:mozilla
ackage:root">
<RDF:li resource="urn:mozilla
ackage:mycuteextension"/>
</RDF:Seq>
<RDF
escription about="urn:mozilla
ackage:mycuteextension"
chrome:displayName="My Cute Extension"
chrome:author="Anonymous"
chrome:name="mycuteextension"
chrome:extension="true"/>
</RDF:RDF>
Edit:
At this point, if I haven't confused you, your directory structure should look like:
mycuteextension
| - chrome
- | - cute.jar
| - content
- | - contents.rdf
- | - cutexul.xul
- | - cutescript.js
The Extension Developer's Extension has some tools that help us with the next part, too, but the EDE is a work in progress so occasionally the procedure can be rocky (Here's the discussion forum.) Go to Tools -> Extension Developer -> Extension Builder. That will launch the Extension Builder tool. Tell it where your working directory is, then click "Edit install.rdf" and fill out the resulting form with your personal info and your extension's personal info. At the bottom, check Firefox and choose appropriate version numbers — 1.5 to 2.0 is a nice safe range (as of this writing), although for a real extension you'll want to be careful of compatibility issues. Click Save and Close. The Extension Builder should create an install.rdf file for you.
Next, click "Build extension," which will zip it all up into an XPI; and "Install extension," which will install your new Firefox extension! Whoooo! When you restart Firefox, you'll notice the button and menu bar that you created. Stay tuned for next month's tutorial on how to get rid of them.
If the auto-building process doesn't work, you can create your own install.rdf and zip it all up into your own XPI by hand.
Distribute that XPI file to your friends, or submit it to Mozilla's extension repository: anybody can double-click it to install your extension in their copy of Firefox.
Making extensions is a fairly complex business. I hope I've set you on the right road and not left out anything crucial. There are various approaches to the art of extension-crafting, various theories of directory structures, version changes, and so forth. This is a pretty comprehensive walkthrough, and this is an extremely comprehensive one.
Best of all, now that you know about the internal structure of an extension, you can hone your skills by taking apart other people's extensions to see how they work. Download an XPI (don't install it! Try right-clicking), unzip the XPI file and then the JAR file it contains, and use the Extension Developer's Extension to peek at both the XUL code that creates the interface, and the JavaScript that makes it run.
