Wednesday, November 24, 2010

How To Create And Add Button In Firefox Navigation Toolbar [Guide]

Today, we are bringing a Firefox guide that anyone can follow to create a custom button in navigation toolbar. Along with visible buttons in navigation toolbar, there is a list of other buttons having different functionalities provided in Firefox which can be added anywhere on toolbar and can be customized according to your needs. Since the button’s position and behavior can be changed without requiring any extra knowledge, one can easily build a new extension that behaves as directed, sits in defined position, while being highly customizable. This post covers how to create a simple extension – a toolbar button that will provide a simple functionality.

To begin, first you need to find out extensions folder (one which is residing in Firefox Profiles folder). Windows 7 and Windows Vista users will find this folder here;


However, if you’re using Windows XP, type %AppData% in Windows Run console and hit Enter.

Now open Firefox folder and then Profiles –>   -> extensions folder

Once the extensions folder is opened, create a new folder by the name of init.


Open the newly created folder, and create a new directory namely chrome, along with two files – chrome.manifest and install.rdf. Now we will be editing these files in text editor, we reckon you to use any editor with UTF-8 support, like – Windows build-in Notepad.

First, open chrome.manifest file and insert following lines of code init. The code provided below is also functional for Thunderbird mail, compose, and address book windows, and for Sunbird. However, if you need to use button only in Firefox, lines of code for Thunderbird and Sunbird can be excluded.

content custombutton chrome/ style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css # Firefox overlay    chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # Thunderbird mail overlay    chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # Thunderbird compose overlay    chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # Thunderbird address book overlay    chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul # Sunbird overlay    chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul

Once code is inserted in the file, close it down after saving the changes. Now edit install.rdf file, you need to insert following lines of code in it. You can change the button general description, text can be added in 6, 7, and 8th lines of the code (must be enclosed in double-quotation marks), you can enter button’s name, descriptive text, and creator name.


Once you’ve changed the description, save the changes and close the file. Remember the newly created folder (chrome), where we will create 3 files and insert 2 images. First create 3 files having following names;

Now we will apply styling to the button, there isn’t anything complex here, we will just apply some basic styling over the button design (define image dimensions and hover effect on the button). If you are familiar with designing a CSS file (Cascading Style Sheet), changing values & effects will be a cinch, however, if you are hearing its name for the very first time, just insert the following style lines of code in button.css file, once done, save changes and close it.

#custom-button-1, #wrapper-custom-button-1   {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton                    {-moz-image-region: rect( 0px 24px 24px  0px);} .custombutton:hover       {-moz-image-region: rect(24px 24px 48px  0px);} [iconsize="small"] .custombutton   {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover   {-moz-image-region: rect(24px 40px 40px 24px);}

Now open the button.xul file in a text editor and insert following lines of code. Remember that we are providing code for Thunderbird & Sunbird as well, if you’ve been following this guide only for Firefox, you can exclude lines related to Thunderbird & Sunbird.