Build a Chrome Extension in Minutes: 5 Easy Steps with create-chrome-ext

Want to create a Chrome extension but dreading the setup? With create-chrome-ext, you can scaffold a fully functional extension in minutes, using frameworks like React, Vue, or Svelte. This guide walks you through building a simple Chrome extension with a React and TypeScript template. It’s perfect for anyone who have the interests in building a browser tools to enhance your daily productivities.

Jump straight to the code

What is create-chrome-ext?

create-chrome-ext is a scaffolding tool that generates Chrome extension boilerplates for popular frameworks. Powered by Vite, it offers fast development with hot module replacement (HMR) and supports TypeScript, JavaScript, and multiple languages. Whether you’re building a popup, content script, or options page, this tool simplifies the process.

Why Build a Chrome Extension?

Chrome extensions enhance browsing by adding custom features, like ad blockers, productivity tools, or UI tweaks. With create-chrome-ext, you can prototype ideas quickly, leveraging modern web technologies. And using copilot to quickly make a production level extension.

Prerequisites

• Node.js: Version 14.18.0 or higher.
• Chrome Browser: For testing your extension.
• A basic understanding of JavaScript and your chosen framework (e.g., React).

Step-by-Step Guide

Step 1: Install create-chrome-ext

Run the following command to create a new project with a React and TypeScript template:

npm create chrome-ext@latest my-crx-app

This sets up a project folder named my-crx-app with all necessary files.

Expected Output:

Success! Created my-crx-app

Step 2: Navigate to Your Project

Move into the project directory:

cd my-crx-app

Install dependencies:

npm install

Run the build command to generate the production files:

npm run build

Step 4: Explore the Project Structure

Your project includes several key folders and files. Don’t worry—most of these are optional and you can start simple!

Essential Files (Required):

• manifest.json: The “ID card” of your extension. Tells Chrome what your extension does, what permissions it needs, and which files to load.
• src/manifest.ts: The source file that generates the final manifest.json during build.

Core Extension Pages (Choose What You Need):

• src/popup/: Most Common – The small window that appears when users click your extension icon. Perfect for quick actions like a calculator or note-taking.
• src/background/: Optional – Runs behind the scenes even when Chrome is closed. Use for tasks like monitoring websites or sending notifications.
• src/contentScript/: Optional – Injects code directly into web pages. Great for modifying how websites look or adding new features to existing sites.

Additional UI Options (All Optional):

• src/options/: Settings page accessible via right-clicking your extension icon → Options.
• src/sidepanel/: Modern sidebar that stays open while browsing (like bookmarks panel).
• src/newtab/: Replaces Chrome’s new tab page with your custom design.
• src/devtools/: Adds a tab to Chrome DevTools for developer-focused extensions.

Supporting Files:

• public/: Icons and static assets (logos, images).
• src/assets/: Additional resources like fonts or images.

The Beauty: You only need to build what you actually use! Start with just a popup for your first extension.

Simple Guide: What Should You Build?

For Beginners – Start Here:
Just use src/popup/ for a simple tool like a password generator, unit converter, or quick note-taker.

Common Use Cases:

• Popup Only: Calculator, color picker, quick tools (easiest to build)
• Popup + Background: Website monitor, notification sender, timer apps
• Content Script: Page modifier (dark mode, ad blocker, text highlighter)
• Options Page: Any extension with user settings
• Side Panel: Dashboard for productivity apps, bookmark managers

Real Examples:

• src/popup/: A simple counter app (already included in the template!)
• src/background/: Listens for messages from popup, runs in background
• src/contentScript/: Could inject a “Reading Time” indicator on blog posts
• src/options/: User preferences like theme colors or API keys

Step 4: Test Your Extension

Load the extension in Chrome:

1. Open Chrome and navigate to chrome://extensions/.
2. Enable “Developer mode” (top-right toggle).
3. Click “Load unpacked” and select the my-crx-app/build folder.
   You’ll see a default extension popup (from the React template) when clicking the extension icon.

Step 5: Customize and Expand

Now the fun begins! Here’s how to make the extension your own:

Start Simple:

1. Edit the Popup: Open src/popup/Popup.tsx and change the counter into your own tool
2. Update the Name: Edit package.json to change "name" and "displayName"
3. Change the Icon: Replace files in public/img/ with your own 16×16, 32×32, 48×48, and 128×128 pixel PNG files

Add More Features:

• Need Settings? Build an options page in src/options/
• Want to Modify Websites? Add code to src/contentScript/
• Need Background Tasks? Use src/background/ for notifications or data sync

Pro Tip: The template includes a working example where the popup, background, and options pages all communicate with each other using Chrome’s messaging system. Study how the counter value syncs between different parts!

Don’t Overthink It – Chrome Extensions Are Just Web Pages!

Here’s the secret that makes Chrome extensions feel less intimidating: they’re just web pages with special powers.

• Popup: A tiny web page (like a modal window)
• Options: A normal web page for settings
• Content Script: JavaScript that runs on other websites
• Background: A web page that runs invisibly

If you can build a React component, you can build a Chrome extension. The create-chrome-ext template handles all the complex Chrome-specific setup, so you can focus on building your actual features.

Quick Confidence Booster: The template you just created is already a fully functional extension! You’ve successfully built and installed a Chrome extension in under 5 minutes. Everything from here is just customisation.

Copy-and-Paste Example

Here’s a full example to create and test a Chrome extension:

# Create and set up the project
npm create chrome-ext@latest my-crx-app --template react-ts
cd my-crx-app
npm install
npm run build

Test the Extension:

1. Open chrome://extensions/ in Chrome.
2. Enable “Developer mode.”
3. Click “Load unpacked” and choose my-crx-app/build.

Expected Result: A popup appears when you click the extension icon, displaying the default React UI.

Why Use create-chrome-ext?

• Speed: Generate a project in seconds with pre-configured boilerplates.
• Flexibility: Choose from React, Vue, Svelte, or other frameworks.
• Modern Tooling: Enjoy Vite’s fast HMR and optimized builds.
• Multilingual Docs: Available in English, Chinese, French, and more.

Next Steps

• Customize: Add features like content scripts or background services by editing manifest.json and src/.
• Deploy: Package your extension for the Chrome Web Store using npm run build and follow Google’s guidelines.
• Learn More: Explore Chrome Extensions Samples or join the GitHub community.

Start building your Chrome extension today with create-chrome-ext!