Research, Analysis, Views - Just another Globalthoughtz | Right to Information weblog

Extensions are add-ons to Firefox that give your application new functionality. They can add anything from a toolbar button to a completely new feature according to personal needs of  each user. They allow the user to add or modify application features, use themes to his or her liking, and handle new types of content.  This article will provide a guide on how to build a simple “Tweet Button” extension for Mozilla Firefox.

Extension development in Firefox requires a little knowledge about XML, JavaScript and CSS. To create a Firefox extension, you will need a good text editor and a zip file utility.  At the moment, the documentation is a bit limited, however there are a few example extensions  that can really help to understand what’s going on. I presume you know about the internal file structure to build Firefox extension.

Below is a screenshot of what we’ll be building. It’s simply a button that resides in Firefox’s location bar. When it’s clicked, it will use nxy’s shortening API to create a short url for the current page and take the user to Twitter’s home page with the status box populated with the page’s title and the shortened url.

• First create a top level folder with name of our extension (for e.g. tweetbutton). Inside this folder create one more folder, which must be named as ’chrome’. Inside which, create another  folder and name it as ‘content’. Inside the root folder, two more files named, install.rdf and chrome. manifest  are created. Here I assume that you know about the contents of these two files.
• Next is to create one more file with .xul (for e.g. tweetbutton.xul) extension inside content directory of our file structure. The user interface portion of a Firefox extension is created using XUL (pronounced “zool”), a markup language used in creating user interfaces.

Our tweetbutton.xul will look like this:

• Now  we  create a skin folder inside the chrome folder that will hold all of our skin files. Inside skin, insert tweetbutton.png  and tweetbutton.css. Let’s take a look at the contents of tweetbutton.css:

• Firefox extensions are nothing without JavaScript. So next step is to create JavaScript file. Place it inside content folder, and name it tweetbutton.js. Place the following code inside this newly created file:

tweet() function is called whenever button is pressed. Most of the things here are self explanatory. First of all we have created an XMLHttpRequest to handle the nxy API call. nxy responses come back as JSON,  so when the request is complete we need to take the response and call eval on it. The eval() function evaluates a string and executes it as if it was script code.  I set the shortUrl to the longUrl if in case something is not right, otherwise short url is extracted out of the response and set to shortUrl. Lastly, gBrowser.addTab is called giving it the twitter address, title and shortened url. It will create a new tab instead of opening a new window. window.open can be used to create a new window.

• The last step is package the extension. Simply follow these two steps to package your extension:

1. Open up your ‘tweetbutton’ folder and create a zip file containing all of the files and folders. You should not zip up the tweetbutton folder itself, instead zip of the files and folders that are inside it.
2. Rename the file extension from .zip to .xpi.

Now  its time to test your package.You can simply drag the .xpi file into your Firefox browser.  Firefox should recognize it as an extension and ask you if you would like to install it. Just click on Install!

 We’ve just created a Tweet Button for Mozilla Firefox. Definitely there is some scope of refinement that could be done, but it’s enough to give you the big picture on how to develop Firefox extensions. Would you like to create one like this???