Beginner's Guide to Bookmarklets: Elevate Your Browsing and Coding Experience with Tips and Tricks
In this brown bag presentation, Petr delves into the world of Bookmarklets, offering insights into their powerful capabilities. Learn how to harness the potential of these browser tools to streamline your web experience and save valuable time.
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.
Here's how it works: add a new bookmark on any tab of your browser, typically via the browser's menu or by pressing Ctrl+D. After saving the bookmark, right-click it and open the 'Edit bookmark' dialog. Then, change the URL to 'javascript:{}'. Afterward, place your JavaScript code inside the curly braces and save the bookmark. For example, you can insert: 'alert('It works!').' Now, whenever you click the bookmark, the code will run in your browser, and a pop-up window should appear, reading 'It works!'
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.
