wxt/docs/get-started/installation.md

Installation

Bootstrap a new project, start from scratch, or migrate an existing project.

Bootstrap Project

:::code-group

pnpm dlx wxt@latest init <project-name>

npx wxt@latest init <project-name>

bunx wxt@latest init <project-name>

:::

There are several starting templates available.

TypeScript
vanilla
vue
react
svelte
solid

:::info All templates default to TypeScript. Rename the file extensions to .js to use JavaScript instead. :::

From Scratch

Initialize a project and install wxt:

:::code-group

pnpm init
pnpm add -D wxt

npm init
npm i --save-dev wxt

yarn init
yarn add --dev wxt

bun init
bun add --dev wxt

:::

Add your first entrypoint:

// entrypoints/background.ts
export default defineBackground(() => {
  console.log(`Hello from ${browser.runtime.id}!`);
});

And add scripts to your package.json:

{
  "scripts": {
    "dev": "wxt", // [!code ++]
    "dev:firefox": "wxt --browser firefox", // [!code ++]
    "build": "wxt build", // [!code ++]
    "build:firefox": "wxt build --browser firefox", // [!code ++]
    "zip": "wxt zip", // [!code ++]
    "zip:firefox": "wxt zip --browser firefox", // [!code ++]
    "postinstall": "wxt prepare" // [!code ++]
  }
}

Development

Once the project is setup, you can start the development server using the dev script.

pnpm dev

:::tip 🎉 Well done!

The dev command will build the extension for development, open the browser, and reload the different parts of the extension when you save changes. :::

Next Steps

You're ready to build your web extension!

• Read the rest of the "Get Started" pages for a high-overview of what WXT can do
• Read the Guide to learn in-depth about each feature WXT supports
• Configure WXT by creating a wxt.config.ts file
• Checkout example projects to see how to perform common tasks with WXT