Olivia A. Gallucci

Bookmarklets

I sometimes use bookmarklets to customize my web-browsing experience, boost productivity, or make web pages more accessible. While browser extensions and plugins provide simple alternatives to most use cases of bookmarklets, I find that bookmarklets give me more control in terms of privacy and performance.

These small snippets of JavaScript code tucked away in browser toolbars can unlock a world of possibilities. In this blog post, we will explore how bookmarklets harness the power of JavaScript to enhance accessibility, enable seamless integrations, and turbocharge productivity.

What are bookmarklets? 

A bookmarklet is JavaScript code that can be saved as a bookmark in a web browser. When they are clicked, the JavaScript code is executed on the current web page, allowing the user to perform a given action or add functionality to the page.

Bookmarklets enhance the browsing experience by adding custom features or shortcuts. They can modify the appearance of a webpage, extract information, perform calculations, or interact with other web services. Bookmarklets are typically call an API or access the webpage’s Document Object Model (DOM) to manipulate its content. An example bookmarklet is shown below. 

Dictionary bookmarklet

Here is an example bookmarklet use case. To use it, highlight a word on a webpage and click the bookmarklet. A new tab will open with Google’s definition of the word. 

javascript:d=""+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g,"%20,");if(!d)d=prompt("Enter%20Word:",%20"");if(d!=null)location="http://www.google.com/search?q=define:"+escape(d).replace(/%20/g,"+");void(0);

View Raw or Gist.

Bookmarklet use

To use a bookmarklet, most browsers require you save it as a bookmark in your browser’s bookmarks toolbar or bookmarks menu. When you want to use the bookmarklet, you click on the bookmark, and the JavaScript code is executed on the open web page. More detailed steps are described below.

How to use bookmarklets 

To use the bookmarklet in most browsers, follow these steps:

1. Create a new bookmark in your web browser by right-clicking on the bookmarks bar or the bookmarks menu and selecting “Add Page” or “Add Bookmark.”
2. Give the bookmark a name. For example, you can name it “Definitions.”
3. In the URL or Address field of the bookmark, copy the entire JavaScript code for the bookmarklet you want to use. 
4. Save the bookmark. It should now appear in your bookmarks bar or bookmarks menu.
5. When you want to use the bookmarklet, open the webpage you wish to perform the action on.
6. Click on the bookmark you just created. This will execute the JavaScript code and open a new tab or window with the desired functionality.

Why bookmarklets? 

People use bookmarklets for various reasons, including customization, productivity, accessibility, information gathering, and integration with external services. 

1. Customization

Enhance the browsing experience by adding JavaScript to web pages to modify the site’s appearance, behavior, or content. 

2. Productivity

Next, you can automate repetitive tasks or simplify complex actions. Bookmarklets can perform actions such as filling out forms, extracting information, bookmarking pages, translating text, or generating custom reports. 

3. Accessibility

Improve accessibility and usability of websites by adjusting font sizes, colors, or contrast. Additionally, bookmarklets can provide text-to-speech functionality and standardized navigation techniques.

4. Information gathering

Extract information from web pages or perform web scraping tasks. Bookmarklets can retrieve data such as article metadata, prices, stock information, or social media metrics. 

5. Integration with external services

Bookmarklets can integrate with external web services or APIs. They can interact with social media platforms, bookmarking services, project management tools, or communication tools, enabling users to share content, save bookmarks, or perform actions on other platforms directly from the current web page.

Conclusion on bookmarklets

Overall, bookmarklets provide a versatile and lightweight approach to augmenting the browsing experience. Whether for accessibility enhancements, seamless integrations, or increased productivity, these snippets of JavaScript code empower us with capabilities right from our bookmarks toolbar!

If you enjoyed this post, consider reading Connecting Angular Apps to MySQL.