Web Browser Wednesday

As websites continue to become more and more AJAXified I believe that bookmarklets are going to become a larger driving force. Some of you may not be familiar with bookmarklets, so I was trying to think of a good way I could explain them. When I stumbled upon the Wikipedia article I thought it couldn’t be said any better:

A bookmarklet is a small JavaScript program that can be stored as a URL within a bookmark in most popular web browsers, or within hyperlinks on a web page. Because Internet Explorer uses the term favorites instead of bookmarks, bookmarklets are also less commonly called favelets by users.

Bookmarklets can be saved and used like normal web page bookmarks. Therefore, they are simple “one-click” tools that can add substantial functionality to the browser. For example, they can:

• Modify the way a web page is displayed within the browser (e.g., change the font size, background color, etc.).
• Extract data from a web page (e.g., hyperlinks, images, text, etc.).
• Jump directly to a search engine, with the search term(s) input either from a new dialog box, or from a selection already made on a web page.
• Submit the page to a validation service.

There are all kinds of services that provide bookmarks, especially for browsers that don’t support extensions or add-ons, like Opera. The problem is trying to find ones that are actually useful to you. Below I have categorized the different bookmarklets depending on what you are trying to do. I have quite an extensive collection of bookmarklets that I have gathered over the years with my two primary sources being SquareFree and OperaWiki. I’ll be mashing the two sources together to bring you my favorites, and each one will have images signaling which browsers they work with (Firefox 2 , Internet Explorer 7 , and Opera 9 ).

Note: To use any of the following bookmarklets just hold down the left mouse button and drag the hyperlink to the bookmark toolbar in your browser. 

–Hyperlink Manipulation–

• Color code links  
  
  Makes all internal links on a site red, external links blue, and links pointing to the current page (internal bookmarks) orange.
• Hide visited hyperlinks  
  
  Removes all hyperlinks that you have already visited on a site, therefore making it easier to see which links you still need to open.
• Rewrite redirects  
  
  This script will rewrite all URL’s to point directly to the source instead of routing through a redirect URL.
• Increment URL  
  
  Increases the last number in the URL by 1. This will often work with sites where you go through multiple pages, and therefore simulates pressing the “Next” link.
• Decrement URL  
  
  Decreases the last number in the URL by 1. This will often work with sites where you go through multiple pages, and therefore simulates pressing the “Previous” link.
• Generate TinyURL   
  
  Creates a TinyURL for the current site.
• Linkify
  
  Make all plain-text URL’s into hyperlinks.

–Form Manipulation–

• View password  
  
  Shows password field in plain text instead of asterisks. 
• Remember passwords
  
  Some sites try to block passwords from being stored by using the “autocomplete=off” option in the form. If a website is blocking the storage of a password using this option (such as Yahoo! Mail) then it will remove it from the HTML so that the browser can store the password. 

 –Appearance Manipulation–

• Remove bloat  
  
  Eliminates all occurrences of Flash, Java, music, and third-party iframes.
• Disable StyleSheets  
  
  Turns off all stylesheets which might be useful for hard-to-read websites.
• Slowly load the site
  
  Choose how many characters to load on the site each second. Might be useful to test what your site looks like on a dial-up connection by setting the character limit to something low.
• Duplicate tab
  
  Opens the current site in a new tab. 
• Highlight search term   (submitted by “edwest”)
  
  Prompts for a search term that you would like to highlight on the current page.
• Ultimate Highlight   (submitted by “Chad-)”)
  
  Prompts for a search term to be highlighted. It will also display a box in the upper-right corner of the screen with the number of results on the page and a link to start a new search.

–Cookie Manipulation–

• Remove site’s cookies  
  
  Deletes all cookies created by the current site.
• View site’s cookies  
  
  View all cookies created by the current site.
• Transfer site’s cookies  
  
  Transfer cookies created by the current site to a different browser. This bookmarklet will give you the necessary code to re-create a specific cookie in a different browser.

–Other Bookmarklets– 

• Calculator  
  
  A popup window where you can enter in a simple calculation such as “7 + 4″ and have it return the sum of those two numbers.
• ASCII table  
  
  Shows the ASCII character table in a new window
• WebColors  
  
  Shows the 216 “browser-safe” colors with their corresponding hex codes.
• Scroll by Dragging   (submitted by “Chad-)”)
  
  Executing this bookmarklet will turn the cursor into a scroller and executing it again will return it back to normal.

There you go…now you can start to utilize the power of bookmarklets. If you’re a Firefox user, than many of the bookmarklets mentioned above can also be found in extensions, such as the Linkify. Personally I prefer to use the bookmarklets so that I keep my extensions list to a minimum, and also because I don’t want an extension analyzing every site that I visit when it really isn’t necessary.

There are many more bookmarklets available, so I tried to keep the list concise, yet thorough. If you know of a bookmarklet that you can’t live without, let us know so that we can add it to the list.