Developing Your First v3 Chrome Extension: A Step-by-Step Guide

October 10, 2023

Discover how to develop your first Google Chrome extension using Manifest V3 with our comprehensive step-by-step guide.

Developing Your First v3 Chrome Extension: A Step-by-Step Guide

Sidra Rasool

Software Engineer

6 min read

Developing Your First v3 Chrome Extension: A Step-by-Step Guide

Google Chrome extensions let users customize their browsing experience by adding new functionality and features to the browser.
With the release of Chrome Extension Manifest V3, developers now get a more efficient and secure extension architecture.

In this guide, we’ll walk through how to build your first Chrome extension using Manifest V3.

To get started, you only need Google Chrome and a text editor.

The Four Main Files

A basic Chrome Extension v3 setup includes:

Manifest File
Popup HTML
Content Script
Background Script

Step 1: Set Up Your Extension Manifest

Create a new directory for your extension and add a file named manifest.json.
The manifest file is the heart of any Chrome extension. It defines metadata such as name, version, permissions, and structure.

New in Manifest V3:

background: Defines the service worker that runs background tasks.
icons: Specifies icons for the extension UI.

Here’s an example:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "A simple Chrome extension",
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

This manifest sets up a basic extension with metadata, icons, a popup, and a background service worker.

Step 2: Create the Popup HTML

Create a file named popup.html.
This file defines the UI shown when the user clicks the extension icon.

Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Extension</title>
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, this is my first Chrome extension!</h1>
</body>
</html>

When clicked, this popup appears as a small window below the extension icon.

Step 3: Add a Content Script

A content script is a JavaScript file that runs inside web pages.
It can interact with the DOM and modify page content.

First, declare it in your manifest.json:

{
  // ... (existing manifest properties)
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Then create content.js:

// Create a button element
const button = document.createElement('button');
button.textContent = 'Click me!';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '9999';

// Create an info div
const infoDiv = document.createElement('div');
infoDiv.textContent = 'This is injected by the content script';
infoDiv.style.position = 'fixed';
infoDiv.style.bottom = '10px';
infoDiv.style.right = '10px';
infoDiv.style.padding = '10px';
infoDiv.style.backgroundColor = 'lightblue';
infoDiv.style.border = '2px solid blue';
infoDiv.style.zIndex = '9999';

// Append elements to the page
document.body.appendChild(button);
document.body.appendChild(infoDiv);

// Add click listener
button.addEventListener('click', () => {
  alert('Button clicked from content script!');
});

// Add a red border around the page
document.body.style.border = '5px solid red';

This script injects a button and a message into every page and adds an event listener for interaction.

Step 4: Add an Options Page

An options page lets users configure extension settings.

Create a new file named options.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extension Options</title>
</head>
<body>
  <h1>Extension Options</h1>
  <!-- Add your options UI here -->
</body>
</html>

Then update the manifest:

{
  // ... (existing manifest properties)
  "options_page": "options.html"
}

Step 5: Load and Test Your Extension

To test it:

Open Chrome and go to chrome://extensions/
Enable Developer mode (top right)
Click Load unpacked and select your extension folder

You’ll now see your extension icon in the toolbar.
Click it to open the popup — it should display the greeting message.
Visit any webpage to see the red border and the injected button from the content script.

To open the options page:

Right-click the extension icon
Select Options

That’s it

You’ve built your first Chrome Extension using Manifest V3.
Experiment with background logic, storage APIs, and messaging next — that’s where things get interesting.