Extend websites with custom javascript for improved browsing

Check out the Bookmarkleter Tool

Extend Websites with Custom Javascript

Nearly everyone familiar with using computers to browse the web is familiar with bookmarks. For those few who are not, a digital bookmark is a shortcut link to a website that is stored in a convenient list. One particularly interesting feature of bookmarks is that they are not limited to linking to webpages. In addition to webpage links bookmarks can also be used to inject custom javascript on webpages you are viewing. Bookmarks of this type are called bookmarklets and they provide an interface for a technically savvy user to extend websites to perform tasks not explicitly provided by the website authors.

Security Warning!

NEVER EXECUTE UNVERIFIED CODE AS A BOOKMARKLET

When you use bookmarklets, custom code is executed on the webpage you are viewing with the full permissions of your current user session. This means that anything that can be done on the website normally can be triggered by the code that is executed by the bookmarklet. For this reason you should only execute code that you trust.

With that security warning out of the way, bookmarklets are a great way to author simple code snippets to make your browsing experience more enjoyable. Personally I would be excited to see a more sophisticated repository of trusted 3rd party bookmarklets, but I am unaware of such a service as of now. Bookmarklets are a compelling tool not just in their functional usefullness, but also in their approachability as an entrypoint into more general web technology. My goal here is to provide a simple example that the reader can reproduce for themselves and serve as a jumping off point for more exploration and learning. I hope that you will find joy in customizing your web experience as you learn to take ownership of your environment.

Hello World

As your first bookmarklet we will write code to alert the message "Hello World!" in the browser. The code to do this is as follows:

javascript:alert("Hello World!")

Let's break this down a bit. The leading javascript: indicates that the bookmark is actually a javascript url and should be executed as such. The alert("Hello World!") is the javascript code that will display a pop-up in your browser with the message "Hello World!".

Now that we have the code we need to save it as a bookmarklet in our browser. Some browsers prevent you from saving bookmarklets directly, but in Firefox you can directly right-click a bookmarklet link and save it.

Here is a bookmarklet link for our example: Hello World. If you left-click this link the code will be run and you should see an alert with the message "Hello World!". If you right-click this link in Firefox you will see the option to Bookmark Link, which will pop up the bookmark creation modal.

The code for the bookmarklet link shown above is:

<a href="javascript:alert('Hello World!')">Hello World</a>

If you are using Chrome or Safari the process of saving bookmarklets is a bit more manual. First you will need to add a regular bookmark to the current webpage. Then you must edit the bookmark url to be the javascript url provided above. The steps to create a bookmarklet in Chrome are demonstrated in the images below.

1. Open Chrome and select "Bookmark This Tab" from the Bookmarks dropdown.

   

2. Update the bookmark name to "Hello World". Then click the "More..." option.

   

3. Paste the javascript url into the URL field and click save

   

4. Select the "Hello World" bookmarklet from the Bookmarks dropdown.

   

5. The page will alert "Hello World!"

   

Base64

One quirk of bookmarklets is that because they are actually javascript urls you must url encode the text that is used. Additionally, browsers do not make it particularly easy to work with bookmarklets. For example when you want to edit a bookmarklet the code will appear as a single line of text that is not very readable or user friendly to edit. What I have found is that it is easier to write my code someplace else and then base64 encode it into a bookmarklet form. This approach provides a way to register the bookmarklet url as a single line and without worrying about url encoding at all. I think of this as akin to the packaged form of a bookmarklet. From our previous example we had:

javascript:alert('Hello World!')

If we take the script portion and base64 encode it you get:

YWxlcnQoJ0hlbGxvIFdvcmxkIScp

which would become a javascript url like:

javascript:eval(atob("YWxlcnQoJ0hlbGxvIFdvcmxkIScp"))

In the above block we must first base64 decode the encoded script using the native atob function. Then we evaluate the decoded script using javascript eval. Some may disapprove of the use of eval, but it is defensible when you consider the entire purpose here is to execute the provided code and that there is no chance of user generated content being injected. Think of this as more similar to a script tag in html, or just the necessary boilerplate for a bookmarklet distribution. Additionally, please see the earlier warning. Never execute unverified bookmarklet code. To inspect encoded bookmarklet code yourself, just base64 decode the encoded form to view the raw javascript.

Check out this simple tool for packaging and unpackaging your bookmarklets.