### Install Svelte loader and TypeScript for explicit setup

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/svelte.mdx

For explicit setup in an existing project, install the Svelte loader and TypeScript. This ensures Svelte files are processed correctly and provides TypeScript support.

```bash
npm install -D svelte-loader typescript
```

--------------------------------

### Canonical install command syntax

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/install.mdx

This demonstrates the basic syntax for installing a browser runtime using the `install` command, showing variations for different package managers (npm, pnpm, yarn, bun).

```bash
extension install <browser>
```

```bash
extension install <browser>
```

```bash
extension install <browser>
```

```bash
extension install <browser>
```

```bash
extension install <browser>
```

--------------------------------

### Example Readiness Gate for Playwright

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/workflows/ci-templates.mdx

This bash command demonstrates how to use the Extension.js CLI to start the extension in a wait-enabled mode, checking for readiness before proceeding with Playwright tests. It includes a timeout and specifies JSON output for automation.

```bash
pnpm extension start --wait --browser=chromium --wait-timeout=60000 --wait-format=json
```

--------------------------------

### Create extension and install dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/create.mdx

Scaffolds a new extension project and automatically installs its dependencies using the `--install` flag. This is useful for immediately setting up a runnable project.

```npm
npx extension@latest create my-extension --install
```

```pnpm
pnpx extension@latest create my-extension --install
```

```yarn
yarn dlx extension@latest create my-extension --install
```

```bun
bunx extension@latest create my-extension --install
```

```bun
bunx extension@latest create my-extension --install
```

--------------------------------

### Create Content React Extension with bun

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Use this command to create a new extension with a React content-script-first setup. Ensure you have bun installed.

```bash
bunx extension@latest create my-extension --template=content-react
```

--------------------------------

### Start Development Server with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/README.md

Run this command to start the development server for the Extension.js documentation site.

```sh
pnpm dev
```

--------------------------------

### Create Stylelint Configuration with Extension.js

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/stylelint.mdx

Use the Extension.js CLI to create a new extension with a preconfigured Stylelint setup. This is a quick way to start linting your CSS from scratch.

```bash
npx extension@latest create my-extension --template=new-config-stylelint
```

```bash
pnpx extension@latest create my-extension --template=new-config-stylelint
```

```bash
yarn dlx extension@latest create my-extension --template=new-config-stylelint
```

```bash
bunx extension@latest create my-extension --template=new-config-stylelint
```

```bash
bunx extension@latest create my-extension --template=new-config-stylelint
```

--------------------------------

### Clone and Run MDN Examples in Edge with Polyfill

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/immediately.mdx

Clone the MDN WebExtensions examples repository, navigate to a specific example, and run it in Microsoft Edge with the polyfill enabled. This is suitable for adapting Firefox-oriented extensions to Chromium browsers.

```bash
git clone https://github.com/mdn/webextensions-examples.git
cd webextensions-examples/apply-css
npx extension@latest dev . --browser=edge --polyfill=true
```

--------------------------------

### Install Vue SFC toolchain

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/vue.mdx

For explicit setup in existing projects, install the Vue Single File Component toolchain.

```bash
npm install -D vue-loader @vue/compiler-sfc
```

--------------------------------

### Create, Develop, and Build an Extension with TypeScript Template

Source: https://github.com/extension-js/extension.js.org/blob/main/blog/announcing-3-0-0.mdx

Scaffold a new extension using the TypeScript template, start the development server, and build production artifacts. Ensure you have the latest `extension` package installed.

```bash
npx extension@latest create my-extension --template=new-typescript
cd my-extension
pnpm dev
pnpm build
```

--------------------------------

### Start Extension with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/start.mdx

Starts the extension build process using npm. This command builds production output and launches the extension in the default browser.

```bash
extension start
```

--------------------------------

### Create Content React Extension with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Use this command to create a new extension with a React content-script-first setup. Ensure you have npm installed.

```bash
npx extension@latest create my-extension --template=content-react
```

--------------------------------

### Build and launch Extension.js production output for Edge

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/index.mdx

The `start` command builds the extension for production and immediately launches it in the specified browser.

```bash
extension start --browser=edge
```

--------------------------------

### Install command usage with options

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/install.mdx

This shows the general syntax for the install command, including the optional browser name argument and various options. It supports different package managers like npm, pnpm, yarn, and bun.

```bash
extension install [browser-name] [options]
```

```bash
extension install [browser-name] [options]
```

```bash
extension install [browser-name] [options]
```

```bash
extension install [browser-name] [options]
```

```bash
extension install [browser-name] [options]
```

--------------------------------

### Install Xcode and Set Toolchain

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/browsers/safari.mdx

Ensure Xcode is installed and configure the system to use its command-line tools. This is a prerequisite for building Safari extensions.

```bash
sudo xcode-select --switch /Applications/Xcode.app
xcodebuild -runFirstLaunch
```

--------------------------------

### Preview Local Extension with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/preview.mdx

Use this command to preview your local extension build. This example uses npm.

```bash
extension preview ./my-extension
```

--------------------------------

### Install React Runtime Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Install React and ReactDOM for your extension. Use this command if you are adding React to an existing extension.

```bash
npm install react react-dom
```

--------------------------------

### Create Content React Extension with yarn

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Use this command to create a new extension with a React content-script-first setup. Ensure you have yarn installed.

```bash
yarn dlx extension@latest create my-extension --template=content-react
```

--------------------------------

### Show the managed install path for a browser

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/install.mdx

Use the `--where` flag with the `install` command to display the exact file path where a specific browser runtime is stored in the Extension.js cache. This is helpful for verifying installation locations or scripting automation.

```bash
extension install chrome --where
```

--------------------------------

### Install Stylelint and Prettier Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/stylelint.mdx

Install Stylelint and Prettier along with the necessary integration package as development dependencies.

```bash
npm install -D stylelint-prettier prettier
```

--------------------------------

### Start Command Usage with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/start.mdx

Use this command to build and launch your extension. It accepts an optional path or URL and various options to control the build and launch process.

```bash
extension start [path-or-url] [options]
```

--------------------------------

### Create Content React Extension with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Use this command to create a new extension with a React content-script-first setup. Ensure you have pnpm installed.

```bash
pnpx extension@latest create my-extension --template=content-react
```

--------------------------------

### Install a managed Extension.js browser runtime for Chrome

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/index.mdx

The `install` command is used to install a managed browser runtime environment for Extension.js.

```bash
extension install chrome
```

--------------------------------

### Basic create command usage

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/create.mdx

Scaffolds a new extension project. Specify the project name or path. Options can be appended to customize the template and dependency installation.

```npm
npx extension@latest create <extension-name|extension-path> [options]
```

```pnpm
pnpx extension@latest create <extension-name|extension-path> [options]
```

```yarn
yarn dlx extension@latest create <extension-name|extension-path> [options]
```

```bun
bunx extension@latest create <extension-name|extension-path> [options]
```

```bun
bunx extension@latest create <extension-name|extension-path> [options]
```

--------------------------------

### Install Extension.js Package

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/index.mdx

Install the `extension` package as a dev dependency for an existing extension. Select the command matching your package manager.

```bash
npm install extension@latest --save-dev
```

```bash
pnpm add extension@latest --save-dev
```

```bash
yarn add extension@latest --dev
```

```bash
bun add --dev extension@latest
```

```bash
bun add --dev extension@latest
```

--------------------------------

### Browser-Specific Environment Variables Example

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/features/environment-variables.mdx

Example of setting browser-specific environment variables for different build targets.

```ini
# .env.chrome.development
EXTENSION_PUBLIC_API_URL=https://api-dev.chrome.com
```

```ini
# .env.firefox.production
EXTENSION_PUBLIC_API_URL=https://api.firefox.com
```

--------------------------------

### Run MDN WebExtensions Examples in Edge with Polyfill

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/immediately.mdx

Use npm, pnpm, yarn, or bun to run MDN WebExtensions examples in Microsoft Edge, enabling the polyfill for compatibility. The polyfill translates Firefox-specific browser API calls to Chrome-compatible ones.

```bash
npx extension@latest dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
```

```bash
pnpx extension@latest dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
```

```bash
yarn dlx extension@latest dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
```

```bash
bunx extension@latest dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
```

```bash
bunx extension@latest dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
```

--------------------------------

### Create ESLint configuration with bun

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/eslint.mdx

Use this command to create a new extension project with a preconfigured ESLint setup using bun.

```bash
bunx extension@latest create my-extension --template=new-config-eslint
```

--------------------------------

### Install multiple browser runtimes

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/install.mdx

Install several browser runtimes simultaneously by specifying them with the `--browser` flag, separated by commas. This is useful for setting up cross-browser testing environments.

```bash
extension install --browser chrome,firefox
```

--------------------------------

### Run local extension with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/dev.mdx

Use this command to start developing a local extension with npm. Watch mode is enabled by default.

```bash
extension dev ./my-extension
```

--------------------------------

### Prettier Configuration Example

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/prettier.mdx

A sample `.prettierrc` file demonstrating common Prettier formatting options like semicolons, quotes, and indentation.

```json
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}
```

--------------------------------

### Install Optional Polyfill Packages

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/node.mdx

Install the necessary packages for Node.js polyfills, including `node-polyfill-webpack-plugin`, `crypto-browserify`, and `path-browserify`, as development dependencies.

```bash
npm install -D node-polyfill-webpack-plugin crypto-browserify path-browserify
```

--------------------------------

### Preview Local Extension in Edge and Chrome with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/preview.mdx

Preview your extension in multiple browsers simultaneously. This example uses npm and targets Edge and Chrome.

```bash
extension preview ./my-extension --browser=edge,chrome
```

--------------------------------

### Run Extension Development Server

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/webassembly.mdx

Start the development server for your local extension using the Extension.js CLI. This command is used during regular development workflows.

```bash
npx extension dev ./my-extension
```

```bash
pnpx extension dev ./my-extension
```

```bash
yarn dlx extension dev ./my-extension
```

```bash
bunx extension dev ./my-extension
```

```bash
bunx extension dev ./my-extension
```

--------------------------------

### Configure Babel Presets

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/babel.mdx

Create a babel.config.json file to define the presets Babel will use. This example uses the @babel/preset-env preset.

```json
{
  "presets": ["@babel/preset-env"]
}
```

--------------------------------

### Create ESLint configuration with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/eslint.mdx

Use this command to create a new extension project with a preconfigured ESLint setup using npm.

```bash
npx extension@latest create my-extension --template=new-config-eslint
```

--------------------------------

### Development and Build Commands

Source: https://github.com/extension-js/extension.js.org/blob/main/AGENTS.md

Common pnpm commands for installing dependencies, running a local development server, building the site, and performing checks.

```sh
pnpm install        # Install dependencies (Node >= 22.18.0, pnpm 10)
pnpm dev            # Local preview at localhost:3000
pnpm build          # Build the site (mint build)
pnpm broken-links   # Check internal links
pnpm validate       # Validate the docs build
pnpm check          # lint + format + spellcheck
pnpm test           # Run vitest tests

```

--------------------------------

### Extension.js CLI Commands

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/compare/extension-js-vs-wxt.mdx

Run Extension.js in development mode for multiple browsers, build for production with zip packaging, or start a sample project from a remote URL.

```bash
extension dev --browser=chrome,firefox
extension build --browser=chrome,firefox --zip
extension dev https://github.com/user/repo/tree/main/path
```

--------------------------------

### Install a single browser runtime

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/install.mdx

Use this command to add a specific browser runtime to the Extension.js cache. For example, to install Chrome for Testing, use `extension install chrome`.

```bash
extension install <browser>
```

```bash
extension install chrome
```

--------------------------------

### Create New React Extension with bun

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Use this command to create a new extension with a React new-tab experience. Ensure you have bun installed.

```bash
bunx extension@latest create my-extension --template=new-react
```

--------------------------------

### Start Extension in Firefox

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/start.mdx

Launches the extension in the Firefox browser. Supports npm, pnpm, yarn, and bun package managers.

```bash
extension start --browser firefox
```

```bash
extension start --browser firefox
```

```bash
extension start --browser firefox
```

```bash
extension start --browser firefox
```

```bash
extension start --browser firefox
```

--------------------------------

### Create ESLint configuration with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/eslint.mdx

Use this command to create a new extension project with a preconfigured ESLint setup using pnpm.

```bash
pnpx extension@latest create my-extension --template=new-config-eslint
```

--------------------------------

### Run Dev Command with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/dev.mdx

Use this command to start the development server with watch mode and live reload capabilities when using npm.

```bash
extension dev [path-or-url] [options]
```

--------------------------------

### Full Extension.js Configuration Sample

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/features/extension-configuration.mdx

A comprehensive example of an Extension.js configuration file. It demonstrates how to set up browser configurations, define development and build commands, manage extension directories, and specify packages to transpile.

```javascript
export default {
  browser: {
    chrome: { browser: "chrome", profile: "default" },
    firefox: { browser: "firefox", persistProfile: true },
    "chromium-based": {
      browser: "chromium-based",
      chromiumBinary:
        "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
    },
  },
  commands: {
    dev: { browser: "chrome", polyfill: true, host: "0.0.0.0", extensions: { dir: "./extensions" } },
    start: { browser: "edge" },
    preview: { browser: "firefox" },
    build: {
      zipFilename: "extension.zip",
      zip: true,
      zipSource: true,
    },
  },
  extensions: { dir: "./extensions" },
  transpilePackages: ["@workspace/ui"],
  config: (config) => config,
};
```

--------------------------------

### Valid Default Export for Content Script Setup

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/implementation-guide/content-scripts.mdx

This TypeScript example demonstrates a valid default export for a content script, which is a synchronous function that can optionally return a cleanup callback.

```typescript
export default function main() {
  return () => {};
}
```

```typescript
const main = () => {};
export default main;
```

--------------------------------

### Configure PostCSS with Autoprefixer

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/postcss.mdx

Create a PostCSS configuration file to specify the plugins you want to use. This example includes Autoprefixer for adding vendor prefixes to CSS rules.

```javascript
export default {
  plugins: {
    autoprefixer: {},
  },
};
```

--------------------------------

### Install Extension.js and Uninstall CRXJS

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/migrate/from-crxjs.mdx

Install the Extension.js package and remove the CRXJS Vite plugin. Keep Vite installed if used for non-extension surfaces.

```bash
npm install extension@latest --save-dev
npm uninstall @crxjs/vite-plugin vite
```

--------------------------------

### Install TypeScript

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/typescript.mdx

Install TypeScript as a development dependency for your existing extension.

```bash
npm install -D typescript
```

--------------------------------

### Install Prettier

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/prettier.mdx

Install Prettier as a development dependency for your existing extension.

```bash
npm install -D prettier
```

--------------------------------

### Create Minimal Extension with Init Template

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/immediately.mdx

Use npm, pnpm, yarn, or bun to create a new extension project using the 'init' template. This template provides the most basic structure, including a manifest and icons, without any framework or UI.

```bash
npx extension@latest create my-extension --template=init
```

```bash
pnpx extension@latest create my-extension --template=init
```

```bash
yarn dlx extension@latest create my-extension --template=init
```

```bash
bunx extension@latest create my-extension --template=init
```

```bash
bunx extension@latest create my-extension --template=init
```

--------------------------------

### Create a New Extension Project

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/index.mdx

Use the `create` command to scaffold a new project. Choose the appropriate command for your package manager.

```bash
npx extension@latest create <your-extension-name>
```

```bash
pnpx extension@latest create <your-extension-name>
```

```bash
yarn dlx extension@latest create <your-extension-name>
```

```bash
bunx extension@latest create <your-extension-name>
```

```bash
bunx extension@latest create <your-extension-name>
```

--------------------------------

### Sample HTML Entrypoint Structure

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/implementation-guide/html.mdx

This is a basic HTML file structure that can be used as an entrypoint for extension pages. It includes links to a stylesheet and a script.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Extension Page</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="./main.ts"></script>
  </body>
</html>
```

--------------------------------

### Install Vue dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/vue.mdx

Install Vue.js as a project dependency using your package manager.

```bash
npm install vue
```

--------------------------------

### Build Production Site with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/README.md

Execute this command to build the production-ready version of the Extension.js documentation site.

```sh
pnpm build
```

--------------------------------

### Install Sass Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/sass.mdx

Install Sass and sass-loader as development dependencies for your existing extension.

```bash
npm install -D sass sass-loader
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/README.md

Use this command to install project dependencies using pnpm.

```sh
pnpm install
```

--------------------------------

### Create a new Svelte extension project with bun

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/svelte.mdx

Use the 'new-svelte' template to quickly set up a Svelte-first extension UI with minimal configuration. This command initializes a new project with Svelte pre-configured.

```bash
bunx extension@latest create my-extension --template=new-svelte
```

--------------------------------

### Install Less Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/less.mdx

Install the necessary Less and Less loader packages for your extension project.

```bash
npm install -D less less-loader
```

--------------------------------

### Create a new Svelte extension project with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/svelte.mdx

Use the 'new-svelte' template to quickly set up a Svelte-first extension UI with minimal configuration. This command initializes a new project with Svelte pre-configured.

```bash
pnpx extension@latest create my-extension --template=new-svelte
```

--------------------------------

### Create a new Svelte extension project with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/svelte.mdx

Use the 'new-svelte' template to quickly set up a Svelte-first extension UI with minimal configuration. This command initializes a new project with Svelte pre-configured.

```bash
npx extension@latest create my-extension --template=new-svelte
```

--------------------------------

### Install Stylelint Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/stylelint.mdx

Install Stylelint and the standard SCSS configuration as development dependencies for your existing extension.

```bash
npm install -D stylelint stylelint-config-standard-scss
```

--------------------------------

### Install ESLint Prettier Config

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/prettier.mdx

Install the `eslint-config-prettier` package to resolve formatting conflicts between ESLint and Prettier.

```bash
npm install -D eslint-config-prettier
```

--------------------------------

### Preview command with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/preview.mdx

Use this command to launch a built extension using npm. It takes an optional project path and various options to configure the preview.

```bash
extension preview [project-path] [options]
```

--------------------------------

### Install Preact Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/preact.mdx

Install Preact and its types for your extension. Extension.js automatically handles TypeScript types for Preact.

```bash
npm install preact
```

--------------------------------

### Create Content Main World Extension (bun)

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/implementation-guide/content-scripts.mdx

Use this command to create a new extension with the content-main-world template using bun.

```bash
bunx extension@latest create my-extension --template=content-main-world
```

--------------------------------

### Run Chrome extension sample with npm

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/immediately.mdx

Use this command to fetch and run a Chrome extension sample directly from GitHub using npm.

```bash
npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder
```

--------------------------------

### Install Babel Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/babel.mdx

Install the necessary Babel core packages and loader. This is a prerequisite for using Babel in your project.

```bash
npm install -D @babel/core @babel/preset-env babel-loader
```

--------------------------------

### Launch existing Extension.js build output for Chrome

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/index.mdx

Use the `preview` command to launch already built production artifacts in the specified browser without rebuilding.

```bash
extension preview --browser=chrome
```

--------------------------------

### Preview Production Build with pnpm

Source: https://github.com/extension-js/extension.js.org/blob/main/README.md

Use this command to preview the production build of the Extension.js documentation site.

```sh
pnpm preview
```

--------------------------------

### Install PostCSS Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/postcss.mdx

Install the necessary PostCSS dependencies for your extension. This includes PostCSS itself, the loader, and a common plugin like Autoprefixer.

```bash
npm install -D postcss postcss-loader autoprefixer
```

--------------------------------

### Create a New Extension

Source: https://github.com/extension-js/extension.js.org/blob/main/index.mdx

Use this command to initialize a new browser extension project with the latest version of Extension.js. This sets up the basic project structure and configuration.

```bash
npx extension@latest create my-extension
```

--------------------------------

### Development with Chromium (CLI)

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/browsers/browsers-available.mdx

Run the development server for Chromium using the CLI.

```bash
npx extension dev --browser=chromium
```

--------------------------------

### Install Svelte for an existing extension

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/svelte.mdx

Install Svelte as a dependency in your existing extension project. This is the first step to integrating Svelte components into your extension.

```bash
npm install svelte
```

--------------------------------

### Run Chrome extension sample with bun

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/immediately.mdx

Use this command to fetch and run a Chrome extension sample directly from GitHub using bun.

```bash
bunx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder
```

--------------------------------

### Claude Code MCP Server Installation

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/ai-access.mdx

Install the Extension.js MCP server using the Claude Code CLI for AI-powered documentation access.

```bash
claude mcp add --transport http extensionjs https://extensionjs.mintlify.app/mcp
```

--------------------------------

### Install ESLint core packages

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/eslint.mdx

Install the necessary ESLint packages for JavaScript and TypeScript linting. This command is compatible with npm, pnpm, yarn, and bun.

```bash
npm install -D eslint @eslint/js globals typescript-eslint
```

--------------------------------

### Install React Type Packages for TypeScript

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/react.mdx

Install TypeScript types for React and ReactDOM if your project uses TypeScript. Use this command when adding React to an existing extension.

```bash
npm install -D @types/react @types/react-dom
```

--------------------------------

### Development with custom Chromium binaries (CLI)

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/browsers/browsers-available.mdx

Run the development server with custom Chromium-based browsers. Specify the path to the binary using `--chromium-binary`.

```bash
npx extension dev --browser=chromium-based --chromium-binary=/path/to/browser
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/integrations/tailwindcss.mdx

Install the necessary Tailwind CSS and PostCSS packages as development dependencies for your extension project. Supports npm, pnpm, yarn, and bun.

```bash
npm install -D tailwindcss @tailwindcss/postcss postcss
```

```bash
pnpm install -D tailwindcss @tailwindcss/postcss postcss
```

```bash
yarn add -D tailwindcss @tailwindcss/postcss postcss
```

```bash
bun add --dev tailwindcss @tailwindcss/postcss postcss
```

```bash
bun add --dev tailwindcss @tailwindcss/postcss postcss
```

--------------------------------

### Create Extension with New Browser Flags Template

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/browsers/browser-flags.mdx

Use this command to create a new extension project pre-configured with browser flags examples. Available for npm, pnpm, yarn, and bun.

```bash
npx extension@latest create my-extension --template=new-browser-flags
```

```bash
pnpx extension@latest create my-extension --template=new-browser-flags
```

```bash
yarn dlx extension@latest create my-extension --template=new-browser-flags
```

```bash
bunx extension@latest create my-extension --template=new-browser-flags
```

```bash
bunx extension@latest create my-extension --template=new-browser-flags
```

--------------------------------

### Extension.js Project Scripts

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/getting-started/create-your-first-extension.mdx

These scripts are the default Extension.js commands for development, starting, and building your extension.

```json
{
  "scripts": {
    "dev": "extension dev",
    "start": "extension start",
    "build": "extension build"
  },
  "devDependencies": {
    "extension": "latest"
  }
}
```

--------------------------------

### Create a new extension with the action template

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/features/cross-browser-compatibility.mdx

Use this command to create a new extension project pre-configured with the 'action' template, which is suitable for cross-browser compatibility testing in Chrome, Firefox, and Edge.

```npm
npx extension@latest create my-extension --template=action
```

```pnpm
pnpx extension@latest create my-extension --template=action
```

```yarn
yarn dlx extension@latest create my-extension --template=action
```

```bun
bunx extension@latest create my-extension --template=action
```

```bun
bunx extension@latest create my-extension --template=action
```

--------------------------------

### Vue single-file component

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/languages-and-frameworks/vue.mdx

Example of a basic Vue single-file component with template, script, and scoped styles.

```vue
<!-- App.vue -->
<template>
  <h1>Hello, Vue.js Extension!</h1>
</template>

<script setup lang="ts">
// Component logic goes here.
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>
```

--------------------------------

### Create Content Main World Extension (npm)

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/implementation-guide/content-scripts.mdx

Use this command to create a new extension with the content-main-world template using npm.

```bash
npx extension@latest create my-extension --template=content-main-world
```

--------------------------------

### CRXJS Manifest Configuration (TypeScript Module)

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/migrate/from-crxjs.mdx

Example of a CRXJS manifest configuration using a TypeScript module.

```typescript
import { defineManifest } from "@crxjs/vite-plugin";
import pkg from "./package.json";

export default defineManifest({
  manifest_version: 3,
  name: pkg.name,
  version: pkg.version,
  action: { default_popup: "src/popup/index.html" },
  background: { service_worker: "src/background/index.ts" },
  content_scripts: [{ matches: ["<all_urls>"], js: ["src/content/index.ts"] }]
});
```

--------------------------------

### Uninstall all managed browsers

Source: https://github.com/extension-js/extension.js.org/blob/main/docs/commands/uninstall.mdx

Use the `--all` flag to remove all browser runtimes that Extension.js has installed in its managed cache.

```bash
extension uninstall --all
```