Bookmarklets – a cool personal dev tool
I have just found out what bookmarklets (aka favelets – a term coined by my friend Tantek back in the early 2000s) are and I like ’em! So what are they?
How can a bookmarklet like Tota11y be used? First, the bookmarklet’s link needs to either be saved as a bookmark, dragged into the browser’s bookmark toolbar, or be available to be clicked on a web page (used as a normal link within an
href attribute in an
<a> element). Second, while on a valid website, the bookmark containing the bookmarklet link should be clicked to run the bookmarklet’s code.
How bookmarklets work
First you should know (or be reminded) that in a browser, bookmarks are made up of URIs (uniform resource identifiers). Each URI consists of a protocol such as
file:, etc., which is followed by a string. An example is
https: is the protocol, and the string is the domain.
There is also a
Something to note is that a link usually works by sending the user to a new page. To prevent a bookmarklet from triggering a page reload, the JS code that makes up the bookmarklet should return an undefined type. To do this, an anonymous, self-executing function can be used (i.e. one that does not return a value, doesn’t have a name, and executes immediately).
The Tota11y bookmarklet example has a link that points to a hosted JS file. This is because the link would be pretty messy if all the JS code was included as a single string within it. Below is what the Tota11y bookmarklet’s link (in a beautifed format for readability) looks like:
In order for a bookmarklet to point to a hosted JS file, its URI needs to contain a few things. At the very least,it should create a new script element, make this element’s source (src) the hosted JS file, and then append this script to the head of the document.
Making your own bookmarklet
I tried making a bookmarklet and found it was really easy to get started.
I decided that I’d try something really simple that does not use a hosted JS file, but contains all the JS code in one line. So I made a bookmarklet to put a red border around each paragraph on a page. Here’s what it looks like:
As mentioned in the previous section, “How bookmarklets work”, a bookmarklet can be made available to use as a link. To do this, the bookmarket’s URI is placed inside the
href attribute of an
<a> element, that can then be dragged into bookmarks or the bookmark toolbar.
If you like, try either clicking the following link, or drag it into your bookmarks and click on the resulting bookmarklet (refresh the page to remove the effects)!
Here is the code that makes up the above link:
Some things to note
A browser will automatically encode any characters within a URI that it does not understand (such as quotation marks, spaces etc.) so that a bookmarklet can run smoothly.
As bookmarklets contain JS, there are security concerns to be aware of when using bookmarklets created by others. However, making a few of your own bookmarklets for personal use, or using ones that have been shown to be trustworthy, is fine. More than fine – it’s great!
Why are bookmarklets so great? You can make a separate folder for your bookmarklets within your bookmarks folder. Then you can place this bookmarklets folder in your bookmark toolbar for your own list of easy-access, personal dev tools.
Sometimes browsers may cache bookmarklet code, so changes made after it is added won’t show up.
Check out this nice video on bookmarklets (Chrome-focused) that covers what I have written about in the “Making your own bookmarklet” section.
I am completely new to bookmarklets so I may not have covered every essential thing regarding them. I really found them super easy and nice to get started on though. As usual I learn more about them as I keep trying them out!