> ## 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? An introduction

> 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://media.extension.land/brand/extension-js/social/og.png" alt="Extension.js, the cross-browser extension framework" />
</Frame>

Build browser extensions for Chrome, Edge, Firefox, and Safari 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.youtube-nocookie.com/embed/OPQMFunUBcc?rel=0" title="Extension.js: npx extension dev, browser opens with your extension loaded" loading="lazy" allow="encrypted-media; picture-in-picture; 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=newtab-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.youtube-nocookie.com/embed/9Bm-PAQdQks?rel=0" title="Extension.js: npx extension create scaffolds a project" loading="lazy" allow="encrypted-media; picture-in-picture; 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 2+ 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.youtube-nocookie.com/embed/ecqoWM0ct1Y?rel=0" title="Extension.js: extension dev" loading="lazy" allow="encrypted-media; picture-in-picture; 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.