The Secret Power Of Bookmarklet

Bookmarklets are special links that users can add to their browser’s favorites. These special links include code (i.e. not just a target URL), and they trigger various kinds of useful functionality, allowing you to modify and extend any web page. Once you begin using and building your own, you will no longer see web pages as static elements that you have no control over. With bookmarklets, you have the power to bend any web page to your needs.

How bookmarklets work

Bookmarklets are more than static URLs. They are short bits of JavaScript, loaded by a link, that operate on the currently open page. Thus, the code becomes an extension of the current page and can interact with any element on it. The changes to the page are temporary and are not preserved. When the user refreshes the page or follows a link, the JavaScript is lost.

Upon returning to the page, the user must click the shortcut again to enable the bookmarklet.

5 handy bookmarklets to get you started:

  • Bit.lyFew things are as convenient as a tool that allows you to quickly shorten and share URLs. With the bit.liy.bookmarket, instead of copying a full URL path and sharing it, you can click a link to generate a short version of it. You also gain the ability to track how often that link is used. Not only that, but the link’s shortness ensures that the link won’t break in an email, as longer complex URLs often do.
  • Shortwave- Developers often go all out and pack a ton of functionality into a single bookmarklet. Such is the case with shortwave by Shaun Inman. This powerful shortcut packs a ton of search functionality into a single place. You can search Google, Amazon, Netflix and loads of other major sources. The only gotcha is that you have to memorize commands to work with it. This hurdle aside, once you get used to it, you’ll quickly become very reliant on it.
  • ReCSS- Recss is a simple script that refreshes the CSS for a page but not the entire page itself. On the surface, this might seem like an odd thing to want to do. But consider if you are building an application or process that is broken by a refresh. For example, if you are styling an error message, instead of repeatedly performing an action that generates an error, simply refresh the CSS to test different styles. When the time comes, you’ll love this one.
  • AutoPopulate- If you have had to build many long forms, then surely you sympathize with people who are frustrated with having to fill out forms over and over again. This is where autoPopulate comes in. The functionality here is rather simple: a bookmarklet that automagically populates form fields with recurring data. You can also build a custom version with your own values if needed.
  • Instapaper- Instapaper is an entire service built around a bookmarklet. The handy tool saves pages that you would like to read later. It conveniently syncs with your iPhone, iPad and Kindle, allowing you to easily pick up where you left off reading.