Installation

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

Bootstrap Project

pnpm

pnpm dlx wxt@latest init <project-name>

npm

npx wxt@latest init <project-name>

bun

# The "wxt init" command currently fails when ran with bunx.
# Use NPX as a workaround, and select "bun" as your package
# manager. To stay up to date with this issue, follow
# https://github.com/wxt-dev/wxt/issues/707
#
# bunx wxt@latest init <project-name>

npx 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:

pnpm

pnpm init
pnpm add -D wxt

npm

npm init
npm i --save-dev wxt

yarn

yarn init
yarn add --dev wxt

bun

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", 
    "dev:firefox": "wxt --browser firefox", 
    "build": "wxt build", 
    "build:firefox": "wxt build --browser firefox", 
    "zip": "wxt zip", 
    "zip:firefox": "wxt zip --browser firefox", 
    "postinstall": "wxt prepare"
  }
}

Development

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

pnpm dev

🎉 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