HTML is great.  It allows you to design the structure of your page.  CSS is great.  It allows you to style that structure in an almost infinite number of ways.  JavaScript is great.  It allows you to implement more advanced interactivity in your page.  Furthermore, JavaScript can reside outside of your webpage.  You can store a small set of JavaScript instructions inside of a bookmark.  This bookmark will allow you to run the contained script on any page you have active when that bookmark is visited.  This bookmarked JavaScript  is referred to as a “bookmarklet”.

At its core, a bookmarklet is very simple: it is a normal bookmark with a specially formatted URL.  The formatting of the URL is very similar to how you might structure JavaScript that is embedded for execution inside of an anchor tag’s HREF attribute.  For example:

<a href=”javascript:alert(‘Hello world!’);”>Click Me</a> produces Click Me

The code is prefixed with “javascript” to let the browser know that we aren’t trying to access an actual URL.  Instead, the browser is being instructed to execute our “URL” as JavaScript.  In its present state, the above link is bookmark-able.  However, it’s a little lackluster.  When we step up the complexity of the JavaScript, we can come up with great things.  It is important to keep in mind that there are size limitations on length of JavaScript able to be stored in bookmarklets.  These limitations depend on your browser, but generally speaking you’ll want to keep the length of your JavaScript beneath 2,000 characters.  This can often be helped by minifying your code.  There are numerous minification options available out there, but Online YUI Compressor is a good bet.  In addition, you can get around this limitation by having your bookmarklet add a reference to an external JavaScript file to the current page.  This can broaden your horizons greatly, but you’ll need to account for secure connections and not compromising those with your external script’s inclusion.

One impressive bookmarklet example is X-Ray Goggles on Mozilla’s Hackasaurus site.  With it, you can “remix” web pages and share your own custom work with the world.  Give it a try!

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts