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;

C:\Users\<<user name>>\AppData\Roaming\Mozilla\Firefox\Profiles\<<profile name>>\extensions

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

Now open Firefox folder and then Profiles –> <Profile name>  -> extensions folder

Once the extensions folder is opened, create a new folder by the name of  custom-toolbar-button@example.com 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.

<?xml version="1.0"?> 

<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="https://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest"

    em:name="AT"
    em:description="AddictiveTips"
    em:creator="Usman" 

    em:id="custom-toolbar-button@example.com"
      em:version="1.0" 

    em:homepageURL="https://developer.mozilla.org/en/docs/Custom_Toolbar_Button"

    em:iconURL="chrome://custombutton/content/icon.jpg" > 

    <em:targetApplication><!-- Firefox -->
        <Description 

        em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" 

        em:minVersion="1.4" 

        em:maxVersion="99" /> 

    </em:targetApplication> 

    <em:targetApplication><!-- Thunderbird -->
        <Description 

        em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" 

        em:minVersion="1.4" 

        em:maxVersion="99" /> 

    </em:targetApplication> 

    <em:targetApplication><!-- Sunbird -->
        <Description 

        em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" 

        em:minVersion="0.2.9" 

        em:maxVersion="99" /> 

    </em:targetApplication> 

    <em:file>
        <Description 

        about="urn:mozilla:extension:custombutton" 

        em:package="content/custombutton/" /> 

    </em:file> 

  </Description> 

</RDF>

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;

• button.css
• button.xul
• button.js

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.jpg");} 

/* 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.

<?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet type="text/css" 

  href="chrome://custombutton/content/button.css"?> 

<!DOCTYPE overlay >
  <overlay id="custombutton-overlay" 

  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<script type="application/javascript"
    src="chrome://custombutton/content/button.js"/> 

<!-- Firefox -->
  <toolbarpalette id="BrowserToolbarPalette"> 

  <toolbarbutton id="custom-button-1"/> 

  </toolbarpalette> 

<!-- Thunderbird mail -->
  <toolbarpalette id="MailToolbarPalette"> 

  <toolbarbutton id="custom-button-1"/> 

  </toolbarpalette> 

<!-- Thunderbird compose -->
  <toolbarpalette id="MsgComposeToolbarPalette"> 

  <toolbarbutton id="custom-button-1"/> 

  </toolbarpalette> 

<!-- Thunderbird address book -->
  <toolbarpalette id="AddressBookToolbarPalette"> 

  <toolbarbutton id="custom-button-1"/> 

  </toolbarpalette> 

<!-- Sunbird -->
  <toolbarpalette id="calendarToolbarPalette"> 

  <toolbarbutton id="custom-button-1"/> 

  </toolbarpalette> 

<!-- button details -->
  <toolbarbutton id="custom-button-1" 

  label="Custom" 

  tooltiptext="My custom toolbar button" 

  oncommand="CustomButton[1]()" 

  class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" 

  /> 

</overlay>

Now you need to insert two image files having names button-1.jpg and Icon.jpg with dimensions 40×48 and 48×48 respectively to get the best results. However, you can create images of any size not exceeding 48px width and length wise. Below you can see the button images we are using – button-1.jpg image is for toolbar button with respective sizes (big & small) and hover effect can be seen beneath the both default images’ sizes. Icon.jpg image refers to main extension icon image (the one you will see in Firefox extension gallery)

button-1.jpg

Icon.jpg

Once created, move to the 5th file – button.js. This JavaScript file carries a lot of importance, as it will define the main functionality of the button. You can add a sample script that prompts a message to test the functionality or go for advance script to do whatever you want. Also there are many scripts contrived especially to fullfill one’s requirements, you can also check out some simple but useful scripts here. Since this guide is for elementary-level users, we will creating a simple bookmark item that will open the specified website. Open the button.js file and insert following lines of code to create a bookmark button (to show on Firefox toolbar).

CustomButton = { 

1: function () { 

const url = "https://www.addictivetips.com/"  

document
    .getElementById("content") 

  .webNavigation 

  .loadURI(url, 0, null, null, null) 

  }, 

}

Now you’re good to go, we reckon you to check the code you’ve inserted in the mentioned files and verify the image dimensions again. To install the newly created extension, close all the running instances of Firefox and then launch it. If everything went well, you’d probably be seeing new add-on installation prompt, indicating that extension has been successfully installed.

To make newly created button appear in the navigation toolbar, from View menu, under Toolbars sub-menu, click Customize.

Customize Toolbar dialog will show up, from where you have to drag the newly created button over the navigation toolbar. Once inserted, you can also change its position by dragging it anywhere you like.

Now just click the button to verify the functionality inserted in JavaScript file.

The resultant button’s functionality is user-defined, so it is up to your skills that how much you can calibrate its functions. Novice users can create shortcuts, link applications, design bookmarks while users in limbo between average & expert level can certainly make more use of it and add required functionality in main JavaScript file.

Read Full Bio

Usman Javaid

Follow me on Google+

Latest from Author

How To Create A Portable Windows 8 Enterprise To Go Workspace How To Install Windows 8 As Guest OS Using VMware Player