Create Your Own Chrome Extension: A Beginner’s Tutorial

Rahul GuptaRahul Gupta
2 min read

Table of contents

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.

6. Load Your Extension in Chrome

  1. Open Chrome and navigate to chrome://extensions/.

  2. Enable "Developer mode" using the toggle switch in the top right.

  3. Click "Load unpacked" and select your extension's root directory.

7. Test Your Extension

Your extension should now be loaded in Chrome. Click on the extension icon in the toolbar to open the popup and test the functionality.

Additional Resources

Code Sample: https://github.com/therahul-gupta/create-chrome-extension

0
Subscribe to my newsletter

Read articles from Rahul Gupta directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Create Chrome Extensionchrome extension#ChromeExtensions

Written by

Rahul Gupta
Rahul Gupta