wxt/docs/guide/manifest.md

Manifest.json

The manifest.json is generated at build-time based on files in your entrypoints directory and your wxt.config.ts.

Confiuration

While entrypoints are generated and added to the manifest at build-time, you can customize or add to your manifest.json in the config file.

import { defineConfig } from 'wxt';

export default defineConfig({
  manifest: {
    host_permissions: ['*://google.com/*'],
    content_security_policy: {
      // ...
    },
  },
});

name

If not provided via the manifest config, the manifest's name defaults to your package.json's name property.

version and version_name

The manifest's version and version_name fields are based on your package.json's version property.

• version_name is the exact string listed in your package.json
• version is the string cleaned up, with any invalid suffixes removed

Example

// package.json
{
  "version": "1.3.0-alpha2"
}

// .output/<dir>/manifest.json
{
  "version": "1.3.0",
  "version_name": "1.3.0-alpha2"
}

icons

By default, WXT will discover icons in your public directory and use them for the manifest's icons.

public/
├─ icon-16.png
├─ icon-24.png
├─ icon-48.png
├─ icon-96.png
└─ icon-128.png

Icon files need to match the following regex to be automatically included in the manifest. Most design software can output icons in one of these formats

<<< @/../src/core/utils/manifest.ts#snippet

If you prefer to use filenames in a different format, you can add the icons manually in your wxt.config.ts file:

export default defineConfig({
  manifest: {
    icons: {
      16: '/extension-icon-16.png',
      24: '/extension-icon-24.png',
      48: '/extension-icon-48.png',
      96: '/extension-icon-96.png',
      128: '/extension-icon-128.png',
    },
  },
});

permissions

Permissions must be listed in the manifest config.

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

Localization

Similar to the icon, the _locales directory should be placed inside the the WXT's public directory.

public/
└─ _locales/
   ├─ en/
   │  └─ messages.json
   ├─ es/
   │  └─ messages.json
   └─ ko/
      └─ messages.json

Then you'll need to explicitly override the name and description properties in your config for them to be localized.

export default defineConfig({
  manifest: {
    name: '__MSG_extName__',
    description: '__MSG_extDescription__',
    default_locale: 'en',
  },
});