AddFox
  • 한국어

      • 국제화

      Addfox는 Chrome 확장 표준 _locales 디렉토리를 통해 국제화를 지원합니다.

      디렉토리 구조

      public/ 디렉토리 아래에 _locales를 생성합니다:

      public
      _locales
      en
      messages.json
      zh_CN
      messages.json
      ja
      messages.json

      메시지 파일 형식

      messages.json 형식:

      {
  "appName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "appDescription": {
    "message": "A great browser extension",
    "description": "The description of the extension"
  },
  "welcomeMessage": {
    "message": "Welcome, $USER$!",
    "description": "Welcome message with user name",
    "placeholders": {
      "user": {
        "content": "$1",
        "example": "John"
      }
    }
  }
}

      Manifest에서 사용

      {
  "name": "__MSG_appName__",
  "description": "__MSG_appDescription__",
  "default_locale": "zh_CN"
}

      코드에서 사용

      JavaScript/TypeScript

      // 현재 언어의 메시지 가져오기
const message = chrome.i18n.getMessage("welcomeMessage", ["John"]);
console.log(message); // "Welcome, John!"

      Vue

      <template>
  <h1>{{ t('appName') }}</h1>
  <p>{{ t('welcomeMessage', ['John']) }}</p>
</template>

<script setup>
// i18n 유틸리티 함수 캡슐화
const t = (key, args) => chrome.i18n.getMessage(key, args);
</script>

      React

      // utils/i18n.ts
export const t = (key: string, args?: string[]): string => {
  return chrome.i18n.getMessage(key, args);
};

// app/popup/App.tsx
import { t } from "@/utils/i18n";

export function App() {
  return (
    <div>
      <h1>{t("appName")}</h1>
      <p>{t("welcomeMessage", ["John"])}</p>
    </div>
  );
}

      사용자 언어 감지

      // 브라우저 현재 언어 가져오기
const currentLocale = chrome.i18n.getUILanguage();
console.log(currentLocale); // "zh-CN", "en", etc.

// 지원하는 모든 언어 가져오기
const locales = chrome.i18n.getAcceptLanguages();
locales.then(languages => console.log(languages));

      전체 예시

      중국어 메시지 파일

      // public/_locales/zh_CN/messages.json
{
  "appName": {
    "message": "탭 관리자",
    "description": "확장 이름"
  },
  "appDescription": {
    "message": "브라우저 탭을 효율적으로 관리하세요",
    "description": "확장 설명"
  },
  "tabCount": {
    "message": "$COUNT$개의 탭이 있습니다",
    "description": "탭 수 표시",
    "placeholders": {
      "count": {
        "content": "$1",
        "example": "5"
      }
    }
  }
}

      영어 메시지 파일

      // public/_locales/en/messages.json
{
  "appName": {
    "message": "Tab Manager",
    "description": "Extension name"
  },
  "appDescription": {
    "message": "Manage your browser tabs efficiently",
    "description": "Extension description"
  },
  "tabCount": {
    "message": "You have $COUNT$ tabs",
    "description": "Show tab count",
    "placeholders": {
      "count": {
        "content": "$1",
        "example": "5"
      }
    }
  }
}

      언어 코드

      일반적인 언어 코드:

      언어코드
      중국어 간체zh_CN
      중국어 번체zh_TW
      영어en
      일본어ja
      한국어ko
      독일어de
      프랑스어fr
      스페인어es

      전체 목록은 Chrome 확장 문서를 참조하세요.

      주의사항

      • manifest에서 default_locale을 반드시 지정해야 합니다
      • 모든 메시지 파일은 default_locale에 지정된 언어를 포함해야 합니다
      • 플레이스홀더는 $1, $2 등을 사용하여 표시하며, getMessage의 두 번째 파라미터 배열에 해당합니다

      관련 링크