raj
Build Your First Chrome Extension in 60 Seconds: A Beginner's Guide

Build Your First Chrome Extension in 60 Seconds: A Beginner's Guide

Learn how to build a simple Chrome extension using Manifest V3 in just 60 seconds! Follow this easy step-by-step guide to create your first "hello world" extension today.

Last updated on: Feb 2025 Saturday

facebooktwitterlinkedinwhatsapp

Ever wanted to create your own Chrome extension but thought it was too complicated? In this guide, I'll show you how to build a simple Chrome extension in just 60 seconds!

While this is simple, concepts like background scripts, content scripts, message passing between scripts are some of the complex topics and will be hard to cover in just a single video / blog. But, we'll cover them in our YouTube channel. So stay tuned.

Let's start with our first extension. In this guide, we'll build a simple "Hello World" popup extension that will give you a foundation for more complex projects.

YouTube Video Thumbnail
Subscribe to My Channel

What We'll Build

We'll create a basic Chrome extension that displays a "Hello World" message when clicked. While simple, this project will teach you the fundamental structure of Chrome extensions and prepare you for building more complex features.

Prerequisites

  • Google Chrome browser
  • Any code editor (VS Code, Sublime Text, etc.)
  • Basic understanding of HTML (very basic!)

Step-by-Step Guide

1. Create Project Structure

First, create a new folder for your project. You'll need two files:

  • manifest.json
  • index.html

2. Configure manifest.json

The manifest.json file is your extension's configuration file. Create it with this content:

1{
2  "manifest_version": 3,
3  "name": "Hello World Extension",
4  "version": "1.0.0",
5  "description": "My first Chrome extension!",
6  "action": {
7    "default_popup": "index.html"
8  }
9}

3. Create the Popup UI

Create index.html with this simple content:

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Hello World Extension</title>
5  <style>
6    body {
7      width: 200px;
8      padding: 10px;
9      font-family: Arial, sans-serif;
10    }
11  </style>
12</head>
13<body>
14  <h1>Hello World!</h1>
15</body>
16</html>

4. Load the Extension

  1. Open Chrome and go to chrome://extensions
  2. Enable "Developer mode" in the top right
  3. Click "Load unpacked" and select your project folder
  4. Look for the new extension icon in your toolbar!

How It Works

Let's break down what each part does:

  • manifest.json: This is the extension's configuration file. It tells Chrome:
    • What version of the manifest we're using (v3 is current)
    • Basic information about our extension (name, version, description)
    • What should happen when users click the extension icon (show index.html) and more.
  • index.html: This is our popup's user interface. When users click the extension icon, this HTML file is displayed in a popup window.

Next Steps

Now that you've built your first extension, here are some ways to enhance it:

  • Add custom styling with CSS
  • Implement JavaScript functionality
  • Add an icon for your extension
  • Learn about background scripts and content scripts

Resources

Conclusion

Congratulations! You've just built your first Chrome extension. While this example is simple, it demonstrates the basic structure that all Chrome extensions share. From here, you can explore more complex features like content scripts, background services, and API interactions.

Remember to subscribe to my YouTube channel for more Chrome extension tutorials!