Must-Have Firefox Extensions (15/10/2007)

Web Development

Web Developer Extension (1.1.4)

The Web Developer Extension is probably the most popular extension for webbies who test and code in/for Firefox.

It adds a toolbar to the browser window, containing (more or less) EVERY feature you would ever need to debug and test a webpage. Featuring:

Disable styles, popup blocking, java, images, cache, cookies
Outline block elements, deprecated elements, tables, links without Title attributes
Resize the window to test different screen resolutions.
Tools to validate the HTML and CSS, links, and accessibilty (WAI and 508).
CSS - add user stylesheets, view CSS, edit the CSS on-the-fly, and use the border box model.
Forms - clear radio buttons, show passwords, view information
Images - view image info, display paths, outline problem images
Information - display info such as access keys, anchors, tab index, etc.
Html - Edit HTML in the same way as editing the CSS


HTML Validator (0.8.4.

HTML Validator is based on the HTML-Tidy extension plug-in. It is for this reason I see no need to get the HTML Tidy, when this does the same and more.

When viewing a web page, this extension instantly shows the status of a webpage. The amount of warnings and errors are displayed in the status bar. No warnings equates a green tick; warnings show a yellow warning triangle; and errors show a red cross.
You can set it to show only the icons, or the icons plus the amount of errors/warnings.

Viewing the source of a webpage, with this extension installed, opens a different window - one that shows the source code with errors highlighted, a list of all the HTML warnings and errors, and help on the specific error. There is also the option to tidy the HTML, including different doctypes, and previewing how it will look.


Checky (2.5)


As a relative novice in the realm of validation, search engine submission and preparedness, coding for high-ranking, etc., I find Checky to be a tool which is both practical, and which helps me to learn the in's and out's of the web dev issues which it exposes.

- jsabarese


Taw3 With A Click (0.9.5)

The TAW is a Web Accessibilty Test suite, designed to aid in the use of desiging and testing accessible websites. TAW3 Online is a browser based check, much like the W3C Validator; however, seeing as your browser is already open, why not have a simple extension do it for you?

Taw3 With A Click installs an icon in your browser's status bar, and with a single click you can make an accessibility analysis of the web page you are on. You can configure the analysis level you want (WCAG 1.0 levels) and whether the report opens in a new tab or window.


FireFTP (0.97.1)

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.



FireFTP opens a new tab with a fully functioning Explorer-style FTP program. You can add as many FTP connections as you want and select the one to connect through from a drop down menu - then it's simply a case of hitting "connect" and moving the files from your local drive to the remote machine! Easy!


SearchStatus (1.21)

For every web page you visit while using SearchStatus (excluding secure domains and those you have configured as private), certain information, including your ip address, the url of the web page you visit, and general information about your browser and computer's operating system will be transmitted from your computer to Alexa. Some of the url's you visit, which are transmitted to Alexa, will contain information that is personally identifiable.

SearchStatus is a toolbar extension for users of both Mozilla and Mozilla Firefox, designed for the highly specialised needs of search engine marketers. The toolbar provides extensive search-related information about a site, all conveniently displayed in one discreet and compact toolbar.

For every site you visit using Firefox or Mozilla, SearchStatus lets you view its Google PageRank, Google Category, Alexa popularity ranking, Alexa incoming links, Alexa related links and backward links from Google, Yahoo! and MSN - all in one place. This combined search-related information means you can view not only the link importance of a site (according to Google), but also its traffic importance (according to Alexa), so providing a balanced view of site efficacy.

The SearchStatus Mozilla/Mozilla Firefox extension appears unobtrusively at the bottom of the browser on the status bar. If you choose to view backward links for a particular page, they open in new tabs in the same browser window. Disable the automatic Google and Alexa queries and they fold away from view.

Enjoy - roytheboy


IEView (1.3.3) and OperaView (0.6)

IEView/OperaView is a simple yet necessary extension for the web designer. Using Firefox to test in is all well and good, but what if you want to test it quickly in IE or Opera? If you're anything like me, you will have removed all references of IE from the desktop, start menu, quick launch bar, etc. You could always open the Run command and type iexplore.exe, copy the address from Fx into IE and hit enter, but why bother when you have IEView?

IEView and OperaView both simply add a 'View this page in IE'/'View This Page in Opera' button to your right click context menu. If you right click a link it adds 'Open Link Target in IE'/'Open Link Target in Opera'. It's useful for testing your sites in IE and Opera, or when a site doesn't work in Firefox. Get it here.


IETab (1.3.3)

Similar to the much-needed IE View extension, IETab is an excellent extension that allws you to open pages using an embedded IE engine, inside the Firefox browser window. Excellent for testing pages in IE and Firefox in the same window, or for opening pages with bad HTML or ActiveX that require IE without opening an IE window.


Aardvark and Mouseover DOM Inspector (2.0.2)

Both of a similar nature, this extension and bookmarklet allow you to hover over any element on a page and see the relevant item (eg <h2>), id and class.


View Source Chart (2.5.02/2.6) and View Formatted Source (0.9.5.

View Formatted Source, by Felix Ritter, is a great debugging tool. The source of any web page breaks down into block level elements which are expandable or collapsible, like when you view an XML document in a browser window.
You can also mouseover any element to see if/what styles have been applied to it through CSS. I used to use the view rendered source by Jennifer Madden which breaks block level elements down into color coded chunks. That's still pretty handy but the formatted source blows the doors off of it.


MeasureIt (0.3.6)

MeasureIt is a small extension that allows you to drag a ruler across any area of a webpage. It will highlight the area selected and display a small popup informing you of the width and height in pixels.

It can be switched on and off by the icon in the statusbar.


ColorZilla (1.

ColorZilla is another helpfule extension for web developers. It puts a tiny little eye-dropper icon in the bottom left hand corner of Firefox.

Once you click the icon, the mouse pointer turns into a crosshair. Hovering over any color will display the RGB and hex color code for that color. Clicking on the color will store it in the ColorZilla memory.

As a bonus function, it also involves:

Basically, when you hover over an element of a webpage, it will display it's ID in the status bar. Pretty nifty.

Web Enhancements


BetterSearch (1.18)

NOTE: Until v1.7, BetterSearch was named McSearchPreview.

Enhance your search engine productivity with customizeable thumb-view of page results.

Useful For perusing, with a slightly more educated guess, those pages resulting from your search.

Upon discovering TPH's GooglePreview suggestion, I was impressed and thought it indeed a "must have". Then I stumbled upon BetterSearch, which not only provides thumbs for all of the SE's listed in the desc. above, but also introduced me to the WayBack Machine which, Ã la Mr. Peabody and co., shows multiple page-views based on an ordered chronology.

haven't tried SiteInfo feature yet, and others are n/a to me

- jsabarese


Adblock Plus (0.7.5.3)

Undoubtedly the best thing since sliced bread.

Adblock Plus is a fantastic extension that removes adverts from a page. There are two options - 'Hide ads' and 'Remove ads'. Hide ads downloads the ad content, but does not display it. Remove ads removes the content, so nothing is downloaded. The first option is useful if you want to support your favourite site, but still not see the adverts.

Adblock Plus also supports whitelisting, to remedy false positives.


GreaseMonkey (0.7.20070607.

Greasemonkey is a User Script Manager for Firefox. According to the official blurb,

It is useful for removing all the annoying parts of webpages, in much the same way that Adblock removes the adverts.

A massive online resource for Greasemonkey scripts can be found at www.userscripts.org.


Download StatusBar (0.9.5.1)

NOTE: limited compatibility w/ FF versions. should use most up-to-date FF version

In place of the Firefox Downloads window, the Download StatusBar places basically the same Tools>Downloads info into the status bar. Helpful for monitoring which files have completely downloaded / are currently downloading w/out changing the window focus. features include "clear all finished", etc...

one of those extensions that I install before any others upon a fresh install of XP / Firefox. feel lost w/out this "basic necessity".

- jsabarese


NoScript (1.1.7.2)

NoScript is an extension that conditionally disables Javascript. It is useful in a web dev sense for accessibility checks.

Easily View Docs w/ or w/out javascript (or flash, etc.) enabled. Could help a developer decide whether he or she will use javascript (or flash objects) on a page.

Perhaps more easily implemented than, other more advanced script-control extensions, such as Greasemonkey. NoScript is very easy to install and use - all .js is automatically disabled after NoScript is installed, yet can be enabled with a simple right-click, as in "Always allow csscreator.com" or "Temporarily allow microsoft.com", etc. NOTE: some favorite web sites of course will become "broken", therefore requiring the user to check the NoScript icon (status bar) for script blocking on that "broken" page, in which case the site is easily "un-broken" w/ a simple right click, as previously stated.

This is also a must-have for anyone who is concerned about browser security; among the most popular Extensions available.

- jsabarese


Dictionary Tooltip (1.1.3/1.2)

Double-click to access a selection of on-line references such as dictionary.com, etc. Double-clicked word is defined in small pop-up. Useful for proofreading docs before publishing.

Someday, i'll go back and scan my currently published material-- I've received feedback from viewers stating "you have a spelling error on the page ___ ! Don't you use a spell checker?". This Extension will likely boost productivity during that process.

Satisfies my own obsession w/ the dictionary.

- jsabarese


Reveal (1.0.5)

Allows you to "reveal" what's going on in your other tabs, see a Thumbnail of your "Back" history, or to quote the developer:
"...Reveal allows you to see thumbnails of pages in your session history and quickly find the page you want. Reveal also includes a magnifying glass to help you see everything..."

Probably the coolest thing about Reveal (and what made me realize I was mistaken about the BetterSearch joint) is that, with one "hotkey", you can take a glance at all of your open tabs, and simply click on the thumbnail to go to where you want to be.

- jsabarese


Mouse Gestures (1.5.2)


Mouse gestures allow you to navigate the Wild Wild Web and perform browser operations by using your mouse. You simply hold down the right hand mouse button and drag, to perform an operation. For example, dragging left goes backwards, right goes forwards, etc.

There are also helpful functions for web developers. Dragging in an 'S' (or '5' shape) views the source. Dragging in a tick shape (or 'V') validates the page with the W3C validator. More examples can be found here.


PDF Download (0.9.3.1)

PDF Download is another one of those simple extensions that make browsing a pleasure. When you click on a link to a PDF file, instead of automatically opening Acrobat, you get options to either:

a) open the PDF file in a new tab
b) save the PDF file
c) view the PDF file as HTML (provided by Adobe)

You also get to see the size of the PDF file in the options tab.




Canonical Url (0.1.2)

Canonical Url allows you to change what suffix is added to urls when you press ctrl+enter, shift+enter, or ctrl+shift+enter.


ForecastFox (0.9.6)


ForecastFox is ultimately customisable. You can specify what you want displayed, what format, where on the browser, what format you want it, etc. There are two boxes - the weather forecast for the day, and the current weather conditions for the day.


Paste & Go 2 (0.3.4.3)


Simple is as simple does. You copy an url into the clipboard, then use ctrl+shift+v to load it in the address bar. If you don't like that specific key combo, you can change it in the about:config screen.




Smiley Xtra 4 (4.1.1)

Smiley Xtra is a must have for the forumite or compulsive Blogger. Sure, you get a small selection of smileys built into the forum software, but what if there isn't one for a specific occasion?

This is where SX comes in. It creates a sidebar, with an enormous list of smileys you can display in your posts/blog. It is split into categories, and even features a search function.

You can also assign 5 smileys to a favourites list, so you merely have to right click an input field, select "Smiley Xtra" then pick your favourite.

It contains all the regular smileys - the small yellow ones, with simple expressions - along with more elaborate ones (for example, smileys driving tanks), and very helpful forum ones:




Cards (0.98 )

Fed up with the paltry selection of card games that come with Windows? Ever wish that you could play cards from inside your browser? Well now you can, thanks to Cards, an extension for Firefox.

Games included: Aces Up, Black Widow, Canfield, Double Solitaire, Grounds for Divorce, Fan, FreeCell, Golf, Gypsy, Klondike, Maze, Mod 3, Montana, Pyramid, Regiment, Russian Solitaire, Sanibel, SeaHaven Towers, Simple Simon, Spider Solitaire, TriPeaks, Wasp, Whitehead, and Yukon.

Features: autoplay, hints, unlimited undo, scoring, animation, and "intelligent" moving of cards when you right click on them.




Dictionary Search (2.0.2)

Ever been flummoxed by the rather delectable selection of nouns and verbs encountered on the world wide web? Not sure what Tyssen's on about with "predicated"? Well, worry no more! Dictionary Search is the easiest way to look up (or translate) any word in a web page or email.

Once installed, simply highlight the offending, confusing item of text, right click and select "Dictionary Search for ....". The dictionary used can be fully configured, and up to four different dictionaries can be used at any one time.


ChatZilla! (0.9.78.1)

Wonderful for those of use with no lives, who can type ten million words per second and use abbreviations such as "lol", "wtf" and "omgwtfbbgzor" in real life, ChatZilla! is an IRC (Internet Relay Chat) extension for Firefox.

Chatzilla is as easy to use as any other IRC client (mIrc, Gaim) and, while increasing the memory useage of Firefox, removes the need to run a separate IRC program.

Heads up - check this out gang > http://www.joehewitt.com/software/firebug/

With regards to IEView (1.2.7) and OperaView (0.4.1), how accurate are they?

All IEview and Operaview do is open up the opera.exe and iexplore.exe browsers (you must have them installed) with the page you're on.

IETab on the other hand embeds it in the firefox window, but I don't know how acccurate it is.

Thanks for the accurate answer - I was about to get very excited.

Found another one great for regulars of this (and other web dev) forums: X-ray - examine a page's HTML without having to view the source (ie all the content and code shows on the same page).

Oh have had that for ages

Did come across something for the PHPers amongst us though, a dedicated version of firebug for php, haven't got the link though

ah found it

http://www.firephp.org/

Firebug is missing from the list at the top. It should be first. I now hardly use anything else - its all there in Firebug and editable.

Hugo ... what exactly does that extension do? My PHP is back on the server, so what can it tell me about it?
A plugin that worked as a client to XDebug would be really handy.

In truth Chris I've only stumbled upon firephp recently and haven't had sufficient play time to set it up; it is not, it seems, as straightforward as installing a normal firefox extension. As you point out what can the browser know of PHP? as it's been run and processed it's instructions. You have to install a pear package and include a small snippet of script at the top of any script to initialize things and set a cookie, then from what I can gather firephp is able to display all the processes that your PHP script has gone through to generate the page and displays it in a firebug tab.

It's looks as though it's a alternative to having to create your own error checking/debugging points in a script.

We've said it before and doubtless will say it again but Firebug is an absolutely indispensable tool and I too simply don't use anything else now, and working at the moment with very much modular styles it's ability to tell me at a glance what styles are applied and from which file, line number and the cascade of the properties and specificity is simply staggering and makes things so much more efficient to deal with and that's only one facet of it's information, also working a lot with scripting the ability to watch the generated markup tree change in real time to show classes/html elements being added/removed is awesome. :? do I sound like I have a schoolgirl crush ? actually I do, me and the backend coder I'm working with both! when we were setting up our respective work environments we both simultaneously said "Have you installed Firebug" and then spent half an hour signing it's praises

The new Dust-Me Selectors Version 2.0 can help finding used CSS selectors and unused CSS selectors in a page or in a site.

Fireshot!

The browser SC to end all SC.

Simply a wonderful little extension that allows quite sophisticated screen annotations (speech bubbles, lines, boxes etc) croping, emailing from the app.

"FireShot is not available for MacOSX"

Nor, for Linux! Fortunately, xwd (the X-window dump utility) and the ImageMagick suite[1] will do these things. Still, it would be a nice convenience to do them from within Firefox.

cheers,

gary

[1] ImageMagickTM, version 6.2.0, is a free software suite for the creation, modification and display of bitmap images. It can read, convert and write images in a large variety of formats. Images can be cropped, colors can be changed, various effects can be applied, images can be rotated and combined, and text, lines, polygons, ellipses and Bézier curves can be added to images and stretched and rotated.

It's not really a Firefox plugin, more of an IE plugin, but supposedly better then then current IE WebDev bar.

"Jean-Fabrice Rabaute, author of Companion.JS, has put out a new DebugBar as he aims to get IE developer tools on par to Firebug."

http://www.my-debugbar.com/wiki/ToDo/Beta

I'v started using one of the Firefox 3b3-pre nightlies as my browsing tool and realised I have no extensions, so I'm gonna install firebug and see what all the fuss is about

Try https://addons.mozilla.org/en-US/firefox/addon/2207 Cooliris - it actually opens up "picture in picture" browsing if you want.

I've just installed mouse gestures and in combination with my graphics tablet and dual screen setup i feel truly like i'm from the future. highly recommended.

Very suave

I've just bought a laptop and the trackpad is easy enough to use but I hate having to move my hands around to go back a page for example (using the keyboard) . . . mouse gestures to the recue!

The web developer was a definite personal favorite of mine, I still go back to firefox and use it sometimes, also nuke anything was cool for when you go onto a site and theres some stupid flashing banner that's distracting you or something like that...

While I still like firefox and continue to have it as my number two web browser, these days my browser of choice is Chrome, you can't come close to its speed or seemingly 'not there' effect with any of the other browsers

For anyone with an interest in SEO Alexa Sparky shows the alexa rank and other useful information about sites you visit such as related sites.

Selenium is a suite of tools to automate web app testing across many platforms.
I saw a demo on how to use Selenium IDE in Firefox night. It makes testing near effortless.

A couple more, these are extensions for firebug, itself a Firefox extension.

YSlow
Page Speed

These two do similar things, tell you about how your page is performing and what you can do to streamline it so it loads more quickly.

Another handy add-on for Firebug is FireFinder which lets you do a search for elements, IDs or classnames within the Firebug pane.