Tutorial: How to Create a Chrome Extension in 5 Minutes

NicolasBrondinBernard

An example of a basic Chrome extension, the code is available on Github!

Article published on 04/11/2020, last updated on 10/08/2026

I recently shared several extensions for Google Chrome in my article "The 4 best tools to test the accessibility of a website", so it's only natural that today I show you the process to create your own Chrome extension in a few minutes.

First, let's see what a most basic extension is made of:

A manifest
An icon
An html file
And that's it.

The manifest allows you to declare all the information and metadata related to the extension, and the html file will contain the code that will appear in the popup when you click on the extension.

The code

I decided to show you the simplest possible extension, so I opted for a simple popup that displays a button, which, when clicked, opens a new tab pointing to my website.

Note that a Chrome extension can be very powerful and offer many possibilities, I opted for the simplest possible extension for this introduction as an advanced tutorial is also in preparation.

The manifest

The manifest is a simple JSON file, like this:

{
  "manifest_version": 2,

  "name": "Basic Chrome Extension",
  "description": "This extension is for education purpose",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": ["tabs"]
}

There isn't much to say about this manifest, it's very simple and must be placed at the root of the project, for the list of all available permissions, here is the official documentation.

HTML and Javascript

Since the entry point is a simple html file, it is possible to keep the same structure as a classic web project, so I separated the content of my popup into three files: popup.html, popup.css and popup.js

The popup.html contains all the code that will be displayed in the popup, but be careful, it will be executed ONLY when you have clicked the button to launch the extension, not before!

<!--popup.html-->
<!DOCTYPE html>
<html>
    <head>
        <link href="./popup.css" rel="stylesheet"/>
    </head>
    <body>
        <button id="openBtn">Ouvrir mon site</button>
        <script type="text/javascript" src="popup.js"></script>
    </body>
</html>

The behavior is the one described previously: we create a button, to which we assign a function that will open a url when clicked.

//popup.js
function OpenURL() {
    chrome.tabs.create({ url: "https://nicolas.brondin-bernard.com" });
}
document.getElementById("openBtn").addEventListener("click", OpenURL);

Be careful, Google Chrome's Content Security Policies forbid passing a function by adding an onClick attribute in the html, the binding must necessarily be done on the Javascript side.

Once all the files have been created, all we have to do is test the extension, and if you want to find all the code from this tutorial, it is available on the GitHub repository below:

NicolasBrondin/basic-chrome-extension

Installing the extension

To do this, simply open Google Chrome, and type chrome://extensions in the search bar, then press enter. The extensions management page will appear, all that's left for you to do is:

Enable developer mode
Load your extension

Once your extension's folder is selected, all that's left for you to do is find it in your menu bar on Google Chrome, click on it and there you go!

Eelco Böhtlingk sur Unsplash

Finished reading this article?

Our newsletter1 email a week to understand it all

Go further

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

No comments yet