I18n

Chrome Docs | Firefox Docs

The article introduces how to use i18n in your extension project.

Usage

Defining messages

Create _locales directory in the public directory. The directory structure is as follows:

public/
├── _locales/
│   ├── en/
│   │   └── messages.json
│   └── zh/
│       └── messages.json

The messages.json file stores the messages of the language. For example:

public/_locales/en/messages.json

{
  "extensionName": {
    "message": "Name",
    "description": "Name of the extension."
  },
  "extensionDescription": {
    "message": "Description",
    "description": "Description of the extension."
  }
}

Defining default_locale

Define the default_locale in the manifest.

web-extend.config.ts

import { defineConfig } from 'web-extend';

export default defineConfig({
  manifest: {
    default_locale: 'en',
  },
});

Using messages

In Manifest and CSS files, you can use the messages by referring to a string named messageName like this:

__MSG_messageName__

For example:

web-extend.config.ts

import { defineConfig } from 'web-extend';

export default defineConfig({
  manifest: {
    default_locale: 'en',
    name: '__MSG_extensionName__',
    description: '__MSG_extensionDescription__',
  },
});

In JavaScript files, you can use the messages by referring to a string named messageName like this:

chrome.i18n.getMessage('messageName');