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