Configuration

Manifest

Learn how to configure the manifest of your extension.

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?

Plasmo 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 file:

Manifest FieldAbstractions
iconsAuto generated with the icon.png in the /assets directory
action, browser_actionsPopup window
options_uiOptions page
content_scriptsContent scripts
backgroundBackground service worker
manifest_versionset by the --target build flag, default to 3
versionset by the version field in package.json
nameset by the displayName field in package.json
descriptionset by the description field in package.json
authorset by the author field in package.json
homepage_urlset by the homepage field in package.json

Plasmo centralizes common metadata between package.json and manifest.json 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, declarative_net_request, 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 package.json like so:

apps/extension/package.json
"manifest": {
    "permissions": [
        "activeTab"
    ]
}

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

Environment variables

You can use environment variables inside the manifest overrides:

apps/extension/package.json
"manifest": {
  "browser_specific_settings": {
    "gecko": {
      "id": "$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 /locales directory. The directory should contain a messages.json file for each language you want to support (e.g. /locales/en/messages.json and /locales/es/messages.json).

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

apps/extension/package.json
"manifest": {
  "default_locale": "en"
}

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

apps/extension/package.json
{
  "name": "with-locales-i18n",
  "displayName": "__MSG_extensionName__",
  "version": "0.0.0",
  "description": "__MSG_extensionDescription__",
  "manifest": {
    "name": "__MSG_extensionName__"
  }
}

Last updated on

On this page

Ship your startup everywhere. In minutes.Get TurboStarter