How to Build a Chrome Extension from Scratch | Chapter 2: Bookmarklets

Published in

Heptagon

6 min readFeb 28, 2019

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 customization to these extensions. NOTE: 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

What is a bookmarklet?
Displaying an Alert message using Bookmarklet
Changing the background color of the paragraph using Bookmarklet
Replacing paragraph with some other text using Bookmarklet
Summary

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 Java Scripts 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 on 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.

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

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

The bookmarklet now sits in the bookmarks bar.

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 the paragraph tag on a web page. 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

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

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

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 web page 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.

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

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

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

After clicking on the marked bookmarklet in the bookmarks bar, the paragraphs on the web page 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

I 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 on any web page 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.