wxt/docs/get-started/installation.md

Installation

Bootstrap a new project or start from scratch.

Bootstrap Project

:::warning 🚧 This feature is not implemented yet!

See From Scratch instead.

:::

:::code-group

pnpx wxt@latest init <project-name>

npx wxt@latest init <project-name>

:::

From Scratch

Create a new NPM project:

:::code-group

pnpm init <project-name>
cd <project-name>
echo 'shamefully-hoist=true' >> .npmrc

npm init <project-name>
cd <project-name>

yarn init <project-name>
cd <project-name>

:::

Then install wxt:

:::code-group

pnpm add wxt

npm i --save wxt

yarn add wxt

:::

Finally, add package.json scripts:

{
  "scripts": {
    "dev": "wxt",
    "dev:firefox": "wxt --browser firefox",
    "build": "wxt build",
    "build:firefox": "wxt build --browser firefox"
  }
}

Development

Once you've installed WXT, you can start the development server using the dev command:

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

Now that your WXT project is setup, you're ready to build a out your web extension!

• Learn how to add entrypoints like the popup, background, or content scripts
• Configure WXT by creating a wxt.config.ts file