The Mozilla Firefox web browser can be pimped out with a number of extensions to make many webmaster tasks a lot easier. This page contains a list of what I consider to be the best five extensions suited to creating and uploading web pages. I use all of these regularly in my work and all of them are compatible with Firefox 7.0.1.
I compiled this list after plowing through literally hundreds of potentials at the official Firefox Add-ons site. Unfortunately, many add-ons are either substandard or outdated which makes finding good ones a frustrating experience to say the least.
Now for those who don't know, 'extension' refers to a kind of tool that can be installed into Firefox which you run from the browser UI. The default installation of Firefox is specifically designed to be lean and mean providing only that which is necessary to surf the internet making for a faster browsing experience. However, Firefox is highly 'extensible' which means that third-party developers (people not directly associated with Mozilla) can create stuff that you can install into Firefox to allow it to do all kinds of extra things.
Back in the day, there were originally two kinds of extras you could install into Firefox: Extensions (tools) and Themes (custom Firefox skins). Later versions of Firefox began to consolidate these under the single heading of Add-ons. You can see which Add-ons you have currently installed (if any) by clicking on Tools » Add-ons.
Alright, enough with the preamble. Let's make with the goodies, shall we? :)
|Web Developer Toolbar|
|HOME PAGE: http://www.chrispederick.com/.../webdeveloper/|
This extension by Chris Pederick will easily put Firefox into overdrive by endowing it with a dashboard of over 50 options providing all kinds of highly useful information and various handy tools for analyzing web pages. This is immensely useful for webmasters who are in the midst of designing, redesigning or debugging their web pages.
This extension is an absolute MUST-HAVE and is the first one I run to install after updating Firefox. The creator of this extension is also very conscientious about keeping it compatible with the latest release of Firefox so you never have to wait for this baby to 'catch up'.
Using a resizable box ruler to measure anything on a web page...
|HOME PAGE: http://getfirebug.com/|
|DOWNLOAD PAGE: http://fireftp.mozdev.org/|
When you signup with a web host, you'll typically be given access to a 'control panel' which usually contains a somewhat clunky user interface called File Manager which you can use to upload files to your website online. However, a much preferred method of uploading files to your website is to use an FTP program which is a software that specializes in managing processes in the File Transfer Protocol (or in layman's terms, specializes in uploading/downloading files on the internet).
FireFTP is an excellent free FTP program that installs easily as a Firefox extension. After installing you can start it up by clicking on Tools » Web Developer » FireFTP which will then present you with a fully functional and fully featured FTP program running right in your web browser.
Among other standard FTP program features, FireFTP allows you to create and save multiple FTP accounts for your various websites, establish default startup directories and, best of all, has a fantastic 'Keep directories in sync while navigating' feature that allows you to synchronize the display of your online website directories with the offine version of your website stored on your hard drive (or vice-versa). This means that in the FireFTP user interface, whenever you change directories in the offline panel (left), the online panel (right) will automatically change to the same directory. I love this feature as it eliminates the possibility of uploading web pages to the wrong directory. (By the way, you do have an offline version of your website stored on your hard drive, right?)
FireFTP User Interface
|Rainbow Color Tools|
|DOWNLOAD PAGE: https://addons.mozilla.org/.../rainbow-color-tools/|
When working on web designs, I frequently forget exactly what color codes I used for specific elements which then sends me rummaging through my CSS code to retrieve them. To save time, I use color pickers which are tools which perform much like eye-dropper tools in photo editors in which you can hover anywhere over a web page and then grab the color directly below the cursor. There are surprisingly a lot of color picker Firefox extensions but the one I found to be the most intuitive is the Rainbow Color Tools extension created by Heather Arthur.|
This extension also amazingly analyzes any web page, extracts the predominant color scheme and gives you a readout of all the colors used in the scheme which you can then copy to clipboard or save as a reference in the extension's built-in customizable color library. And now that you've successfully stolen, er, uhhh, (*ahem*) borrowed some nice complementary colors from your travels around the net, you can use Rainbow to easily test drive those colors on your own web pages by dragging-and-dropping them from the color library onto any HTML element on your page.
If you're in the process of designing (or redesigning a website) this extension is another must-have.
Using Rainbow to grab a web page element background color...
|Lightshot (Screenshot tool)|
|HOME PAGE: https://addons.mozilla.org/en-US/firefox/addon/lightshot/|
|Of great use to bloggers —or anybody writing any kind of online review— is a good screenshot tool. This is another popular choice amongst Firefox extension developers for some reason so you've got a lot to choose from. The one I finally settled on is Lightshot largely because of its ease of use and the fact that it can take a screenshot of a click-and-drag customizable area which saves a lot of time when it comes to cropping the image afterwards. |
If you don't have a program to crop your screenshot, you can check out my list of free graphics editors OR you can just use Lightshot itself to automatically send your screenshot to Pixlr, a full-featured online image editor.
I found this extension immensely useful and, in fact, it was used to take most of the screenshots you see on this very page.
Using Lightshot to select any area on your computer screen and take a screenshot...
|Last updated: Tuesday October 18, 2011|
Learn about web hosting without the technobabble!
If you need a .COM web address, you can get one quick and easy at...