Must have Firefox Add-ons: Every web developer needs useful add-ons and other plugins to do his job in more efficient way. A web browser is the base, whether we’re working on developing, management projects, web designing or if we just surfing internet.

Browser based web applications gave rise to improve web browser from different perspectives in order to do a specific job. As there are some Must-Have Extensions for web Browsers to assists a general user, in the same way there are Add-ons for web browsers which assist web developers.

12 Best & Must Have Firefox Add-ons for Developers

No matter what browser you’re using, you need its respective Ad ones for web developing. In this guide, you’re going to learn about best Add-ons for Firefox browser. Mozilla has introduced a version of Firefox which is built specifically for web developers. It is generally known as Firefox Developer Edition. The Add-ons for Firefox browser which I’m going to discuss are generally work great on Firefox developer edition.

#1 Usersnap

This is a very useful Firefox Add-on which lets you capture or annotate any web page. Generally, the software engineers use it to track bugs in browser or for managing or collecting feedback on website prototype. You can create screenshots and save them directly to your project in this way you can discuss about changes or other issues with your teammates.

#2 Web Developer

The web developer Add-on is used to add different type of web developing tools in your Firefox browser. It gives many great features to web developers and most favorite one of maximum web developers who are working on Firefox. It enhances your work experience on Firefox by allowing you to use multiple developing tools at the same time. It assists developers with various CSS, image options and by giving access to the structure of page. This Add-on is mostly used in developing edition of Firefox, but it also works best on regular edition as well.

#4 Firebug

This is another famous and most widely used Firefox Add-on which provides an instant access to the multiple developing tools. You can do editing, debugging and monitoring of CSS, HTML and JS using Firebug Add-on.

The reason why it is so famous is due to its user friendly environment. It mostly works best on regular edition of Firefox browser.

#5 HTTPFox

#6 Ghostery

If you want to vie installed trackers, pixels or snippet on any website then you should use Ghostery Add-on for Firefox browser. Though it is available for other browsers as well but the one in Firefox is more widely used. It displays the trackers which are collecting data on any a web page. You can also block these trackers in case you don’t want your sessions to be tracked.

#9 FireQuery

#10 Modify Headers

As the name suggests, this Add-on allows a developer to modify HTTP request headers which are sent to web servers. Mostly, it is best for Mobile Web development HTTP testing. If you’re working on Mobile web developing then you must use it.

#11 Advances Cookie Manager

If you’re also interested in managing and monitoring cookies then you should install this Add-on in your Firefox browser. A developer can add view, modify or delete cookies using this Add-on. It also support exporting and importing cookies.

#12 YSlow

This Add-on actually analyzes the performance of different webpages according to some parameters. It also gives suggestions to improve the performance of a web page as well. It runs in Firebug’s environment so you’ve to first install Firebug if you’re interested in using YSlow Add-on in Firefox browser.

These are some of the most commonly used and famous Add-ons for web developers and designers in Firefox browser. Though, the importance and usefulness of an Add-on depends on the work focus of a developer.

Preference varies from developer to developer. You may not found many of above mentioned Add-ons useful for you, but at the same time they are most useful for many other developers. Considering this, I decided to compile a list of most famous and widely used Add-ons for web developers, for Firefox web browser. Hope you enjoyed reading that.

I bet many of you have a keen interest in developing Firefox extensions. Some of you may have gone through some kind of short courses/training and tutorials to know to do this. And of course those who have been paying sincere time are now able to develop Firefox extensions in pretty smart and professional way. But as a human, we always look for shortest path to achieve our goal. We need something easy and time saving. Considering this thing, I made this short but complete guide in which you’ll learn a full fledged procedure of developing a Firefox extension. This is not actually a shortcut but an efficient approach to develop a fully operational Firefox extension. Read it carefully, understand, and chill.

Specify a Target – Firefox Extension Development

As this a guide. So I better teach you with an example. Let’s say I want to create and Firefox extension that can find and highlight all of the inbound and outbound links on a web page. It will also show how many times a particular link has appeared in that web page. So let’s start with you first Firefox extension.

Things you need to develop Firefox extension

Switch to other Profile

As this is a practice work for you and you don’t want your existing settings to be affected by any unwanted change that you may make by mistake. So its better to create another profile with any name. Let’s say you created a profile with the name of “David”. Here is the procedure of making other profile in different OSs.

i) For Windows

Open window’s start menu and choose RUN option. Write firefox –P in there and hit enter. Then choose create profile and you’re good to go.

ii) For Mac

Open the Terminal located under Applications and type /Applications/Firefox.app/Contents/MacOS/firefox –profilemanager in it. Then go to create profile.

iii) For Linux

Open a terminal. Use cd and navigate to Firefox directory. Enter ./firefox -profilemanager. Now choose Create Profile in the dialog.

Configuration settings in Firefox

Now open Firefox browser and type about:config in address bar and press enter button. A you’re about to make some minor changes so it will warn you. Its ok to move forward. Following settings must be as it is, its recommended. If not then change them accordingly. First three settings are necessary but the last two are optional.

cd~/.mozilla/ (this is for linux. Your profile would be showing with the name of .david)

Pointing to Extension

There will be a folder in the name of extensions. It will have the codes of all of your extensions. Create a pointer file with some name without any extension, Instead of placing your code here. And point it to C:\extensions\ (Windows) or ~/Sites/linktargetfinder/ (Mac) i.e. where you actually have the code.

Folder Structure and Files

Bes thing you should have for a developing a good extension is a good base. Hierarchy of your code should be as follows.

Install.rdf

This is intimidating code where you have all of the meta information about your extension. Usually it looks as following. It’s pretty disturbing for beginners but don’t worry. Many codes usually have same such information that you don’t ever need to replace with any other thing form yourself. Just let it be in this way and move to further steps.

Information in em:id must have to be the same as you mentioned in pointer file. Other sections describe information about your extensions such as its name, minimum and maximum versions of firefox it supports, its functionality and URL and optional URL of extension. em:type specifies the type of code which Extension here.

In the section of em:trgetapplication> there are information like em:id, which is the actual id of Firefox. em:minVersion is again the minimum version of Firefox. em:maxVersion isthe maximum version of Firefox.

What is Chrome Manifest?

Everything around your content window, such browser menu, toolbar, address bar is called chrome of firefox. Now we will move to the chrome:manifest file. It looks as follows

overlay chrome://browser/content/browser.xul and chrome://linktargetfinder/content/browser.xul is the path by which file you will use to override web browser elements, and add items to the toolbar, menu and status bar.

locale linktargetfinder en-US locale/en-US/ is used for localization of content.

There are some general XML syntax at start, then CSS code and DOCTYPE for localization. Then you’re free to go whatever XUL you want to put. I added a Menu option in toolbar menu, then an Icon to the firefox Statusbar and then a button to the toolbar. You need to go to view > Toolbars > Customize in order to add your button to the visible toolbar.

Options.Xul

It is used for the options dialog of extension, pointed out in the install.rdf file in the Description/em:optionsURL node. It looks like following

The code is pretty straight forward in running. CSS file is added from the extensions chrome folder to the current document. It locates all links in it, counts those, highlights them and alerts you with the number of hits. Which was basically the core purpose behind development of this extension. Job done!

Three types of extension preferences are string, integer and boolean, and the six methods to work with them are given as follows:

getBoolPref()

setBoolPref()

getCharPref()

setCharPref()

getIntPref()

setIntPref()

Default folder is the folder in which your create preference folder. And a file with name pref.js in it. Local folder is used for localization. We just have one child folder in our example. Skin folder is used to analyze above things to give them a better look and shape.

Packaging and Installation

Extensions in firefox are delivered like XPI files which are basically just zip files. All you need to do is compress your folder and change its extension. Select all contents of your extension folder and send them to compressed (zip) folder. Then change its extension from .zip to .xpi. That’s all!

Distribution

There are two methods that you can use to distribute. You can host it by yourself or you can also use addons.mozilla.org. I personally recommend you to use addons methods because it saves you from many issues about management. I hope you enjoyed learning about extension development in firefox. Now at least you can make a try. I’m sure you can do that if you really pain attention in learning and understanding above mentioned method. Wish you best of luck with your very first Firefox extension!