Skip to content

Installation

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

Bootstrap Project

sh
pnpm dlx wxt@latest init <project-name>
sh
npx wxt@latest init <project-name>
sh
# 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
TypeScript Logo vanilla
Vue Logo vue
React Logo react
Svelte Logo svelte
Solid Logo 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:

sh
pnpm init
pnpm add -D wxt
sh
npm init
npm i --save-dev wxt
sh
yarn init
yarn add --dev wxt
sh
bun init
bun add --dev wxt

Add your first entrypoint:

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

And add scripts to your package.json:

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.

sh
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