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

npx wxt@latest init

:::

There are several starting templates available.

TypeScript
vanilla
vue
react
svelte
solid

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

From Scratch

Create a new NPM project:

:::code-group

mkdir project-name
cd project-name
pnpm init
echo 'shamefully-hoist=true' >> .npmrc

mkdir project-name
cd project-name
npm init

mkdir project-name
cd project-name
yarn init

:::

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

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

🚧 WSL Support

WXT does not support Windows Subsystem for Linux yet. See Issue #55 to track progress.

In the meantime, you can use cmd instead.

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

:::details Development Manifest When running the dev command, WXT will make several changes to your manifest.json to improve your development experience:

• If missing, add a background script/service worker to enable fast reloads
• Add serveral permissions and host_permissions to enable HMR and fast reloads
• Modify the CSP to allow connections with the dev server
• Remove content_scripts and register them at runtime so they can be easily reloaded when you save a file

If you're an experienced web extension developer and think the dev manifest looks wrong, this is why. Run a production build with wxt build to see the unmodified manifest.json. :::

Next Steps

You're ready to build your web extension!

• Learn how to add entrypoints like the popup, options page, or content scripts
• Configure WXT by creating a wxt.config.ts file