> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# What is Extension.js? Introduction and overview

> Learn what Extension.js does, how to choose the right CLI command, and where to start based on your browser extension development workflow.

<Frame>
  <img src="https://mintcdn.com/extensionjs/CP7lDr-8nGcTS-q3/images/BANNER.png?fit=max&auto=format&n=CP7lDr-8nGcTS-q3&q=85&s=875121cda069d4df7546619056a29887" alt="Extension.js" width="1280" height="640" data-path="images/BANNER.png" />
</Frame>

Build browser extensions for Chrome, Edge, and Firefox with one modern workflow. Extension.js handles manifest compilation, browser-specific output, reload behavior, and packaging. Focus on product features instead of build tooling.

Use familiar web tooling like [TypeScript](/docs/languages-and-frameworks/typescript), [React](/docs/languages-and-frameworks/react), [Vue](/docs/languages-and-frameworks/vue), and [Tailwind CSS](/docs/integrations/tailwindcss). Keep direct access to native extension APIs.

<Note>
  Comparing tools? See how Extension.js compares to other frameworks in the
  [framework comparison](/docs/compare).
</Note>

<Info>
  **CLI version:** Run `extension --version` (or `npx extension@latest   --version`) for the build you are using. The [extension package on
  npm](https://www.npmjs.com/package/extension) lists the latest publish.
  [GitHub releases](https://github.com/extension-js/extension.js/releases) track
  changelog-style notes without tying these docs to a specific patch number.
</Info>

## Video walkthrough

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/58e21900d693417db1e0e59c0a96c4b3?sid=80cf1003-7ed1-4f9d-a3fb-01c7876983ad" title="Extension.js developer workflow" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

## Choose your path

| If you are...                                  | Start here                                                                                                                                                      |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| New to browser extensions altogether           | [What is a browser extension?](/docs/concepts/what-is-a-browser-extension) and [Create your first extension](/docs/getting-started/create-your-first-extension) |
| Moving fast with AI tools and templates        | [Templates](/docs/getting-started/templates) and [Get started immediately](/docs/getting-started/immediately)                                                   |
| A seasoned web developer new to extensions     | [Create your first extension](/docs/getting-started/create-your-first-extension) and [Manifest](/docs/implementation-guide/manifest-json)                       |
| Debugging Manifest V3 service workers          | [Manifest V3 troubleshooting](/docs/concepts/manifest-v3) and [Background scripts](/docs/implementation-guide/background)                                       |
| Shipping production extensions across browsers | [Cross-browser compatibility](/docs/features/cross-browser-compatibility) and [Workflows overview](/docs/workflows/index)                                       |

## Choose the right command

| Goal                               | Command   | Example                                                         |
| ---------------------------------- | --------- | --------------------------------------------------------------- |
| Scaffold a project                 | `create`  | `npx extension@latest create my-extension --template=new-react` |
| Develop with watch mode            | `dev`     | `extension dev --browser=firefox`                               |
| Build production artifacts         | `build`   | `extension build --browser=chrome,firefox --zip`                |
| Build and launch production output | `start`   | `extension start --browser=edge`                                |
| Launch existing build output       | `preview` | `extension preview --browser=chrome`                            |

## Start a new extension

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/58e21900d693417db1e0e59c0a96c4b3?sid=80cf1003-7ed1-4f9d-a3fb-01c7876983ad" title="Create a new Extension.js project" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

Use the `create` command to scaffold a new project and `--template` to start from a stack-specific baseline.

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create <your-extension-name>
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create <your-extension-name>
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create <your-extension-name>
  ```

  ```bash bun theme={null}
  bunx extension@latest create <your-extension-name>
  ```

  ```bash deno theme={null}
  deno run -A npm:extension@latest create <your-extension-name>
  ```
</CodeGroup>

For a list of all supported templates, browse the [Templates](/docs/getting-started/templates) page.

## Use Extension.js with an existing extension

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/c7ae4fc7cdfc47c39334c7efe3175dd9?sid=035792a7-aec9-4f1a-852b-47ca7166a539" title="Add Extension.js to an existing extension" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

If you already have an extension, install the `extension` package and wire scripts once. This keeps local development, testing, and release builds consistent.

### Step 1: install the `extension` package as a `devDependency`

<CodeGroup>
  ```bash npm theme={null}
  npm install extension@latest --save-dev
  ```

  ```bash pnpm theme={null}
  pnpm add extension@latest --save-dev
  ```

  ```bash yarn theme={null}
  yarn add extension@latest --dev
  ```

  ```bash bun theme={null}
  bun add --dev extension@latest
  ```

  ```bash deno theme={null}
  deno add npm:extension@latest
  ```
</CodeGroup>

### Step 2: link your npm scripts to the `extension` commands

```json package.json theme={null}
{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "start": "extension start"
  },
  "devDependencies": {
    "extension": "latest"
  }
}
```

Done. Your extension is ready to use.

* Run `npm run dev` for daily iteration and watch mode.
* Run `npm run start` for production build + immediate launch.
* Run `npm run build` for store-ready production artifacts.

## Best practices

* **Keep one command flow:** Use `create` → `dev` → `build` as your default loop.
* **Target browsers explicitly:** Validate with `--browser=chrome,firefox` before release.
* **Centralize defaults:** Put shared command/browser settings in `extension.config.js`.

## Next steps

<CardGroup cols={2}>
  <Card title="Create your first extension" icon="rocket" href="/docs/getting-started/create-your-first-extension">
    Guided walkthrough for your first build.
  </Card>

  <Card title="Templates" icon="grid" href="/docs/getting-started/templates">
    Browse starter templates for every stack.
  </Card>

  <Card title="Playwright E2E" icon="check-double" href="/docs/workflows/playwright-e2e">
    Add quality gates to your workflow.
  </Card>

  <Card title="Telemetry and privacy" icon="shield" href="/docs/features/telemetry-and-privacy">
    Review the privacy contract.
  </Card>

  <Card title="Compare frameworks" icon="scale-balanced" href="/docs/compare">
    How Extension.js compares to other browser extension frameworks.
  </Card>
</CardGroup>