Archive | Add-ons Reviews

Best of the Web Development Add-ons

Most Popular Firefox Web Development Tools

One thing is for sure, with the correctly equipped Firefox browser, you too can become a better web designer or developer. How so? Well, Firefox has some really great tools for both of these jobs. Finding the one that doe the best job, is another job all on it’s own.

Firefox has a lot of web development add-ons you can use, however these are the best of the best at what they do.

  • Console² – Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.
  • User Agent Switcher – The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.
  • Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • MeasureIt – Draw out a ruler to get the pixel width and height of any elements on a webpage.
  • FoxyProxy – FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.
  • FirePHP – FirePHP enables you to log to your Firebug Console using a simple PHP method call. You must have Firebug installed and the “Net” panel enabled to use this extension.
  • ColorZilla – Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. Perfect color picker tool for Firefox.
  • Stylish – Perfect for testing those tiny CSS tweaks, you can also restyle the rest of the web too with this unique user styles manager.
  • View Source Chart – Graphically displays HTML tag boundaries, nesting tag orders, structure and hierarchy. In other words, it makes it all pretty looking.
  • Web Developer – The Web Developer extension adds a menu and a toolbar with various web developer tools.

Disagree or have your own suggestion for the perfect web designer or web development add-on that should be on this list? Drop in a comment and let us know. We’d love to hear your feedback!

Mozilla’s Guide to Building a Better Add-on

Mozilla's Add-on Developer Help and Tutorials

One complaint I have heard time and time again is that Firefox doesn’t document the “how to” process very well, when it comes to building a Firefox add-on.  Well, thanks to the Add-on Developer Hub, I think that is one complaint I will not hear again.  The Mozilla team has put in a lot of hard work and effort into creating a place to centralize the help, tutorials and guidance you’ll need to build the next great Firefox extension.
Continue Reading →

Easier Way to Clear Your Search Box

Auto-clear Firefox's Search Box

Want to hide what it is you have been looking for?  Not the perfect solution, but perfect for nit-picky peeps is the Clear Search add-on for Firefox.

What does this browser extension do?  It does one job, and it does it really well.  Once installed, it automatically clears the search bar after performing a search. So if you have a nosey roommate or family member, they won’t accidently see you have been searching for the top 10 horror villains of all time.

While this add-on for the browser isn’t enough to prevent somebody who is really nosey from going through your history, and doing a full scale investigation – it does serve the simple task or clearing out your search box after a search very well.  You can pick up the Clear Search extension on the Firefox add-ons web site.

Adding Reverse Image Search to Firefox

TinEye in Action

TinEye claims to be the world’s first reverse image search engine.  Rather than typing in a phrase and looking for a picture, you type in a picture and get other pictures like it – or something like that.  Thanks to the TinEye add-on for Firefox, you can get instant image searching done right from the browser.

Here is a little more about TinEye from it’s developers:

TinEye is the first image search engine on the web to use image identification technology rather than keywords, metadata or watermarks.

When you submit an image to be searched, TinEye creates a unique and compact digital signature or ‘fingerprint’ for it, then compares this fingerprint to every other image in our index to retrieve matches.

TinEye does not typically find similar images; it finds exact matches including those that have been cropped, edited or resized.

Once installed, you can right-click on any image, and select “Search Image on TinEye”.  When you do, you’ll be taken to an TinEye web page, that will display your search results.

It might not be a tool for everybody, but I do find the idea of reverse image searching very interesting and fun to play with.  You can learn more about it at TinEye.com.

Second Look at a New Tab King

It has been a while since I checked out the New Tab King add-on for Firefox, and I have to say I am impressed with the progression of the Firefox extension.  For those of you who don’t know, New Tab King replaces your blank new tab with a much more functional page of tools.

You get instant access to recently closed tabs, personalized suggested sites and even shortcuts to your desktop applications. 

Closer Look at New Tab King

The most recent release also comes with 7 built in themes, so you have a few more ways to customize it to suit your needs.

There is no reason why, these days, your new tab should be empty and bland.  With the New Tab King add-on for Firefox, you can make the new tab page and the Firefox browser even more functional than it was before.

Use Firefox to Customize Your Web

I think everybody, at times, would like to be able to customize certain web sites to better meet their goals.  Now, I am not talking about simple visual edits – like making the background black and the text white.  How about adding keyboard shortcuts for certain web site links and navigation elements?  You an do that and more with the Customize Your Web add-on for Firefox.

So do you want to customize web sites without writing one single line of code?  Check out this video tutorial for a little more information about the Customize Your Web add-on for Firefox.

Some of the other customizations featured include:

  • Removal and rearrangement of elements (cut / copy / paste behavior)
    Modifying of elements in every possible way (changing size, color, default values etc.)
  • Definition of keyboard shortcuts / shortstrings for any clickable element (shortstrings are multi-character shortcuts, e.g. "SO" for a "Sign out" Button)
  • Adding keyboard navigation support for any list of elements  (e.g. for the result entries of search)
  • Insertion of arbitrary HTML and JavaScript code
  • Definition of small macros which are triggered by a shortcut
  • Automatically triggering actions on page load (e.g. for automatic click on a login button or focusing a special field)

I am just having fun playing around with this add-on figuring out all the things I can do with it.  For some, it might seem a little complex, however there is extensive documentation to help you along.

You can pick up the Customize Your Web add-on for Firefox from the Firefox Add-ons site or from Mouseless.de.

Better Custom Google Search in Firefox

Custom Google Search

Are you a big fan of Google’s custom search feature, which allows you to customize your own search engine to fit your needs?  The Custom Google Search add-on for Firefox, in that case, is a perfect companion. 

In a nutshell, this extension for Firefox allows you to create, use and mange your own Google Custom Engines from within the Firefox browser interface. 

Customize Google Custom Searches

You can pick up the Custom Google Search add-on for Firefox on the Firefox Add-ons web site

Hide Bookmarks from the Awesome Bar

Hide from the Awesome Bar!

The Awesome Bar (or address bar, as those “normal” browsers might call it) does a great job at matching a web site saved in your bookmarks or history when you start typing in the Awesome Bar.  By default, Firefox doesn’t give you a way of saying, “Don’t show these bookmarks there” so now somebody has written up an add-on to give you that ability. 

The NotAwesome add-on for Firefox will help you hide any bookmarks tagged with “notawesome” from awesome bar searches.  This way you can totally flag bookmarks you don’t want showing up in the Awesome Bar results.

You can pick up this great add-on via the Firefox Add-ons web site.  (credit for this find goes to Lifehacker, when in turn goes to gHacks too!)

Make New Tabs Open Closer to Your Tab

image

Some people may find the fact that Firefox opens a new tab on the far right of your tab toolbar a blessing and some might find it a curse.  It really has to do with how many tabs you are look at, in one single browser.  For those who are cursed today, I have your solution.  The Tabs Open Relative extension changes how new tabs open up, which means no more tab surfing for you.

Once installed, the Tabs Open Relative add-on for Firefox will make all new tabs open to the right of the current tab, rather than the far right of the tab bar.  Of course, this only applies when you are clicking links on a page.  In the case where several new tabs are opened in a row without switching tabs, each subsequent tab will be opened to the right of the previous one, so as to keep them in order.

So if this sounds like the solution to the tab navigating curse you’ve been living under, be sure to pick up this extension via the Firefox Add-ons site.  It is an easy way to fix this tabbed browser nuisance.