Quick Start

Quick start

pnpm create extro my-extension

npm create extro@latest my-extension

yarn create extro my-extension

bun create extro my-extension

cd my-extension
pnpm dev

That's a running extension with HMR. Edit src/app/popup/page.tsx and the popup hot-reloads with state preserved.

Requirements

• Node.js 20+
• A package manager (pnpm, npm, yarn, or bun). Examples in these docs use pnpm.
• Chrome or any Chromium-based browser.

Manual setup

To add Extro to an existing project, install it yourself:

pnpm add extrojs react react-dom

extrojs is the whole framework: the CLI, the Vite plugin, and the runtime you import in app code through subpaths (extrojs/link, extrojs/navigation, extrojs/asset). It is the only Extro package you add. react and react-dom are peer dependencies, needed for the React surfaces (popup, options, sidepanel, CSUI); a script-only extension can skip them.

Add the scripts to package.json:

{
  "scripts": {
    "dev": "extro dev",
    "build": "extro build"
  }
}

Add an extro.config.ts:

import { defineConfig } from "extrojs"

export default defineConfig({
  name: "My Extension",
  description: "A Chrome extension built with Extro.",
  permissions: ["storage"],
})

And your first surface:

export default function Popup() {
  return <h1>Hello from Extro.</h1>
}

That is enough. The popup is a real React tree, file-based, picked up automatically.

The dev loop

pnpm dev does an initial build so output/chrome-mv3-dev/ is loadable, then starts a Vite dev server. The manifest and HTML shells in the dev output point at http://localhost:<port>, so HMR works against a real extension. You load the unpacked directory once; restarts of extro dev do not require reloading the extension.

Production build

pnpm build

This writes a fully bundled, minified extension to output/chrome-mv3-prod/. See Building for Production.