Creating a FireFox Toolbar Extension using XUL

Its easier then you think...

First, you must understand the directory structure. Once you do, learn about the files needed to create the extension. You can create extensions of all kind and not only a Toolbar.

For you're convenient, rather writing all of the XML code here, I attached the source code completely to this post, so just download it and try it.

First, a look at the directory structure, witch is VERY important to understand and follow:
- MyToolbar (Root Dir)
- - chrome (Sub Dir)
- - - MyToolbar.xul
- - - MyToolbar.js
- - skin (Sub Dir)
- - - MyToolbar.css
- - install.rdf
- - chrome.manifest

Once you understand that, you need to understand the XML structure in the XML designer file.
All the source code is written in XML language, witch make it easier to understand and edit.

For example, adding a new button to the toolbar looks like this:

</toolbaritem>

As you notice, you can add a JS file and a CSS file to you're extension.

After you finished editing you're XML files, the next step is to pack the extension to XPI file, once again you will be surprised to know this is to very easy...
Just ZIP all the files (Inside the MyToolbar folder) to MyToolbar.ZIP, then change the name of the file to MyToolbar.XPI witch is the FF extension type (XPI).
All you need to do now is to drag the file into FF browser witch automatically understand that a new extension is trying to be loaded and will open the extension Add-On's install manager.

Although the example here is very simple, you can create a much more complex extensions witch required much more understanding with the configuration files...

This is the result of installing our new toolbar extension. Here you can see the "My Button" that been added to the XUL file: