A great approach to expand the functionality of Chromium-based browsers and improve the...

Extensions are a great way to expand the functionality of Chromium-based browsers. Learn how to make a Chrome extension to improve users' browsing experience.

Learn to Create Your Own Chrome Extension from Scratch

How to Make a Chrome Extension

As we look at the steps to create a Chrome extension, we’ll also explore some of the components.

Steps to develop a Chrome extension

This section explains the structure of an extension, the function of each component, and how everything fits together.

Example of a Chrome extension file structure:

Folder structure

Manifest (manifest.json) is the configuration file of a Chrome extension. It is an important file to look after as it provides the browser with a blueprint of the extension and other important information, such as:

Name, description, current version, and icons for extensions.

The Chrome API keys and permissions that the extension needs.

The scripts used in the content, the HTML file used in the pop-up window, the extension service worker files, etc.

{
  manifest_version: 3,
  name: "Name of extension ",
  description: "a detailed description",
  version: "1.0",
  icons: { 
    16: "images/icon-16.png",
    32: "images/icon-32.png",
    48: "images/icon-48.png",
    128: "images/icon-128.png",
  },
  background: {
    service_worker: "service-worker.js",
  },
  permissions: ["scripting", "activeTab"],
}

The manifest

A service worker (previously called a background script) is an event-based script that runs separately from a web page in the background. An extension's service worker is loaded when it is necessary and released when it is no longer required.

It performs various tasks, such as heavy computing work that blocks the main thread, a network request, and listening for various kinds of events (executing some code on installation and uninstallation).

console.log("Hi from background script file")
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
    console.log("Got your message from content.js : ", request);
    sendResponse('Got it');
})

Service worker

Extensions use content scripts to inject code into host pages (websites with which a content script interacts). These scripts contain all the logic that is needed to manipulate the dom like injecting the node, deleting a node, editing the dom, changing the style of an element, etc.

Node is the basic building block of a dom,the whole document. Each element, text and attributes everything is a node

document.addEventListener("click", function(event) {
  if (event.target.tagName === "") {
    chrome.runtime.sendMessage({url: event.target.href});
  }
});

This code listens for clicks on the page and checks if the target of the click is an anchor tag. If it is, it sends a message to the service worker with the URL of the link that was clicked. Note: Make sure to provide activeTab permission on the manifest file.

Content script

When creating a Chrome extension, one of the key features we might want to include is the ability for the extension to communicate between the service worker and content script. Both of them run in different contexts and have different capabilities, such as the service worker's ability to access the browser storage and network, which can be useful for interacting with APIs or caching data.

Chrome exposes chrome.runtime.sendMessage() API to the content script and chrome.runtime.onMessage.addListener() API to the background service worker for these scripts to communicate with each other.

Service worker and content script communication

Many extensions make use of a popup (popup.html) to provide functionality, such as showing more details about the active tab or any content developers want to show. Users can quickly locate it by selecting the Extension toolbar icon. It will shut down immediately when the user navigates away.

Additionally, extensions have an options page (options.html) which allows users to have the option of personalizing an extension by selecting which websites will function.

<!DOCTYPE html>
<html>
<head>
    <title>Extension Name</title>
</head>
<body>
    <button>Click me</button>
    <script src="popup/popup.js"></script>
</body>
</html>

The popup

We will be creating a Chrome extension that replaces all instances of the word "hate" with "love" on a webpage when the Extension icon is clicked.

Create a new file called "popup.html" and "popup.js" in the extension directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Love Replacer Extension</title>
</head>
<body>
    <button id="replace-button">Replace</button>
    <script src="popup.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
  var replaceButton = document.getElementById('replace-button');
  replaceButton.addEventListener('click', function () {
    chrome.runtime.sendMessage({ replace: true });
  });
});

Create a new file called service-worker.js and add the following code:

//listens for the event and fires a event to execute content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.replace) {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.scripting
        .executeScript({
          target: { tabId: tabs[0].id },
          files: ['scripts/content.js'],
        })
        .then(() => {
          console.log('Executed script');
        });
    });
  }
});

Now, create a new file named content.js and add the following code:

// content.js
const elements = document.querySelectorAll('*');
elements.forEach((element) => {
  element.childNodes.forEach((node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      const replacedText = text.replace(/hate/gi, 'love');
 
      if (replacedText !== text) {
        node.textContent = replacedText;
      }
    }
  });
});

Create a popup.html with a script(popup.js) and button which onClick sends the message to service-worker.js. The message is an object with a replace property { replace: true }

The service worker listens for the event in the current tab as mentioned in
chrome.tabs.query({ active: true, currentWindow: true })
and fires a new event to execute content.js using chrome.scripting API.

chrome.scripting API is used to inject JavaScript and CSS into websites so that extensions can make decisions at runtime. Make sure to have scripting permission enabled in the manifest.

Here, the decision is executing the content.js:

chrome.scripting
    .executeScript({
      target: { tabId: tabs[0].id },
      files: ['scripts/content.js'],
    })
    .then(() => {
      console.log('Executed script');
    });

In content.js, we get all elements on the page and iterate through all elements. Again, we iterate through all child nodes of the current element.

Inside each child node, we make sure that the current node is a text node.

If it is a text node, we get the text of the node and replace 'hate' with 'love' text.replace(/hate/gi, 'love').

Now, we check if the text was changed or not. If changed, we replace the original text node with a new one containing the replaced text.

“Love” extension

As illustrated in this tutorial on how to make a Chrome extension, we can see that with basic knowledge of HTML, CSS and JavaScript, it’s easy to develop one. It’s a fun exercise too and can increase productivity by adding new functionality to a browser.

Conclusion

A great approach to expand the functionality of Chromium-based browsers and improve the browsing experience is by creating a Chrome extension. These are small software applications that can be installed in a browser and used in conjunction with online pages. There are many things that one can do with extensions. In this article, we will walk through the process of how to make a Chrome extension from scratch.

Creating a Chrome extension is not as difficult as it may seem. With just a basic understanding of HTML, CSS, and JavaScript, anyone can build a Chrome extension that enhances users’ browsing experience.

"activeTab": Gives temporary access to the current active tab whenever the user invokes the extension.

"scripting": Gives access to inject JavaScript and CSS into websites.

“declarativeContent”: Depending on the URL of a webpage, it enables an extension's action without needing to add host permissions or inject a content script.

There are limitless things that we can do with extensions like text-to-speech, blocking ads and pop-ups, setting dark mode, enabling time tracker, etc. It’s a great approach to expand the functionality of Chromium-based browsers and improve the browsing experience for users.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

How to Make a Chrome Extension

Author

Arjun Adhikari

How to Setup & Use Tailwind CSS With Next.JS

How to Create a Slider in JavaScript?

How to Implement JSON Serialization in JavaScript

How to Concatenate Two Strings in JavaScript

How to Install and Create Your First Nuxt.js App

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers