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

Google Chrome extensions empower users to customize their browsing experience by adding functionality and features to the browser. With the release of Chrome Extension Manifest V3, developers have access to a more efficient and secure extension architecture. In this guide, we'll walk through the process of developing your first Chrome extension using Manifest V3.

To get started, the only things you need to develop your first chrome extension are Google Chrome and a text editor.

The chrome extension v3 has 4 main files:

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 contains metadata about the extension, such as its name, version, description, and permissions. In the updated example, it includes new sections:

background: Specifies the background script (service worker) to handle events and background tasks.
icons: Defines icons of different sizes for various UI elements.

This file is essential for Chrome to understand the structure, components, and permissions of your extension. Here's a basic 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"
  }
}

In this example, we've set up a basic manifest with an extension name, version, description, and icons. The default_popup property refers to the HTML file that will be displayed when the extension icon is clicked.

Step 2: Create the Popup HTML

Create a new file named popup.html in your extension directory.This HTML file represents the content that appears when the user clicks on the extension icon. It's a small window that allows you to present information or interact with the user. In the example, it contains a simple greeting message. Popups are a way to provide a quick interface for users to interact with your extension without navigating away from the current page. 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 Extension Popup</title>

    <style>
      body {
        width: 200px;

        padding: 10px;
      }
    </style>
  </head>

  <body>
    <h1>Hello, this is my first Chrome extension!</h1>
  </body>
</html>

Step 3: Content Script

A content script is a JavaScript file that runs in the context of web pages. It can manipulate the DOM and interact with the page. Content scripts allow you to modify the content of web pages, making them a powerful tool for enhancing or customizing the user's browsing experience. To add a content script to your extension, update the manifest.json file:

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

Create a new file named content.js in your extension directory and add some basic code to manipulate the page:

// content.js

const button = document.createElement("button");
button.innerText = "Click Me";

// Create a div element for explanatory text
const textDiv = document.createElement("div");

textDiv.innerText =
  "This button is injected by My First Extension. Click it to see an alert!";

// Append the button and text to the body of the page
document.body.appendChild(button);
document.body.appendChild(textDiv);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Display an alert when the button is clicked
  alert("Button clicked! Extension is working!");
});

In this example, the content script creates a button and a div element with explanatory text. It appends these elements to the body of the web page. Additionally, a click event listener is added to the button, triggering an alert when the button is clicked.

Step 4: Options Page

An options page allows users to configure settings for your extension. It provides a user interface for modifying preferences. In the example, it's a simple HTML file that can be expanded with more UI elements as needed. Create a new HTML file named options.html in your extension directory:

<!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>

Update the manifest.json file to include the options page:

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

Load And Test Your Extension

To load your extension,

Open Google Chrome and navigate to chrome://extensions/.
Enable "Developer mode" in the top right corner.
Click on "Load unpacked" and select your extension directory.

After loading your extension, you should see its icon in the Chrome toolbar. Click on the icon to open the popup, and you should see the message "Hello, this is my first Chrome extension!" Additionally, the content script should apply a red border to the web pages you visit.

To access the options page, right-click on your extension icon, select "Options," and you'll be directed to the options page where users can configure settings. Happy Extension Development!