WXT

Appearance

Configuration ​

By default, WXT provides sensible configuration for bundling web extensions with Vite.

Config File ​

To configure WXT, create a wxt.config.ts file in your project root. It should have the following contents:

ts
import { defineConfig } from 'wxt';

export default defineConfig({
  // My WXT config
});

INFO

For more information on configuring WXT via the wxt.config.ts file, read the dedicated wxt.config.ts guide.

Manifest.json ​

WXT generates your extension's manifest.json based on the project structure. To add additional properties, like permissions, use the manifest property.

ts
import { defineConfig } from 'wxt';

export default defineConfig({
  manifest: {
    permissions: ['storage'],
  },
});

INFO

For more information on configuring the manifest, read the dedicated Manifest guide.

Environment ​

WXT can read .env files, and variables are accessible via import.meta.env.*.

sh
VITE_OAUTH_CLIENT_ID=abc123
ts
import.meta.env.VITE_OAUTH_CLIENT_ID;

INFO

For more information on using .env files, read the dedicated .env guide.