wxt/docs/get-started/installation.md

Installation

Bootstrap a new project or start from scratch.

Bootstrap Project

:::warning 🚧 The wxt init command is not implemented yet.

See From Scratch or reference one of the templates below.

:::

:::code-group

pnpx wxt@latest init <project-name>

npx wxt@latest init <project-name>

:::

There are several starting templates available.

TypeScript
vanilla
vue
react
svelte

All templates are in TypeScript. WXT does not support JS at this time.

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

:::

Add your first entrypoint:

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

Finally, 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 ++]
    "postinstall": "wxt prepare" // [!code ++]
  }
}

You can skip *:firefox scripts if you don't want to support Firefox

Development

Once you've installed WXT, 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 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