How to Create a Chrome Extension From Scratch in 3 Steps

Browser extensions are nothing but plugins that enhance the functionality of the browser. In other words, they add more features to the basic functionality of the browser.

But how is an extension more useful than a web app? Well, because an extension can access all the browser APIs, which gives you more control over the browser.

With the help of an extension, you can:

✅ Customize the user interface of the browser and tabs.

✅ Add new shortcuts for browser actions.

✅ Closely monitor the browser and the web.

Google Chrome also has a web store on which you can host your Chrome extensions for anyone to use. You might think that building a Chrome extension is a daunting task, but in reality, it’s just HTML, CSS, and JavaScript.

Yeah, you can build a Chrome extension using simple web technologies such as JavaScript, and here’s a tutorial on the same!

Building a Chrome Extension

In this tutorial, you will learn how to build a Chrome extension that analyses your browser history and presents it to you via a popup.

Required Files

The only required file for building a Chrome extension is the manifest.json file. Rest everything you code is identical to building a web application.

Creating Manifest.json File

This particular file defines the configuration and functionalities of the extension. Here’s an example of how the manifest file looks like usually:

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

The latest version of the manifest file at the time of writing is v3, which, according to Chrome, introduces enhancements to extension security, privacy, and performance and allows extensions to use open web technologies such as service workers and promises.

You can also see an action property in the manifest file. It defines which HTML file you want to open in the popup when the user clicks on the extension icon. There’s also a default_icon property that lets you define the default extension icon to be displayed.

Building the Application

It’s time to build the application, which will be shown to the end user as a popup. It has nothing to do with extensions. Rather, it’s a normal web application.

First, you have to create an entry file that you can list in the manifest’s default_popup property. I have created index.html as the entry point for this extension.

    
    
    
    


    
Browsing History
    

    

I have linked a stylesheet to style the page to look good in a popup. Apart from that, there’s also a javascript file linked to handle the extension’s functionality.

function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

What this file does is it uses Chrome’s history API to query the browser history and display it in the popup. When the user clicks on the extension icon, the DOMContentLoaded event will get fired, and it will call the searchHistory function, which contains the actual code.

The search method in the history API accepts a mandatory parameter text, which is the search text based on which you want to filter the history. If you leave it as an empty string, then history will be returned without any filters.

Another parameter which is useful is the startTime parameter. It filters history results based on the time elapsed since the start time. For example, if you give a start time of one week, then it will only fetch the history for the past week. It’s an optional parameter, and it defaults to the past 24 hours.

To fetch the results, the API provides a callback function that contains the results in an array. You can loop over the array and make a list out of it.

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

Now, the history API in Chrome requires “history” permission, which needs to be defined in our manifest file.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

Running the Extension

This is the easiest step to create and execute a Chrome extension. Click on the ellipsis in Chrome’s action bar and go to Manage Extensions under Extensions. You can also go to this link chrome://extensions/ directly.

Turn on the developer mode if not turned on.

Then, click on Load unpacked and then select the project folder you just created your extension in. By doing so, you will be able to see your extension in the list.

To execute the extension, go to the Chrome action bar and click on your extension for the list.

That’s it; you just created a simple Chrome extension. If you want more examples, you can check out more Chrome extension samples in the official Google Chrome repository.

If you want to publish your Chrome extension to the Chrome web store, you can follow these steps and pay a one-time fee to get your extension registered on the store.

Final Words

Creating a Chrome extension is really easy if you know the basics of any web application. It’s only a matter of creating a manifest file, and your application gets converted into an extension.

Now that you know how to build a Chrome extension, check out the best Chrome Extensions to help developers.