Getting Started Building Chrome Extensions

Sebastian Gomez

Jun 24, 2026

Updated: Jun 25, 2026

Getting Started Building Chrome Extensions

Introduction

Hello everyone, welcome to this new series of posts where we'll explore the world of Chrome extensions. This series will be a little different from usual. I've noticed that many of you look for ways to build Chrome extensions but don't all have the basic knowledge you need. Some of you are experts in JavaScript, others in React, but many feel lost when it comes to bringing that knowledge together for Chrome extension development.

The importance of a solid foundation

The main problem is that a lot of information is scattered across many YouTube channels and websites. My goal here is to consolidate all of it and give you a complete package. My job as a teacher is to inspire and guide you so you can build something amazing. I'm not an expert, I don't have extensions published on the Chrome Web Store, but I've learned from my mistakes and I'm here to share those lessons with you.

Documentation and resources

Before we begin, I want to show you a key tool: the official Chrome extensions documentation. Everything I'll share comes straight from there. You can search Google for "Chrome extension docs" to reach this valuable source of information:

https://developer.chrome.com/docs/extensions

Getting started with Manifest V3

We'll start with version 3 of the manifest (Manifest V3), which is the current one. In fact, since 2024 Manifest V3 is the only version the Chrome Web Store accepts, so we're starting from the current standard. I assume you have a basic knowledge of JavaScript and some experience with Chrome extensions. If you've already read my posts on React.js, Next.js and JavaScript, this will be a great complement.

How the series is structured

These posts will be long and detailed. I recommend you follow each step with me, perhaps keeping my post on a secondary screen while you practice on the main one. The key to learning is doing, not just watching.

First project: a Chrome extension with React.js

In the next post we'll start building a Chrome extension using React.js. We'll begin with the very basics, so if you're a beginner, don't worry. We'll cover everything you need to keep moving forward.

Tips for success

Active participation: Don't just read the posts, follow the steps actively.

Persistence: Extension development can get tricky, but with effort and practice you'll get satisfying results.

Use your resources: Use the official Chrome documentation as your main reference.

I hope you enjoy this series as much as I enjoyed preparing it. Share the post with your friends and family, and don't forget to leave comments and like the posts. This is a chance to learn and grow in Chrome extension development. Let's get started!

First step: initial setup

In this first post we'll set up our development environment and create the basic structure of our Chrome extension using React.js.

Install Node.js and npm: Make sure you have Node.js and npm installed on your machine. You can download them from nodejs.org.

Create a new project with Vite: Historically this series used Create React App, but the React team deprecated it in February 2025, so we now start with Vite, which is today's recommended tool for React projects. Run these commands:

npm create vite@latest my-chrome-extension -- --template react
cd my-chrome-extension
npm install

Review the package.json: For now you don't need to change anything special here. The important thing to know is that the build command we'll use later (npm run build) is already defined in the scripts Vite generated for us. In later chapters we will adjust this configuration to adapt it to an extension.

Create the manifest file: In the root of the project, create a manifest.json file with the following basic structure:

{
  "manifest_version": 3,
  "name": "Mi Extensión de Chrome",
  "version": "1.0",
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    }
  },
  "permissions": [
    "activeTab"
  ]
}

This minimal manifest is still perfectly valid: manifest_version: 3 is what Chrome requires today, and action.default_popup, default_icon and permissions: ["activeTab"] are the foundation we need to get started.

Add icons: Place the required icons in the public folder, next to manifest.json. That way Vite copies them into the build output.

Build and load the extension: First build the project:

npm run build

Then load the extension in Chrome:

Go to chrome://extensions/
Enable "Developer mode"
Click "Load unpacked"
Select the dist folder of your project

Note: With Vite the build output lives in dist, not build. If you come from a Create React App based tutorial, that's the folder change to keep in mind.

You'll see that the extension loads in a very small window when you click it, and that inside it your React app is running. I recommend you change the body styles in index.css, adding a width and height of 400px:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 400px;
  height: 400px;
}

This way you'll get a nicely sized window to start working on your extension. With that, you'll have created a basic extension that runs a React.js app inside it.

Next steps

Thank you for joining this series. I'm excited about what we're going to build together. See you in the next post. Good luck and happy coding!