WXT

Appearance

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: