Skip to main content

​
Quick start

Get your first Chrome extension up and running with CRXJS in just 90 seconds using the scaffolding tool.
This guide uses npm create crxjs@latest to scaffold a new project. For manual installation, see the Installation guide.

​
Create your project

1

Scaffold a new project

Run the scaffolding command and follow the prompts:
npm create crxjs@latest
You MUST include @latest when using npm, otherwise npm may resolve to a cached and outdated version of the package.
The scaffolding tool will ask you:
  • Project name
  • Framework choice (React, Vue, Svelte, or Vanilla)
  • TypeScript preference
2

Install dependencies

Navigate to your project directory and install dependencies:
cd my-extension
npm install
3

Start the dev server

Start the development server with HMR:
npm run dev
This will build your extension in development mode and watch for changes.
4

Load the extension in Chrome

  1. Open Chrome and navigate to chrome://extensions
  2. Enable Developer mode (toggle in the top right)
  3. Click Load unpacked
  4. Select the dist directory from your project
Your extension is now loaded! Look for it in the extensions toolbar.
5

Try HMR

Make a change to your code and save. The extension will update instantly without losing state - even in content scripts!
Open your extension’s popup or options page and make changes to see HMR in action. The page will update without reloading.

​
Project structure

Your scaffolded project includes: 
my-extension/
├── src/
│   ├── manifest.json          # Extension manifest
│   ├── popup.html             # Popup page
│   ├── popup.tsx              # Popup script
│   └── content.tsx            # Content script (optional)
├── vite.config.ts             # Vite configuration
└── package.json
The key files:
  • manifest.json - Defines your extension’s permissions, pages, and content scripts
  • vite.config.ts - Configures CRXJS and any additional Vite plugins
  • popup.html - The popup page shown when clicking the extension icon

​
Next steps

Learn core concepts

Understand manifests, pages, and content scripts

Configure your extension

Customize CRXJS behavior

Add frameworks

Use React, Vue, or Svelte

Build for production

Optimize and package your extension
Prefer to add CRXJS to an existing Vite project? Check out the Installation guide for step-by-step instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us