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.
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.
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.jsonindex.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#
- Open Chrome and go to chrome://extensions
- Enable "Developer mode" in the top right
- Click "Load unpacked" and select your project folder
- 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.