Create Your Own Chrome Extension: A Beginner’s Tutorial

Introduction

This guide walks you through the process of creating a simple Chrome extension. You'll learn how to set up your development environment, write the necessary code, and test your extension in the Chrome browser.

Prerequisites

Before you start, make sure you have the following:

Basic knowledge of HTML, CSS, and JavaScript
A code editor (e.g., VS Code, Sublime Text)
Google Chrome browser installed

Project Structure

Your project directory should look like this:

my-chrome-extension/
│
├── manifest.json
├── popup.html
├── popup.js
├── icon16.png
├── icon48.png
└── icon128.png

Step-by-Step Guide

1. Set Up Your Project

Create a new directory for your Chrome extension:

mkdir my-chrome-extension
cd my-chrome-extension

2. Create the Manifest File

The manifest.json file contains metadata about your extension. Create a manifest.json file in your project directory with the following content:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "description": "A basic example Chrome extension.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

3. Create the Popup HTML File

Create a popup.html file with the following content:

<!DOCTYPE html>
<html>
<head>
  <title>My Chrome Extension</title>
  <style>
    body { font-family: Arial, sans-serif; }
    #content { padding: 20px; }
  </style>
</head>
<body>
  <div id="content">
    <h1>Hello, world!</h1>
    <button id="myButton">Click me</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

4. Create the JavaScript File

Create a popup.js file with the following content:

document.getElementById('myButton').addEventListener('click', () => {
  alert('Button clicked!');
});

5. Add Icons

Add icons for your extension in the following sizes: 16x16, 48x48, and 128x128 pixels. Name them icon16.png, icon48.png, and icon128.png respectively, and place them in the project directory.