Do It Yourself Technology

How to Build a Chrome Extension | Chapter 2: Bookmarklets

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the contents of Chapter 2: Bookmarklets

Contents

What is a Bookmarklet?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands to help you quickly perform some very common web page tasks. In technical terms, it is an unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.

Don’t worry if you don’t understand the technical bit. In layman terms, Bookmarklets are simple programs that act in the same way that an app works on your mobile. For example, The Deletionist deletes the text in the page when clicked. 

Note: A Bookmarklet is activated only when we click it.

Displaying an alert message using Bookmarklet

Once we have a fair understanding of bookmarklets and how they work, let’s start off by creating a very simple bookmarklet that displays an alert message ‘Hello’. Follow the below-mentioned steps to create a bookmarklet for yourself.

Note: As discussed in Chapter 1, we’ll be using “Visual Source Code Editor” for all our source code editing needs.

Alert Popup create file- Chrome Extension

Step 1: Create a folder Bookmarklet to store our HTML file that will contain the code for displaying the alert message.

Step 2: Next, create a file under that folder and name it index.html. The file index.html will have the following code.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Hello</title>
</head>
    <body>
        <h1>Bookmarklet</h1>
        <p>
        This is <a href="javascript:{function(){alert('Hello');})()">Bookmarklet</a>
        <br/>
        <br/>
        Press Shift+Command+B(mac) or Shift+Ctrl+B to show bookmark bar is not visible.
        <br/>
        Drag the bookmarklet and place it in bookmarks bar
        </p>
    </body>
</html>  

Step 3: Save index.html, and use file explorer to go to the location where we have saved index.html.

Step 4: Open the file index.html in Chrome browser and you will see the following

Alert Popup Bookmarklet- Chrome Extension

Step 5: Drag and drop the marked Bookmarklet to the bookmark bar.

Alert Popup Bookmarklet- Chrome Extension

The bookmarklet now sits in the bookmarks bar. 

Alert Popup Result- Chrome Extension

When clicking Bookmarklet in the bookmark bar, our code displays an alert message ‘Hello’. Yes, creating a basic bookmarklet is that simple.

Changing the background color of the paragraph using Bookmarklet

Great! Now we know how to create a simple bookmarklet that displays an alert message when clicked upon. Taking it a step further, let’s build a bookmarklet that can change the background color of paragraph tag in a webpage. Please follow these steps.

Step 1: Create a folder Bookmarklet to store our HTML file that will contain the code for displaying the alert message.

Step 2: Create a file under that folder and name it index.html. The file index.html will have the following code.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Hello</title>
</head>
    <body>
        <h1>Bookmarklet</h1>
        <p>
        This is <a href="javascript:(function(){
          	let script=document.createElement(‘script’);
			script.src=‘https://shiffman.net/a2z/js/bookmarklet.js';
			document.body.appendChild(script);">Bookmarklet</a>
        <br/>
        <br/>
        Press Shift+Command+B(mac) or Shift+Ctrl+B to show bookmark bar is not visible.
        <br/>
        Drag the bookmarklet and place it in bookmarks bar
        </p>
    </body>
</html>

Step 3: Save index.html, and use file explorer to go to the location where we have saved index.html.

Step 4: Open the file index.html in Chrome browser and you will see the following

BG Paragraph Bookmarklet 1- Chrome Extension

Step 5: Drag and drop the marked Bookmarklet to the bookmark bar.

BG Paragraph Color Bookmarklet- Chrome Extension

Now the same Bookmarklet sits on the bookmark bar but with different functionality.

BG Paragraph Color Result- Chrome Extension

As you click on the Bookmarklet the whole paragraph of text in our Index.html got its background colored in purple. Easy, Wasn’t it?

Replacing paragraph with pre-filled text using Bookmarklet

Next, let’s try replacing all the paragraphs on any webpage with our own text “Paragraph Replaced” using a bookmarklet.

Step 1: Create a folder Bookmarklet to store our HTML file that will contain the code for displaying the alert message.

Step 2: Create a file under that folder and name it index.html. The file index.html will have the following code in it.

Note: Here we add “Paragraph Replaced” text to the code.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Hello</title>
</head>
    <body>
        <h1>Bookmarklet</h1>
        <p>
        This is <a href="javascript:(function(){
          	console.log('Bookmarklet starting');
          	var paragraph = document.getElementsByTagname('p');
          	for(elt of paragraph)
          	{
          		elt.innerHTML = 'Paragraph Replaced';
          	}
          	))()">Bookmarklet</a>, which replaces the paragraph
        <br/>
        <br/>
        Press Shift+Command+B(mac) or Shift+Ctrl+B to show bookmark bar is not visible.
        </p>
    </body>
</html>

After typing in the code save the file. Now go to the same location where the index.html file has been saved, and open that file with Google Chrome.

Paragraph Replaced Bookmarklet A- Chrome Extension

Step 3: Save index.html, and use file explorer to go to the location where we have saved index.html.

Step 4: Open the file index.html in Chrome browser and you will see the following

Paragraph Replaced Bookmarklet B- Chrome Extension

Step 5: Drag and drop the marked Bookmarklet to the bookmark bar.

Before Paragraph Replace- Chrome Extension

Before clicking the Bookmarklet your web page looks something like the image above.

Paragraph Replaced Result- Chrome Extension

After clicking on the marked bookmarklet in the bookmarks bar, the paragraphs in the webpage will be replaced and will look something like the image above.

If you want to change the name of the bookmarklet, just right-click on the bookmarklet, go to edit, there you can edit the name.

Summary

Hope the Bookmarklet chapter was able to pique your interest in building a Chrome extension.

We have learned how to display an alert popup message, changing the background color of paragraphs in any webpage and replacing all paragraphs with any given text, all using bookmarklets.

In the next chapter, we’ll be learning how to change the background color of a paragraph with Chrome Extension. Feel free to reach out for any queries.


Chapter Navigation

Chapter 1: An Introduction to Extensions

Chapter 2: Bookmarklets

Chapter 3: Changing the background color of a paragraph with Chrome Extension

Chapter 4: Replacing paragraph text with your user-given text using Chrome Extension

Chapter 5: Replacing images in a website using Chrome Extension

Chapter 6: Replacing images with your own images using Chrome Extension

Chapter 7: Deploy and Publish your Chrome Extension

Chapter 8: The Atomic Habit Tracker

Reference

‘Programming from A to Z’: https://shiffman.net/a2z/chrome-ext/

2 thoughts on “How to Build a Chrome Extension | Chapter 2: Bookmarklets”

Leave a Reply

Your email address will not be published. Required fields are marked *

three − one =