chrome.i18n

설명

매니페스트

확장 프로그램에 /_locales 디렉터리가 있으면 매니페스트에서 "default_locale"를 정의해야 합니다.

개념 및 사용법

사용자에게 표시되는 모든 문자열을 messages.json 파일에 넣어야 합니다. 매번 새 언어를 추가하려면 /_locales/_localeCode_라는 디렉터리에 메시지 파일을 추가합니다. 여기서 localeCode는 영어의 경우 en와 같은 코드입니다.

영어 (en), 스페인어를 지원하는 다국어 확장 프로그램의 파일 계층 구조는 다음과 같습니다. (es), 한국어 (ko):

여러 언어 지원

다음 그림에 표시된 파일의 확장자가 있다고 가정해 보겠습니다.

이 확장 프로그램을 국제화하려면 사용자에게 표시되는 각 문자열의 이름을 지정하고 메시지에 넣습니다. 파일에서 참조됩니다. 확장 프로그램의 매니페스트, CSS 파일 및 JavaScript 코드는 각 문자열의 이름을 사용하여 현지화된 버전으로 제공됩니다.

확장 프로그램이 국제화되었을 때의 모습은 다음과 같습니다. 영어 문자열):

<img "__msg_extname__",="" 'default_locale'="" 'ko'.="" "extname"."="" 'hello="" _locates=&quot;&quot; a=&quot;&quot; alt="manifest.json 파일에서 " and=&quot;&quot; CANNOT TRANSLATE changed=&quot;&quot; chrome.i18n.getmessage("extname").="" defines=&quot;&quot; en=&quot;&quot; file=&quot;&quot; file,=&quot;&quot; has=&quot;&quot; hello=&quot;&quot; in=&quot;&quot; item=&quot;&quot; javascript=&quot;&quot; messages.json=&quot;&quot; named=&quot;&quot; New="" src=&quot;/static/docs/extensions/mv2/reference/i18n/images/i18n-after-1.gif&quot; the=&quot;&quot; to=&quot;&quot; 값 표시 World"="" /

다국어화에 대한 참고사항:

• 지원되는 언어를 모두 사용할 수 있습니다. 지원되지 않는 언어를 사용하는 경우 Chrome 무시합니다.

• manifest.json 및 CSS 파일에서 다음과 같이 messagename이라는 문자열을 참조합니다.

  __MSG_messagename__
  

• 확장 프로그램 또는 앱의 JavaScript 코드에서 다음과 같이 messagename이라는 문자열을 참조합니다.

  chrome.i18n.getMessage("messagename")
  

• 각 getMessage() 호출에서 메시지에 포함할 문자열을 최대 9개까지 제공할 수 있습니다. 자세한 내용은 예: getMessage를 참조하세요.

• 일부 메시지(예: @@bidi_dir, @@ui_locale)는 다국어 지원에 의해 제공됩니다. 있습니다. 사전 정의된 메시지 이름의 전체 목록은 사전 정의된 메시지 섹션을 참고하세요.

• messages.json에서 사용자에게 표시되는 각 문자열에는 이름, 즉 '메시지'가 있습니다. 선택사항인 &quot;description&quot; 있습니다. 이름은 'extName'과 같은 키입니다. 또는 'search_string' 포드의 상태를 문자열. '메시지' 는 이 언어로 된 문자열의 값을 지정합니다. 선택사항인 '설명' 는 문자열이 사용되는 방식을 볼 수 없는 번역사에게 도움을 제공합니다. 확장자가 포함됩니다. 예를 들면 다음과 같습니다.

  {
    "search_string": {
      "message": "hello%20world",
      "description": "The string we search for. Put %20 between words that go together."
    },
    ...
  }
  

자세한 내용은 형식: 언어별 메시지를 참조하세요.

확장 프로그램을 다국어화한 후에는 간단하게 번역할 수 있습니다. messages.json 복사, 이 파일을 변환하고 /_locates 아래 새 디렉터리에 사본을 저장합니다. 예를 들어 스페인어, messages.json의 번역된 사본을 /_locates/es 아래에 넣습니다. 다음 그림 새 스페인어 번역이 포함된 이전 확장 프로그램이 표시됩니다.

사전 정의된 메시지

다국어화 시스템에서는 현지화에 도움이 되는 몇 가지 사전 정의된 메시지를 제공합니다. 이러한 포함 @@ui_locale 해야 현재 UI 로케일 및 @@bidi_... 텍스트 방향을 감지할 수 있습니다. 후자의 메시지는 가젯 BIDI (양방향) API.

특수 메시지 @@extension_id은 현지화되었는지 확인합니다. 이 메시지는 매니페스트 파일에서 작동하지 않습니다.

다음 표에서는 사전 정의된 각 메시지에 대해 설명합니다.

다음은 CSS 파일에서 @@extension_id를 사용하여 URL을 구성하는 예입니다.

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

확장 프로그램 ID가 abcdefghijklmnopqrstuvwxyzabcdef인 경우 이전 코드에서 굵게 표시된 줄 스니펫은 다음과 같이 변경됩니다.

  background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/background.png');

다음은 CSS 파일에서 @@bidi_* 메시지를 사용하는 예입니다.

body {
  direction: __MSG_@@bidi_dir__;
}

div#header {
  margin-bottom: 1.05em;
  overflow: hidden;
  padding-bottom: 1.5em;
  padding-__MSG_@@bidi_start_edge__: 0;
  padding-__MSG_@@bidi_end_edge__: 1.5em;
  position: relative;
}

영어와 같이 왼쪽에서 오른쪽으로 읽는 언어의 경우 굵게 표시된 부분이 다음과 같이 표시됩니다.

  dir: ltr;
  padding-left: 0;
  padding-right: 1.5em;

언어

한 번의 번역으로 여러 언어 (예: en_GB, en_US)를 지원할 수 있는 일부 언어 (예: en)를 비롯한 여러 언어 중에서 선택할 수 있습니다.

Chrome 웹 스토어에서 지원하는 모든 언어로 확장 프로그램을 현지화할 수 있습니다. 여기에 원하는 언어가 없다면 가장 유사한 언어를 선택하세요. 예를 들어 확장 프로그램의 기본 언어가 "de_CH"인 경우 Chrome 웹 스토어에서 "de"을 선택합니다.

메일 검색

지원되는 모든 언어에 대해 모든 문자열을 정의할 필요는 없습니다. 기본 언어의 messages.json 파일에는 모든 문자열의 값이 있습니다. 확장 프로그램 또는 앱은 다음과 같이 실행됩니다. 희소하지 않습니다. 확장 프로그램 시스템에서 메시지를 검색하는 방법은 다음과 같습니다.

1. 메시지 파일 (있는 경우)에서 사용자의 기본 언어를 검색합니다. 예를 들어 Google이 Chrome의 언어가 영국 영어 (en_GB)로 설정되어 있으므로 시스템은 먼저 /_locates/en_GB/messages.json 이 파일이 존재하고 메시지가 있으면 시스템은 더 이상 고민할 필요가 없습니다.
2. 사용자의 기본 언어에 지역이 있는 경우 (즉, 언어에 밑줄 _ 표시) 해당 리전이 없는 언어만 지원합니다. 예를 들어 en_GB 메시지 파일이 없거나 없는 경우 시스템은 en 메시지 파일을 살펴봅니다. 해당 파일이 존재하고 시스템은 더 이상 주의를 기울이지 않습니다.
3. 메시지 파일에서 기본 언어를 검색합니다. 예를 들어 확장 프로그램의 'default_locale' 'es'로 설정되고 /_locates/en_GB/messages.json도 /_locates/en/messages.json에 메시지가 포함되어 있으면 확장 프로그램은 /_locates/es/messages.json입니다.

다음 그림에서는 'colores'라는 메시지가 가 지원하지만 'extName'입니다. 두 개 언어로만 번역됩니다. 미국에서 사용자가 Chrome을 실행하는 모든 지역 영어에는 'Colors'라는 라벨이 표시되고 영국 영어 사용자에게는 'Colours'라는 라벨이 표시됩니다. 영어(미국) 및 영국 영어 사용자에게는 'Hello World' 확장 프로그램 이름이 표시됩니다. 기본 언어가 스페인어이므로 영어 이외의 언어로 Chrome을 실행하는 사용자에게는 'Colores'라는 라벨이 표시됨 및 확장 프로그램 이름을 'Hola mundo'라고 하겠습니다.

브라우저 언어 설정

번역을 테스트하려면 브라우저의 언어를 설정하는 것이 좋습니다. 이 섹션에서는 Windows, Mac OS X, Linux, ChromeOS의 언어

Windows

언어별 단축키 또는 Chrome UI를 사용하여 언어를 변경할 수 있습니다. 이 단축키를 사용하면 더 빨리 사용할 수 있고 여러 언어를 한 번에 사용할 수 있습니다.

언어별 단축키 사용

특정 언어로 Chrome을 실행하는 바로가기를 만들어 사용하려면 다음 단계를 따르세요.

1. 바탕화면에 이미 있는 Chrome 바로가기의 사본을 만듭니다.
2. 새 언어에 맞게 새 바로가기의 이름을 바꿉니다.

3. 타겟 필드가 --lang 및 --user-data-dir 플래그. 타겟은 다음과 같이 표시됩니다.

   path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
   

4. 바로가기를 더블클릭하여 Chrome을 실행합니다.

예를 들어 Chrome을 스페인어 (es)로 실행하는 바로가기를 만들려면 다음 타겟이 있는 chrome-es 이름의 바로가기:

path_to_chrome.exe --lang=es --user-data-dir=c:\chrome-profile-es

원하는 만큼 바로가기를 만들 수 있으므로 여러 언어로 쉽게 테스트할 수 있습니다. 예를 들면 다음과 같습니다.

path_to_chrome.exe --lang=en --user-data-dir=c:\chrome-profile-en
path_to_chrome.exe --lang=en_GB --user-data-dir=c:\chrome-profile-en_GB
path_to_chrome.exe --lang=ko --user-data-dir=c:\chrome-profile-ko

UI 사용

Windows용 Chrome에서 UI를 사용하여 언어를 변경하는 방법은 다음과 같습니다.

1. 앱 아이콘 > 옵션
2. 고급설정 탭을 선택합니다.
3. 아래로 스크롤하여 웹 콘텐츠를 찾습니다.
4. 글꼴 및 언어 설정 변경을 클릭합니다.
5. 언어 탭을 선택합니다.
6. 드롭다운을 사용하여 Chrome 언어를 설정합니다.
7. Chrome 다시 시작

Mac OS X

Mac에서 언어를 변경하려면 시스템 환경설정을 사용하세요.

1. Apple 메뉴에서 System Preferences(시스템 환경설정)를 선택합니다.
2. 개인 섹션에서 다국어를 선택합니다.
3. 언어 및 위치 선택
4. Chrome 다시 시작

Linux

Linux에서 언어를 변경하려면 먼저 Chrome을 종료합니다. 그런 다음 한 줄로 LANGUAGE 환경 변수를 설정하고 Chrome을 실행합니다. 예를 들면 다음과 같습니다.

LANGUAGE=es ./chrome

ChromeOS

ChromeOS에서 언어를 변경하려면 다음 단계를 따르세요.

1. 작업 표시줄에서 설정을 선택합니다.
2. 언어 및 입력 섹션에서 언어 드롭다운을 선택합니다.
3. 원하는 언어가 목록에 없으면 언어 추가를 클릭하여 추가합니다.
4. 추가한 후에는 언어 옆에 있는 점 3개 추가 작업 메뉴 항목을 클릭하고 이 언어로 ChromeOS 표시
5. 설정된 언어 옆에 표시되는 다시 시작 버튼을 클릭하여 ChromeOS를 다시 시작합니다.

예

examples/api/i18n 디렉터리에서 간단한 다국어화 예시를 확인할 수 있습니다. 전체 예는 examples/extensions/news를 참조하세요. 다른 예제와 샘플을 참고하세요.

getMessage()

다음 코드는 브라우저에서 현지화된 메시지를 가져와 문자열로 표시합니다. 그것은 메시지 내의 두 자리 표시자를 'string1' 문자열로 대체합니다. 'string2'가 포함됩니다.

function getMessage() {
  var message = chrome.i18n.getMessage("click_here", ["string1", "string2"]);
  document.getElementById("languageSpan").innerHTML = message;
}

단일 문자열을 제공하고 사용하는 방법은 다음과 같습니다.

  // In JavaScript code
  status.innerText = chrome.i18n.getMessage("error", errorDetails);

"error": {
  "message": "Error: $details$",
  "description": "Generic error template. Expects error parameter to be passed in.",
  "placeholders": {
    "details": {
      "content": "$1",
      "example": "Failed to fetch RSS feed."
    }
  }
}

자리표시자에 관한 자세한 내용은 언어별 메시지 페이지를 참조하세요. 자세한 내용은 getMessage() 호출 관련 내용은 API 참조를 확인하세요.

getAcceptLanguages()

다음 코드는 브라우저에서 allow-languages를 가져와 다음과 같이 문자열로 표시합니다. 각각의 allow-language를 ','로 구분합니다.

function getAcceptLanguages() {
  chrome.i18n.getAcceptLanguages(function(languageList) {
    var languages = languageList.join(",");
    document.getElementById("languageSpan").innerHTML = languages;
  })
}

getAcceptLanguages() 호출에 관한 자세한 내용은 API 참조를 확인하세요.

detectLanguage()

다음 코드는 지정된 문자열에서 최대 3개의 언어를 감지하여 다음과 같이 결과를 표시합니다. 줄바꿈으로 구분된 문자열입니다.

function detectLanguage(inputText) {
  chrome.i18n.detectLanguage(inputText, function(result) {
    var outputLang = "Detected Language: ";
    var outputPercent = "Language Percentage: ";
    for(i = 0; i < result.languages.length; i++) {
      outputLang += result.languages[i].language + " ";
      outputPercent +=result.languages[i].percentage + " ";
    }
    document.getElementById("languageSpan").innerHTML = outputLang + "\n" + outputPercent + "\nReliable: " + result.isReliable;
  });
}

detectLanguage(inputText) 호출에 관한 자세한 내용은 API 참조를 확인하세요.

chrome.i18n.detectLanguage(
  text: string,
  callback?: function,
)

chrome.i18n.getAcceptLanguages(
  callback?: function,
)

chrome.i18n.getMessage(
  messageName: string,
  substitutions?: any,
  options?: object,
)

chrome.i18n.getUILanguage()