wxt/docs/guide/installation.md

Installation

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

toc

Bootstrap Project

Run the init command, and follow the instructions.

:::code-group

pnpm dlx wxt@latest init

bunx wxt@latest init

npx wxt@latest init

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

:::

:::info 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 :::code-group

   cd my-project
   pnpm init
   

   cd my-project
   bun init
   

   cd my-project
   npm init
   

   cd my-project
   yarn init
   

   :::

2. Install WXT: :::code-group

   pnpm i -D wxt
   

   bun i -D wxt
   

   npm i -D wxt
   

   yarn add --dev wxt
   

   :::

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

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

   :::

4. Add scripts to your package.json:

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

5. Run your extension in dev mode :::code-group

   pnpm dev
   

   bun run dev
   

   npm run dev
   

   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!