Internationalization
This guide is for using the vanilla, browser.i18n
APIs. There are two other alternatives:
@wxt-dev/i18n
- a wrapper aroundbrowser.i18n
APIs with additional features, a simplified localization file format, and editor support- 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:
// wxt.config.ts
export default defineConfig({
manifest: {
default_locale: 'en',
name: '__MSG_extName__',
description: '__MSG_extDescription__',
},
});
You can localize the
name
anddescription
of your extension from themanifest
config as well.
Finally, to get a translation, call browser.i18n.getMessage
:
browser.i18n.getMessage('extName');
browser.i18n.getMessage('extDescription');
browser.i18n.getMessage(/* etc */);
Examples
See the official localization examples for more details: