Table of Contents
Bookmarklets have been around for a while. According to Wikipedia, they were introduced in Netscape 2 back in 1995. Surprisingly, they aren't widely known, despite their potential usefulness. But what are Bookmarklets exactly?
In short, a Bookmarklet is a combination of a scriptlet and a bookmark. They are sometimes also referred to as 'favelets.' Bookmarklets allow you to customize your browser by adding your own buttons in the form of bookmarks. With a single click, you can run any code that you could run in your browser's console.
While an alert pop-up is not that useful, you can use Bookmarklets for more powerful tasks. Remember, you can do anything you'd typically do in the console. You can navigate to any website, access the document object in your code, read specific data displayed on the page, and even manipulate and modify the page's source code. For example, you can aggregate the prices of all products from a list on your favorite e-shop or override the CSS directives on a website to add a Dark Mode that it doesn't support natively. The possibilities are endless with Bookmarklets.
One of my favorite examples of a Bookmarklet is what I call an 'ENV switcher.' If you work in web app development like me, you often work with projects that run on multiple environments: PRODUCTION for end users, various TESTING environments, and a LOCAL environment for your own development and testing. Switching between these environments can be a frequent task. Typically, these environments use the same URL route list, so all you need to do is modify the host part of the URL to 'localhost' or '127.0.0.1' or add/remove a 'test' prefix or suffix somewhere. It's a simple but tedious task. This is where Bookmarklets come to the rescue.
You can access the 'window.location' object to adjust the current URL and create a list of links to the same location on each of the environments. Using the 'document' object with its 'createElement()' and 'appendChild()' methods, you can create a new '<div>' element and add a series of '<a>' links pointing to the different environments. Append the '<div>' to the document's '<body>', and there you have it—a simple dialog to switch the environment, which we call an 'ENV switcher.' You can further enhance it by adjusting the CSS via the style attribute/property, adding a close button in case of accidental clicks on the bookmarklet, or even adding a partially transparent black overlay to make the dialog stand out on the screen. The possibilities for Bookmarklets are virtually limitless, offering ways to save your precious time in various scenarios.