Installation

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

• Bootstrap Project
  • Demo
• From Scratch
• Next Steps

Bootstrap Project

Run the init command, and follow the instructions.

PNPM

pnpm dlx wxt@latest init

Bun

bunx wxt@latest init

NPM

npx wxt@latest init

Yarn

# Use NPM initially, but select Yarn when prompted
npx wxt@latest init

Starter Templates:

Vanilla
Vue
React
Svelte
Solid

All templates use TypeScript by default. To use JavaScript, change the file extensions.

Demo

Once you've run the dev command, continue to Next Steps!

From Scratch

1. Create a new project

   PNPM

   cd my-project
   pnpm init

   Bun

   cd my-project
   bun init

   NPM

   cd my-project
   npm init

   Yarn

   cd my-project
   yarn init

2. Install WXT:

   PNPM

   pnpm i -D wxt

   Bun

   bun i -D wxt

   NPM

   npm i -D wxt

   Yarn

   yarn add --dev wxt

3. Add an entrypoint, my-project/entrypoints/background.ts:

   ts

   export default defineBackground(() => {
     console.log('Hello world!');
   });

4. Add scripts to your package.json:

   package.json

   {
     "scripts": {
       "dev": "wxt", 
       "dev:firefox": "wxt -b firefox", 
       "build": "wxt build", 
       "build:firefox": "wxt build -b firefox", 
       "zip": "wxt zip", 
       "zip:firefox": "wxt zip -b firefox", 
       "postinstall": "wxt prepare"
     }
   }

5. Run your extension in dev mode

   PNPM

   pnpm dev

   Bun

   bun run dev

   NPM

   npm run dev

   Yarn

   yarn dev

   WXT will automatically open a browser window with your extension installed.

Next Steps

• Keep reading on about WXT's Project Structure and other essential concepts to learn
• Configure automatic browser startup during dev mode
• Explore WXT's example library to see how to use specific APIs or perform common tasks
• Checkout the community page for a list of resources made by the community!