Everybody knows that Firefox has add-ons for virtually everything, but if you don’t want to bloat your installation you’ve always got the option of Greasemonkey scripts instead. Here’s a quick primer on how to use them.

Getting Started with User Scripts

Once you have Greasemonkey installed, managing the extension is really easy. Left click on the status bar icon to turn the extension on/off and right click to access the context menu shown here.

Whether you use the Options button in the Add-ons Manager Window or the context menu shown above, both will bring up the Manage User Scripts dialog. At the moment you have a nice clean slate to work with… time to get some scripts added in.

The majority of user scripts can be found at two different sites, the first being appropriately named userscripts.org, and you can either browse by tag or search for a script.

As you can see here your search for a particular type of script can be quickly narrowed down based on category. There is definitely a lot to choose from.

For our example we focused on the “textarea” tag. There were 62 scripts available but we quickly found what we were looking for on the first page.

Installing, Managing, & Using Your Scripts

When you find a script that you want to install visit the script’s homepage and click on the “Install” button.

Note: Link for this script provided below.

Once you have clicked on the Install button, Greasemonkey will open up the following installation window. You will be able to view:

• A summary of what the script does
• A list of websites that the script is supposed to function on (our example is set for all)
• View the script source if desired
• Make a final decision on whether to install the script or cancel the process

Right-clicking on our status bar icon shows our new script listed and active.

Reopening the Manage User Scripts window shows:

• Our new script listed in the column on the left
• The websites/pages included
• An option to disable the script (can also be done in the context menu)
• The ability to edit the script
• The ability to uninstall the script

If you choose to edit the script you will be asked to browse for and select a default text editor of your choice (first time only). Once you have selected a text editor you can make any changes desired to the script.

We decided to test our new user script on the site. Going to the comment box at the bottom we could easily resize the window as desired.

The Comment box definitely got a lot bigger.

Conclusion

If you prefer to keep the number of extensions to a minimum in your Firefox installation then Greasemonkey and the Userscripts website can easily provide that extra functionality without the bloat. For added auto website script detection goodness see our article on Greasefire.

Note: See our article here for specialized How-To Geek User Style Scripts that can be added to Greasemonkey.

Links

Download the Greasemonkey Extension (Mozilla Add-ons)

Install the Textarea & Input Resize User Script

Visit the Userscripts.org Website

Visit the Userstyles.org Website

Go to Source Article at How to Geek

Brought to you by House of Tech.
For more information and discussion, please visit our Forum and do not forget to subscribe to us on Twitter.

Subscribe now

Filed under: Developer, Mozilla, Browsers

When it comes to making web pages, I can whip up a rounded div or add a splash of gradient for a nice fade effect successfully with little trouble, but like many, when trying to deduce out why some stupid DIV is misbehaving, I can waste an entire day spinning my wheels.

Checking out the various blogs and forums are of course a great resource, but probably my most useful and productive help comes courtesy of my favorite Firefox add-ons.

Like many, I have Firebug, Greasemonkey, IEView, and the like at my disposal, but here’s a list of what I would consider five lesser-spoken but certainly “must have” additions to any web developer’s little bag of tricks.

• View Source Chart – I’m sure some might disagree on this, but aside from simple DOM structure, for me, trying to mentally visualize HTML boundaries can be really freaking hard, even if the code is well formatted. To make the job easier, View Source Chart is a godsend. When run, it blocks off boundaries, color codes them, and presents everything in lightning speed no matter how munged up the code is! Also, as an added bonus, you can take advantage of the built-in Ctrl + and – zooming features to help decoding even the most complex nested DOM structures. Indeed, when it comes to navigating HTML source, View Source Chart further proves that a picture is worth a thousand words.

• JSONView – Out of the box, Firefox has no problems showing pretty, color coded XML…but what about JSON? Try to open a JSON document and you’ll be prompted to download it and from there open it with your favorite text editor. What a pain! JSONView solves this problem by showing the JSON information neatly formatted and prettified in your browser window. Best of all, even better than viewing XML files, even if the JSON document contains errors, JSONView will still show the raw text.

• Link Checker – Has this ever happened to you? You go ahead and publish a web page with a few dozen links and weeks later, you find out that the 17th one on the list was dead and you never knew it. Well, Link Checker to the rescue! Once added, you can click on the “Check Page Links” listing under the Tools menu and it will highlight not only the good links, but also point out the dead links in bright red. Also, for added convenience, if you right click on your tool bar, Link Checker can be added as a custom icon for super easy access.

• Poster – When it comes to testing out web services, Poster is a huge time saver. Before Poster, if I wanted to test out an API call, I’d have to whip up some little web script, add in some debug statements and overall, pretty much waste a bunch of time that I could be spending on something way more useful. WIth Poster, you can make HTTP requests, set the entity body, and content type.

• Font Finder – Often, I’ll be poking around the interwebs and see a really sharp looking representation of a font and wonder “Hey! I wonder how that’s done!”. Prior to installing Font Finder, I’d have to poke around the source and find exactly which CSS is being used which was quite time consuming. With Font Finder, I simply highlight an interesting bit of text, right click on it and bring up the Font Finder sub menu. As an added bonus, I can even perform inline replacements to test new layout live in the browser window.

So, there you have it – do any of you use other lesser known, must have addons? If so, be sure to leave ‘em in the comments!

Go to Source Article at Download Squad

Are you looking for a quick and simple way to view the contents of the cache in Firefox? Then you will definitely want to see how easy it can be using the CacheViewer extension.

Note: CacheViewer is a front-end app for easily accessing and searching the memory cache.

Before

Viewing the cache in Firefox using “about:cache” provides some information about the contents but may not be the most efficient method available for some people.

CacheViewer in Action

Once you have installed the extension there are three easy ways to access your new cache viewer. The first is using the “CacheViewer Command” available in the “Tools Menu” and the second is using the keyboard shortcut “Ctrl + Shift + C”.

The third way is by adding a “Toolbar Button” to your browser’s UI. All three work equally well…choose the method that best suits your personal needs.

When you access the “CacheViewer Window” this is what it will look like. You may decide to resize it and move (or hide) some of the columns for the best viewing. You can easily scroll through the cache contents and preview images if desired as shown here.

If you keep the “CacheViewer Window” open you can refresh it as you browse using the “Refresh Button” in the lower right corner. This is a nice, quick, and very simple way to access the cache on demand and save items to your hard-drive if desired.

Note: The “CacheViewer” can also be set to open in a new tab instead (see “Options”).

Options

Choose whether “CacheViewer” opens in a separate window (default) or in a new tab.

Conclusion

If you want a quick and simple way to view the cache in Firefox then the CacheViewer extension is just what you have been looking for.

Link

Download the CacheViewer extension (Mozilla Add-ons)

Go to Source Article at How to Geek

Anyone who has used Opera will be familiar with the information presented for the webpage that is currently loading in the browser (i.e. number of images loaded). If you would like to have that same functionality in Firefox then join us as we look at the Extended Statusbar extension.

Before

Here is the default setup for Firefox…not a lot of information available to indicate exactly how much of the webpage has already loaded versus what has not. For some people this is enough but what if you like more details?

Extended Statusbar in Action

You may be curious about the information that the Extended Statusbar extension will provide. The information includes:

• Percentage of the webpage loaded
• The number of images loaded
• Bytes downloaded
• Average download speed
• The load time

After emptying the cache we once again reloaded the HTG homepage. The default style/mode is “Classic Style” and the “webpage load information” will be displayed within your “Status Bar” as shown here.

The information available after the webpage finished loading in “Classic Style”.

If you prefer “Slim Mode” this is how your “Status Bar” should look afterwards…very condensed.

For those preferring the “New Style” a temporary addition will appear above your regular “Status Bar” and disappear just a few seconds after the webpage has fully loaded (unless changed in the “Settings”).

Settings

The “Settings” are set up in two different ways. For those who prefer to use the “Classic Style & Slim Mode” these are the options available to you.

If you prefer the “New Style” then you will have a whole different set of options available. Notice that you can exclude certain webpages and set a custom style if desired.

Conclusion

If you have been wanting to add Opera style webpage loading information to your “Status Bar” then you should definitely give this extension a try.

Links

Download the Extended Statusbar extension (Mozilla Add-ons)

Go to Source Article at How to Geek