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\<
>\AppData\Roaming\Mozilla\Firefox\Profiles\< >\extensions
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 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.xulOnce 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.
Now you need to insert two image files having names button-1.png and Icon.png 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.png image is for toolbar button with respective sizes (big & small) and hover effect can be seen beneath the both default images’ sizes. Icon.png image refers to main extension icon image (the one you will see in Firefox extension gallery)
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 = "http://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.
No comments:
Post a Comment