Chrome Extension Basics for Beginners: 5 Steps to Build Your First Add-on in 2026

I remember the first time I opened Chrome's Extensions page and saw that Developer Mode toggle. It felt like I was about to crack a safe. Then I actually built something—a tiny add-on that replaced every image on a news site with a photo of my cat. It took me 45 minutes, and I barely knew JavaScript. That moment changed how I saw the web. In 2026, the tools are even friendlier. You don't need a computer science degree or a fancy IDE. Just a text editor, Chrome, and a willingness to try. This guide walks you through the five concrete steps to create your first add-on, from a blank folder to a working extension you can load, test, and even share. No fluff, no gatekeeping. Let's build something real.

Step 1: Set Up Your Development Environment (No Fancy Tools Required)

When I started, I thought I needed a full development stack—Node.js, a build tool, maybe a framework. Turns out, all you need is a folder and a text editor. Here's what I actually used for my first extension:

• A plain text editor—I used VS Code, but Notepad++ or even TextEdit works.
• Chrome browser (any recent version, which in 2026 means Chrome 120+).
• A folder on your computer named something like my-first-extension.

That's it. No installation, no command-line magic. Create the folder, open your editor, and you're ready. The key insight I learned the hard way: keep it simple. My first mistake was overcomplicating the folder structure. Just one folder with a few files inside is all you need. Later you can add subfolders for icons or scripts, but start flat.

One pro tip from my own setup: use Chrome's built-in developer tools for testing. You don't need a separate debugger. And if you're on Windows, make sure file extensions are visible—you'll be creating files like manifest.json and content.js, and hiding extensions makes it easy to accidentally create manifest.json.txt. Trust me, I wasted 20 minutes on that once.

Step 2: Create Your First Manifest File (The Heart of Your Extension)

Every Chrome extension starts with a manifest.json file. Think of it as the ID card for your add-on—it tells Chrome who you are, what your extension can do, and what files it needs. In 2026, all new extensions must use Manifest V3 (Google deprecated V2 in 2024, and V3 is now the only option for submission). Here's the minimal manifest I used for my cat-replacer extension:

{
  "manifest_version": 3,
  "name": "Cat Replacer",
  "version": "1.0",
  "description": "Replaces all images on a page with a photo of my cat.",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ]
}

Breaking it down: manifest_version is always 3 now. name and version are required—make the version something like "1.0" for your first try. The description is optional but recommended. permissions is where many beginners trip up. In V3, you need to ask for only what you truly need. activeTab is a safe starting permission—it gives your script access only when the user clicks the extension icon or when a content script runs on the current tab. Avoid asking for "<all_urls>" unless you absolutely need it; it's a red flag during store review.

A common mistake I made early on: forgetting the comma between JSON fields, or adding a trailing comma after the last entry. JSON is strict—no trailing commas allowed. Use a linter (like the one built into VS Code) to catch these. Also, if your extension needs to store data, you'll add "storage" to permissions and use the chrome.storage API. But for a first project, keep permissions minimal.

Here's a counter-intuitive insight: the manifest is also where you define how your extension behaves. In V3, background scripts are replaced by service workers. Don't worry about that now—for a simple content script, you don't need a background page at all. Save that for when you want to add a popup or handle events.

Step 3: Write a Simple Content Script That Actually Does Something Useful

Now for the fun part—making your extension do something. A content script is a JavaScript file that runs on every page your extension is allowed to access. For my first script, I changed the background color of any webpage to a soft blue. It was trivial, but seeing it work was a rush. Here's the code I used (save it as content.js in your extension folder):

document.body.style.backgroundColor = "#e0f7fa";

That's it. One line. But let's make it more useful. Here's a script that highlights all links on a page—handy for quickly seeing clickable elements on a crowded site:

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.style.outline = '2px solid #ff9800';
  link.style.backgroundColor = '#fff3e0';
});

This does two things: adds an orange outline around every link, and gives them a light orange background. You can paste this into content.js, save it, and reload your extension (we'll cover that in Step 4).

I learned a crucial lesson here: content scripts run in an isolated world. They can't access the page's JavaScript variables, but they can read and modify the DOM. That's plenty for most beginner projects. If you need to communicate with the page's scripts, you'll need to use window.postMessage or a custom event, but that's an advanced topic. For now, stick to DOM manipulation.

One gotcha: if you're using a modern site that loads content dynamically (like Twitter or a single-page app), your script runs once on initial page load. New content added later (e.g., infinite scroll) won't be affected. To handle that, you'd need a MutationObserver. But for your first extension, pick a static site like a blog or documentation page.

Step 4: Load and Test Your Extension in Chrome (The Magic Moment)

This is where the magic happens. I still get a thrill watching my code come to life inside a browser. Here's the step-by-step process I used:

1. Open Chrome and go to chrome://extensions.
2. Toggle on Developer mode (top right corner).
3. Click Load unpacked and select your extension folder.
4. Your extension should appear in the list. If there's an error, you'll see a red button—click it to see the error message.

The first time I did this, I got a red error: "Manifest file is missing or unreadable." I had accidentally saved my manifest as manifest.json.txt. Check your file extensions. Another common error: a missing comma or an extra comma in the JSON. Chrome's error message will tell you the exact line number, so use that.

Once it loads, open any webpage (like example.com), and your script should run automatically. If nothing happens, open the console (right-click > Inspect > Console) and check for errors. Your script might be throwing an error because the DOM isn't ready. Wrap your code in a DOMContentLoaded event listener to be safe:

document.addEventListener('DOMContentLoaded', function() {
  document.body.style.backgroundColor = "#e0f7fa";
});

Testing tip: after making changes to your code, go back to chrome://extensions and click the refresh icon (circular arrow) on your extension's card. Then reload the page you're testing. You don't need to remove and re-add the extension.

If your extension has a popup, you can right-click the toolbar icon and select "Inspect popup" to debug it separately. But for a content script, the main page's console is where you'll see logs and errors.

Step 5: Publish or Share Your Add-on (Plus What’s New in the Chrome Web Store for 2026)

Once your extension works, you have two paths: share it privately or publish it publicly. For 2026, the Chrome Web Store has a few updates worth knowing. First, the developer registration fee remains a one-time $5 (no, it hasn't gone up). But here's the new rule: all extensions must now undergo a stricter automated review that checks for obfuscated code and excessive permissions. Keep your code readable and minimal, and you'll pass.

To publish:

1. Create a developer account at chrome.google.com/webstore/devconsole (pay the $5 fee).
2. Zip your extension folder (just the files, not the folder itself).
3. Upload the zip, fill in store listing details (description, screenshots, icons).
4. Submit for review. It usually takes a few hours to a day in 2026.

For private sharing, skip the store. You can send the unzipped folder to a friend and have them load it via Developer mode. Or use a self-hosted download link with a .crx file (instructions on Chrome's developer site).

A surprising insight I discovered: many users prefer extensions that are not on the store because they avoid the store's review delays. But for discoverability and trust, the store is better. My first extension, a simple "link highlighter," got 12 downloads in the first week without any marketing. Not huge, but it taught me that even tiny tools can help people.

One policy update for 2026: Google now requires all extensions to have a privacy policy if they collect any user data. If your extension only runs content scripts and doesn't send data anywhere, you can state "This extension collects no user data" in your description. But if you use chrome.storage to save preferences, technically you're storing data locally—that's fine, but mention it.

Conclusion: Your Next Steps After Building Your First Chrome Extension

You've done it. You have a working Chrome extension that does something—even if it's just changing colors or highlighting links. That's more than most people ever try. Now, iterate. Add a popup with a toggle switch. Use chrome.storage to save user preferences. Or build something that solves a real problem you face daily—like automatically sorting your email tabs or filtering out annoying popups.

I kept my first extension running for weeks, tweaking it whenever I learned something new. Eventually, I rebuilt it from scratch with better code. That process—build, break, fix—is how you go from beginner to confident developer. The Chrome extension ecosystem in 2026 is more accessible than ever, and you've already taken the hardest step: starting. Now go make something that makes your browser work for you.

Worth bookmarking before your next coding session—this guide will save you the 20-minute mistakes I made.