href attribute of an HTML anchor element (like most links on the web) and this can then simply be dragged to a bookmark bar or added to favourites via the anchor link.
Bookmark functionality in browsers essentially just treats the saved text as a location when a given bookmark is selected, and so bookmarklets are executed via the URL destination of a web browser (the code being run against whatever document is currently loaded). The way this is accomplished is that instead of a usual web resource identifier like
http:// which tells the browser to connect to an address using the HTTP protocol, the
Bookmarklets work in exactly the same way as this. The above can really be seen as one of the most primitive bookmarklets - add the link to your bookmarks and when selected, a basic pop-up will appear which greets you. Most bookmarklets are, however, more useful than this - typically they obtain information from or modify the current page in some way that is useful to the user.
So let's get going
Just before we actually start diving in to making a proper bookmarklet, it's probably worth us talking a little bit about browser support. Any browser which supports usage of the
%20 instead of spaces and using the
() to call the function - for example:
With this knowledge, let's just create a few basic bookmarklets to get some strong foundations with it.
location.href, and changing this value will also redirect the page to a new location, thus we will be using this twice in our script for these purposes. The W3 validator gets the URL to validate through the
uri parameter in the URL, and hence something like the following should be able to accomplish our goals:
Notice that in the above we use
encodeURIComponent to make sure that any characters in the current URL which could cause issues are escaped. Also note that in the above that nesting in an anonymous function is not really necessary, however in my eyes it is still good practice and provides a foundation for future expansion if required.
Another nice example bookmarklet might be one which changes the font on a page. For this one we need to get the
body element of the current document, and then change/add the CSS "font-family" CSS property. Ideally we want our CSS property to have the
This method, when performed upon an element, changes a CSS property (the first parameter) to a specified value (the second parameter) - in many browsers a third property is also supported which allows you to set the priority of the rule (i.e. "important"), brilliant! The only real catch here is that the third parameter isn't supported in IE, but oh well, we don't really care about IE all that much for this example, let's just roll with it. Our approach certainly isn't going to work in all environments or on all websites, but it's a basic example and it should work fine in the majority of use-cases. The finished code for our bookmarklet using the approach we designed above, is as follows:
Getting more complicated
It's not uncommon for bookmarklets to simply be "stubs" which just add a script element to the DOM which brings in an external script, from GitHub for example. Usually this is done by creating a
script element on the page, setting its
src attributes, and then bringing this child element into to the head - so something like the following (line-breaks added here for clarity):
1 2 3 4 5 6
In the above I use the
var keyword in variable creation to ensure that a new local variable is created in case of a naming conflict (like this for example), however bookmarklets commonly avoid using this keyword (it's optional for variable creation after all) due to the space character required and just ensure that a unique variable name is chosen to avoid conflicts.
Math.random() method to insert a random URL parameter - due to the different (random) URL each time the script is executed, the browser should re-download the file each time (hence caching is avoided).
A great example of a "real" bookmarklet being a stub for an external file and using a URL parameter to prevent caching is the fitWeird bookmarklet by Paravel - at the time of writing the bookmarklet code is simply the following stub which brings in a JS file from GitHub and uses
Math.random to prevent caching: