Skip to content

Internationalization

This guide is for using the vanilla, browser.i18n APIs. There are two other alternatives:

  1. @wxt-dev/i18n - a wrapper around browser.i18n APIs with additional features, a simplified localization file format, and editor support
  2. Third party packages - You can use any i18n package on NPM, most of which are more feature rich than browser.i18n and @wxt-dev/i18n

INFO

Currently, using the browser.i18n APIs are the recommended approach. WXT has some built-in support for them and they work well enough. @wxt-dev/i18n was recently released, and it will become the recommended approach after some of the bugs have been worked out. Head over to it's docs to learn more.

Setup

First familiarize yourself with Chrome's docs. The only difference when using these APIs with WXT is where you put the localization files - in the public directory.

<srcDir>/
└─ public/
   └─ _locales/
      ├─ en/
      │  └─ messages.json
      ├─ de/
      │  └─ messages.json
      └─ ko/
         └─ messages.json

Next, to set a default_locale on your manifest, add it to your wxt.config.ts file:

ts
// wxt.config.ts
export default defineConfig({
  manifest: {
    default_locale: 'en',
    name: '__MSG_extName__',
    description: '__MSG_extDescription__',
  },
});

You can localize the name and description of your extension from the manifest config as well.

Finally, to get a translation, call browser.i18n.getMessage:

ts
browser.i18n.getMessage('extName');
browser.i18n.getMessage('extDescription');
browser.i18n.getMessage(/* etc */);

Examples

See the official localization examples for more details: