chrome-extension

The preset for Chrome and WebExtension locales. It reads _locales/*/messages.json, getMessage calls and __MSG_name__ references.

The chrome-extension preset supports the i18n API of Chrome extensions, and of WebExtensions in other browsers.

Detection

The preset applies when manifest.json, src/manifest.json or public/manifest.json has a default_locale field. If your config has no sourceLocale, x18n uses default_locale as the source locale.

x18n.config.ts
import { chromeExtension } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [chromeExtension()],
})

Locale files

If your config has no resources, the preset uses _locales/{locale}/messages.json and {src,public,extension}/_locales/{locale}/messages.json.

Resource transform

In messages.json, each message is an object with a message field and other fields, such as description. The preset reads the message field as the value of the key:

_locales/de/messages.json
{
  "appName": { "message": "App", "description": "Name" },
  "hello": { "message": "Hallo $user$" }
}

This file has the keys appName and hello, with the values App and Hallo $user$. When x18n sets a value, it writes the message field and keeps the other fields. x18n set hello --locale en --value 'Hello $user$' adds "hello": { "message": "Hello $user$" } to _locales/en/messages.json.

Supported syntax

chrome.i18n.getMessage, browser.i18n.getMessage and i18n.getMessage are translate calls:

src/popup.js
chrome.i18n.getMessage('hello')

In JSON, HTML and CSS files, the preset reads __MSG_name__ references, so the strings of manifest.json count as usages:

manifest.json
{
  "name": "__MSG_appName__",
  "default_locale": "de"
}

Placeholders

Dollars: $name$.

Extraction templates

KindsTemplate
js-string, js-templatechrome.i18n.getMessage('{key}')