DEV Community

Mukhtar Abdussalam
Mukhtar Abdussalam

Posted on

How to Build a Chrome Extension in 30 Minutes - Updated April 09, 2026

#chrome #javascript #tutorial

Have you ever thought about creating your own Chrome Extension but were intimidated by the complexity? Good news: building a Chrome Extension is simpler and quicker than you might think! In just 30 minutes, you can develop your very first extension that adds value to users—and maybe even earns a spot in the Chrome Web Store. Let's dive into the updated 2026 guidelines and get your Chrome Extension up and running!

Understanding the Basics

Before we get into building, let’s cover the essentials. A Chrome Extension is essentially a small web application made up of HTML, CSS, and JavaScript that enhances the Chrome browser's functionality. Chrome Extensions have multiple components, but the fundamental one is the manifest.json file. This JSON file is the brain of your extension, dictating what your extension does and how it behaves.

Getting Started: Setting Up Your Project

First things first, create a directory on your computer where you’ll store your extension files. Let’s name it my-first-extension. This is where all the magic happens.

mkdir my-first-extension
cd my-first-extension
Enter fullscreen mode Exit fullscreen mode

In this directory, create a manifest.json file. This file is critical, as it will provide the metadata Chrome needs to understand your extension.

Crafting the Manifest File

You'll want to ensure your manifest.json file meets the latest Chrome Extension standards of 2026, which use manifest_version 3. Here’s a sample setup:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "A simple Chrome Extension that greets you.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["storage"],
  "background": {
    "service_worker": "background.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

Designing Your User Interface

For this example, we’ll create a simple popup interface that displays a greeting. Start by creating the popup.html file:

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Popup</title>
    <style>
      body { width: 200px; font-family: Arial, sans-serif; }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to your first Chrome Extension.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

And don't forget your icon! It should be placed in my-first-extension and named icon.png.

Adding Interactivity with JavaScript

Now, let’s make your extension a bit more dynamic. Create a background.js file to handle background tasks such as setting a greeting message.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed and background script running!');
});
Enter fullscreen mode Exit fullscreen mode

Testing Your Extension

Once your files are in order, it's time to test your extension. Here's how you can load it into Chrome:

  1. Open Chrome and navigate to chrome://extensions/.
  2. Turn on Developer mode using the toggle situated in the top-right.
  3. Click on "Load unpacked" and select your extension's directory.

With this setup, you should now see your extension icon in the Chrome toolbar. Click it to see the popup!

Additional Enhancements

30 minutes might be enough to get the basics down, but there’s always room for improvement. Consider adding more features, such as:

  • Persistent Data Storage: Use chrome.storage API to save user preferences.
  • Custom Styles: Integrate CSS to enhance the visual experience.
  • Useful API Integrations: Fetch data from APIs to make your extension more functional.

Final Thoughts

Building a Chrome Extension can be a fun and rewarding challenge. By following the steps outlined above, you’ve laid the foundation for your very first extension. The key takeaway here is to start simple and gradually iterate upon your project. As you grow more comfortable with the development process, experiment by adding new features and exploring the extensive array of Chrome APIs.

Are you ready to unleash your creativity and build more powerful extensions? Follow me for more tech tips and share your Chrome Extension experiences in the comments below! Let's code, share, and become better together.

Top comments (0)