Manifest

As a requirement from web stores, every extension must have a manifest.json file in its root directory that lists important information about the structure and behavior of that extension.

It's a JSON file that contains metadata about the extension, such as its name, version, and permissions.

You can read more about it in the official documentation.

Where is the manifest.json file?

WXT abstracts away the manifest file. The framework generates the manifest under the hood based on your source files and configurations you export from your code, similar to how Next.js abstracts page routing and SSG with the file system and page components.

That way, you don't have to manually create the manifest.json file and worry about correctly setting all the fields.

Most of the common properties are taken from the package.json and wxt.config.ts files:

WXT build process centralizes common metadata and resolves any static file references (such as popup, background, content scripts, and so on) automatically.

This enables you to focus on the metadata that matters, such as name, description, OAuth, and so on.

Overriding manifest

Sometimes, you want to override the default manifest fields (e.g. because you need to add a new permission that is required for your extension to work).

You'll need to modify your project's wxt.config.ts like so:

export default defineConfig({
  manifest: {
    permissions: ["activeTab"],
  },
});

Then, your settings will be merged with the settings auto-generated by WXT.

Environment variables

You can use environment variables inside the manifest overrides:

export default defineConfig({
  manifest: {
    browser_specific_settings: {
      gecko: {
        id: import.meta.env.VITE_FIREFOX_EXT_ID,
      },
    },
  },
});

If the environment variable could not be found, the field will be removed completely from the manifest.

Locales

TurboStarter extension supports localization out-of-the-box. You can customize e.g. your extension's name and description based on the language of the user's browser.

Locales are defined in the /public/_locales directory. The directory should contain a messages.json file for each language you want to support (e.g. /public/_locales/en/messages.json and /public/_locales/es/messages.json).

By default, the first locale alphabetically available is used as default. However, you can specify a default_locale in your manifest like so:

export default defineConfig({
  manifest: {
    default_locale: "en",
  },
});

To reference a locale string inside your manifest overrides, wrap the key inside __MSG_<key>__:

export default defineConfig({
  manifest: {
    name: "__MSG_extensionName__",
    description: "__MSG_extensionDescription__",
  },
});