Migrate to WXT
If you have problems migrating to WXT, feel free to ask for help in GitHub by starting a discussion!
Always start by generating a new vanilla project and merging it into your project one file at a time.
pnpx wxt@latest init example-wxt --template vanilla
In general, you'll need to:
package.json scripts to use
wxt (don't forget about
Move entrypoints into
Move assets into either the
Move manifest.json content into
Convert custom import syntax to be compatible with Vite
Add a default export to JS entrypoints
browser global instead of
manifest.json files, making sure permissions and host permissions are unchanged
Extension output by
wxt build works the same way as before the migration
Every project is different, so there's no one-solution-fits-all to migrating your project. Just make sure
wxt dev runs,
wxt build results in a working extension, and the list of permissions in the
manifest.json hasn't changed. If all that looks good, you've finished migrating your extension!
Here's specific steps for other popular frameworks/build tools.
Since you're already using Vite, it's a simple refactor.
- Move and refactor your entrypoints to WXT's style (with a default export)
- Update package.json scripts to use
"postinstall": "wxt prepare"script
- Move the
- Move any custom settings from
.output/*/manifest.json, they should have the same content as before. If not, tweak your entrypoints and config to get as close as possible.
- Move entrypoints into
entrypoints/directory, merging the named exports used to configure your JS entrypoints into WXT's default export
- Move public
- If you use CSUI, migrate to WXT's
- Convert Plasmo's custom import resolutions to Vite's
- If importing remote code via a URL, add a
url:prefix so it works with WXT
- Compare your output
manifest.jsonfiles from before the migration to after the migration. They should have the same content. If not, tweak your entrypoints and config to get as close as possible.