WXT

Appearance

Publishing ​

WXT will help you ZIP your extensions and submit them to the stores for review.

First Time Publishing ​

If you're publishing an extension to a store for the first time, you must manually navigate the process. WXT doesn't help you create listings, each store has unique steps and requirements that you need to familiarize yourself with.

For specific details about each store, see the stores sections below.

Automation ​

WXT provides two commands to help automate the release process:

  • wxt submit init: Setup all the required secrets and options for the wxt submit command
  • wxt submit: Submit new versions of your extension for review (and publish them automatically once approved)

To get started, run wxt submit init and follow the prompts. Once finished, you should have a .env.submit file! WXT will use this file to submit your updates.

In CI, make sure you add all the environment variables to the submit step.

To release an update, build all the ZIPs you plan on releasing:

sh
wxt zip
wxt zip -b firefox

Then run the wxt submit command, passing in all the ZIP files you want to release. In this case, we'll do a release for all 3 major stores: Chrome Web Store, Edge Addons, and Firefox Addons Store.

If it's your first time running the command, you'll want to test your secrets by passing the --dry-run flag:

sh
wxt submit --dry-run \
  --chrome-zip .output/<your-extension>-<version>-chrome.zip \
  --firefox-zip .output/<your-extension>-<version>-firefox.zip --firefox-sources-zip .output/<your-extension>-<version>-sources.zip \
  --edge-zip .output/<your-extension>-<version>-chrome.zip

If the dry run passes, remove the flag and do the actual release:

sh
wxt submit \
  --chrome-zip .output/<your-extension>-<version>-chrome.zip \
  --firefox-zip .output/<your-extension>-<version>-firefox.zip --firefox-sources-zip .output/<your-extension>-<version>-sources.zip \
  --edge-zip .output/<your-extension>-<version>-chrome.zip

TIP

If you only need to release to a single store, only pass that store's ZIP flag.

TIP

See the Firefox Addon Store section for more details about the --firefox-sources-zip option.

GitHub Action ​

Here's an example of a GitHub Action that submits new versions of an extension for review. Ensure that you've added all required secrets used in the workflow to the repo's settings.

yml
name: Release

on:
  workflow_dispatch:

jobs:
  submit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Zip extensions
        run: |
          pnpm zip
          pnpm zip:firefox

      - name: Submit to stores
        run: |
          pnpm wxt submit \
            --chrome-zip .output/*-chrome.zip \
            --firefox-zip .output/*-firefox.zip --firefox-sources-zip .output/*-sources.zip
        env:
          CHROME_EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
          CHROME_CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
          CHROME_CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
          CHROME_REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
          FIREFOX_EXTENSION_ID: ${{ secrets.FIREFOX_EXTENSION_ID }}
          FIREFOX_JWT_ISSUER: ${{ secrets.FIREFOX_JWT_ISSUER }}
          FIREFOX_JWT_SECRET: ${{ secrets.FIREFOX_JWT_SECRET }}

The action above lays the foundation for a basic workflow, including zip and submit steps. To further enhance your GitHub Action and delve into more complex scenarios, consider exploring the following examples from real projects. They introduce advanced features such as version management, changelog generation, and GitHub releases, tailored for different needs:

  • aklinker1/github-better-line-counts - Conventional commits, automated version bump and changelog generation, triggered manually, optional dry run for testing
  • GuiEpi/plex-skipper - Triggered automatically when package.json version is changed, creates and uploads artifacts to GitHub release.

These examples are designed to provide clear insights and are a good starting point for customizing your own workflows. Feel free to explore and adapt them to your project needs.

Stores ​

Chrome Web Store ​

✅ Supported • Developer Dashboard • Publishing Docs

To create a ZIP for Chrome:

sh
wxt zip

Firefox Addon Store ​

✅ Supported • Developer Dashboard • Publishing Docs

Firefox requires you to upload a ZIP of your source code. This allows them to rebuild your extension and review the code in a readable way. More details can be found in Firefox's docs.

WXT fully supports generating and automatically submitting a source code ZIP.

When you run wxt zip -b firefox, your sources are zipped into the .output directory alongside the extension. WXT will automatically exclude certain files such as config files, hidden files, and tests. However, it's important to manually check the ZIP to ensure it only contains the files necessary to rebuild your extension.

To customize which files are zipped, add the zip option to your config file.

ts
// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  zip: {
    // ...
  },
});

If it's your first time submitting to the Firefox Addon Store, or if you've updated your project layout, always test your sources ZIP! The commands below should allow you to rebuild your extension from inside the extracted ZIP.

sh
pnpm i
pnpm zip:firefox
sh
npm i
npm run zip:firefox
sh
yarn
yarn zip:firefox
sh
bun i
bun zip:firefox

Make sure the build output is the exact same when running wxt build -b firefox in your main project and inside the zipped sources.

WARNING

If you use a .env files, they can effect the chunk hashes in the output directory. Either delete the .env file before running wxt zip -b firefox, or include it in your sources zip with the zip.includeSources option. Be careful to not include any secrets in your .env files.

See Issue #377 for more details.

Ensure that you have a README.md or SOURCE_CODE_REVIEW.md file with the above commands so that the Firefox team knows how to build your extension.

Private Packages ​

If you use private packages and you don't want to provide your auth token to the Firefox team during the review process, you can use zip.downloadPackages to download any private packages and include them in the zip.

ts
// wxt.config.ts
export default defineConfig({
  zip: {
    downloadPackages: [
      '@mycompany/some-package',
      //...
    ],
  },
});

Depending on your package manager, the package.json in the sources zip will be modified to use the downloaded dependencies via the overrides or resolutions field.

WARNING

WXT uses the command npm pack <package-name> to download the package. That means regardless of your package manager, you need to properly setup a .npmrc file. NPM and PNPM both respect .npmrc files, but Yarn and Bun have their own ways of authorizing private registries, so you'll need to add an .npmrc file.

Safari ​

🚧 Not supported yet

WXT does not currently support automated publishing for Safari. Safari extensions require a native MacOS or iOS app wrapper, which WXT does not create yet. For now, if you want to publish to Safari, follow this guide:

When running the safari-web-extension-converter CLI tool, pass the .output/safari-mv2 or .output/safari-mv3 directory, not your source code directory.

sh
pnpm wxt build -b safari
xcrun safari-web-extension-converter .output/safari-mv2

Edge Addons ​

✅ Supported • Developer Dashboard • Publishing Docs

No need to create a specific ZIP for Edge. If you're already publishing to the Chrome Web Store, you can reuse your Chrome ZIP.

However, if you have features specifically for Edge, create a separate ZIP with:

sh
wxt zip -b edge