Bookmark Llama desktop logo

The Ultimate Guide to Bookmarklets

A person stood next to a block of code

What are Bookmarklets?

A bookmarklet is a pocket-sized powerhouse that can harness the potential of JavaScript to deliver immediate, tangible alterations to any website. Unlike traditional bookmarks, which serve as placeholders for our favourite websites, bookmarklets are embedded with JavaScript code. This means that when a user clicks on a bookmarklet, they activate a specific JavaScript function on the current page instead of being redirected to a new webpage. This can lead to various actions, from altering a page’s design to extracting particular data or introducing new interactive features.

History of Bookmarklets

The evolution of bookmarklets is closely tied to the rise of JavaScript. Brendan Eich, the developer of JavaScript at Netscape, pioneered the javascript: URL in 1995. He imagined these URLs to serve as typical links but with the distinct capability of being bookmarked. This design not only facilitated generating a new document with a straightforward JavaScript expression, like javascript:'hello, world', but also allowed for the execution of scripts directed at the current document’s DOM, such as javascript:alert(document.links[0].href).

Steve Kangas of bookmarklets.com is credited with coining the term “bookmarklet,” inspired by Netscape’s JavaScript guide. Before his naming convention, Tantek Çelik had labelled these scripts “favelets”; however, you will rarely hear them by this name.

How Do Bookmarklets Work?

Basic principles

Bookmarklets utilize the “javascript:” protocol, which directs the browser to execute the subsequent JavaScript code. When a user clicks on a bookmarklet, instead of navigating to a different webpage like a traditional bookmark, the browser interprets and runs this code directly in the current page’s context. As an example, you could try adding a bookmark in your browser with the following URL javascript:alert('hello world') once created, an alert box will appear on your screen if you click this bookmark.

Bookmarklets vs. Extensions/Plugins

Bookmarklets and browser extensions both enrich a user’s browsing experience, but they diverge significantly in their mechanics, capabilities, and applications.

Extensions: These are often persistent-fledged applications that amplify a browser’s capabilities. The main reasons to use them are:

  • Power and Reach: Extensions can interact intimately with the browser’s architecture, granting them broader functionalities beyond just web page manipulation; typically, modern extensions are acting as full-fledged applications with access to a set of APIs that are not usable by bookmarklets
  • Persistence: Extensions can operate precisely when and where you want them to automatically; this makes them perfect for more permanent changes to a website.
  • Extension Library: Extensions can be sourced from a reputable store tailored for your browser, ensuring you always have the latest version and facilitating effortless sharing.

Bookmarklets: These are often small snippets of code that you can rapidly build with only basic Javascript knowledge:

  • Lightweight Design: Bookmarklets operate without needing installation; you add the bookmarklet to your bookmarks and click it on the page where you want it to run.
  • Ephemeral: Bookmarklets require manual activation, and their effects cease upon refreshing the page. Depending on one’s objectives, this can be seen as a drawback or a benefit.
  • Limited Scope: While they offer the advantage of quick, on-the-spot web page modifications, their actions are bound by the limitations of the web page’s JavaScript environment.

The decline of Bookmarklets:

In the early days of the internet, bookmarklets were a big deal for many users. They were handy tools that made browsing easier and fun for those who knew how to use them. However, nowadays, many newer internet users haven’t even heard of them. Bookmarklets are becoming less and less common, and many people are moving on to other tools that fit today’s web trends better.

Limited Support on Mobile browsers

In the age of smartphones, mobile browsing is not just a convenience but a daily norm. However, in this shift, bookmarklets were left behind. Popular mobile browsers either offer minimal support or neglect bookmarklets entirely. An increasing number of global users access the web primarily through their phones, so a substantial fraction of web users are using platforms where bookmarklets are often non-functional.

Content Security Policies (CSP)

With security concerns paramount for developers and end-users, Content Security Policies (CSP) have emerged as a crucial component in safeguarding web content against potential threats. While the intention behind CSPs is a critical tool in the modern web - protecting against cross-site scripting attacks and other malicious intents - it has had an unintentional fallout. CSPs often restrict the execution of inline scripts, which has handicapped the functionality of bookmarklets. Since bookmarklets rely on executing scripts in the current page’s context, they frequently run afoul of these security measures. This unintended consequence has further pushed bookmarklets to the periphery, overshadowed by the overarching need for web security.

Conclusion:

The utility of bookmarklets cannot be denied. However, the combination of changing user behaviours, evolving browser design trends, the proliferation of mobile browsing, and increasingly rigorous security measures, such as Content Security Policies, indicates that the popularity of bookmarklets is on the wane. They might still have niche applications, especially in environments where security policies accommodate them or among web enthusiasts and developers who value their straightforward nature.