I18n

Chrome Docs • Firefox Docs

이 페이지는 기본 browser.i18n API를 사용하여 국제화(i18n)를 설정하는 방법을 설명하고, 다른 방법을 사용하고 싶을 때의 대안을 언급합니다.

• 사용 방법
• 대안

사용 방법

1. 매니페스트에 default_locale 추가:

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

2. public/ 디렉토리에 messages.json 파일 생성:

   📂 {srcDir}/
      📂 public/
         📂 _locales/
            📂 en/
               📄 messages.json
            📂 de/
               📄 messages.json
            📂 ko/
               📄 messages.json

   // public/_locales/en/messages.json
   {
     "helloWorld": {
       "message": "Hello world!",
     },
   }

3. 번역 가져오기:

   browser.i18n.getMessage('helloWorld');

4. 선택 사항: 확장 프로그램 이름과 설명에 대한 번역 추가:

{
  "extName": {
    "message": "..."
  },
  "extDescription": {
    "message": "..."
  },
  "helloWorld": {
    "message": "Hello world!"
  }
}

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

대안

바닐라 API는 기능이 매우 제한적이기 때문에, i18next, react-i18n, vue-i18n 같은 서드파티 NPM 패키지를 사용하는 것을 고려할 수 있습니다.

하지만, 바닐라 API(또는 @wxt-dev/i18n처럼 바닐라 API를 기반으로 한 패키지)를 사용하는 것을 권장합니다. 그 이유는 다음과 같습니다:

• 매니페스트 파일과 CSS 파일의 텍스트를 지역화할 수 있습니다.
• 번역이 동기적으로 로드됩니다.
• 번역이 여러 번 번들링되지 않아 확장 프로그램의 크기를 작게 유지할 수 있습니다.
• 설정이 필요 없습니다.

하지만, 바닐라 API와 이를 기반으로 한 패키지에는 한 가지 큰 단점이 있습니다:

• 브라우저나 시스템 언어를 변경하지 않고는 언어를 바꿀 수 없습니다.

다음은 서드파티 i18n 라이브러리를 설정하는 예제입니다:

• vue-i18n