Build Your First Browser Extension – Full Tutorial

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a browser extension (manifest version 3). To create this projects we will use HTML,CSS and JavaScript. We do not make external libraries and plugins to create this projects.

A browser extension is a small software add-on that runs on your web browser. You can install these by going to your browser's web store. Such as Chrome Web Store or Microsoft Edge Add-ons.

Today's tutorial is not just for beginners, it is for everyone from beginners to advanced. Although today's tutorial is about creating a simple extension, it will give you an idea of how pro developers create browser extensions. I hope you can learn something from today's tutorial.

let's begin your journey to becoming a browser extension developer. Let's start step by step.

Step: 1 (Project Folder Structure)

Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘My Extension’. Inside this folder, we have three files and three folder. These files are – manifest.json, content-script.js and background.js, and These folder are - _locales, data, lib. Inside _locales folder, we have one folder en And inside it is a messages.json file. Inside data folder, we have two folder These folder are – icons and interface. Inside interface folder, we have three files. These files are – popup.css, popup.html, popup.js. Inside icons folder, You can add icons.

You can use the above structure in almost all types of browser extensions. Following this structure will benefit you in future projects. Our project is a browser extension that will change the background color of a web page. So we don't need to create so much. You don't need to create a background.js, content-script.js file, lib folder. There's not much to do on today's project.

Step: 2 (messages.json)

We begin with the Json code. First, copy the code below and paste it into your messages.json. It works as a translation so that people from all countries can understand and use your extension.

{
    "app_name": {
        "message": "Change Background Color"
    },
    "app_description": {
        "message": "Click to change page background color. "
    },
    "app_short_name": {
        "message": "CBC"
    }
}

Step: 3 (manifest.json)

We begin with the Json code. First, copy the code below and paste it into your manifest.json. This manifest.json file the main configuration of the browser extension. With the help of this file, the browser understands what the extension does and what permissions it requires. If this file has errors, your extension will never work. If you can't create an icon, you can remove the "icons" and "action":{"default_icon"} in manifest.json. And also remove "background":{ ... } and "content_scripts": { ... }.

{
    "manifest_version": 3,
    "name": "__MSG_app_name__",
    "short_name": "__MSG_app_short_name__",
    "description": "__MSG_app_description__",
    "version": "1.0.0",
    "default_locale": "en",
    "permissions": [
        "activeTab",
        "scripting"
    ],
    "host_permissions": [
        "<all_urls>",
        "*://*/*"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content-script.js"
            ],
            "run_at": "document_start",
            "all_frames": true
        }
    ],
    "action": {
        "default_icon": {
            "128": "data/icons/128.png",
            "64": "data/icons/64.png",
            "48": "data/icons/48.png",
            "32": "data/icons/32.png"
        },
        "default_popup": "data/interface/popup.html",
        "default_title": "__MSG_app_name__"
    },
    "icons": {
        "128": "data/icons/128.png",
        "64": "data/icons/64.png",
        "48": "data/icons/48.png",
        "32": "data/icons/32.png"
    }
}

Step: 4 (popup.html)

We begin with the HTML code. First, copy the code below and paste it into your popup.html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Change Background</title>
      <style>
        body { 
            font-family: sans-serif; 
            padding: 10px; 
        }

        button { 
            background: aliceblue;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: 700;
        }
  </style>
</head>
<body>
  <button id="changeColor">Change Background</button>
  <script src="popup.js"></script>
</body>
</html>

Step: 5 (popup.js)

We begin with the javaScript code. First, copy the code below and paste it into your popup.js.

document.getElementById('changeColor').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => {
      document.body.style.backgroundColor = randomColor;
    }
  });
});

How to Use:

1. Go to chrome://extensions/
2. Enable Developer Mode
3. Click Load unpacked and select your my-extension/ folder
4. Click the extension icon and press the button to change the page color!

That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!