댓글 검색 목록

[기타] chrome extention - 20. chrome.i18n

페이지 정보

작성자 운영자 작성일 20-11-05 11:49 조회 651 댓글 0

 Description:

 chrome.i18n 인프라를 사용하여 전체 앱 또는 확장 프로그램에서 국제화를 구현하세요.

 Availability:

 Chrome 38부터.

 Content Scripts:

 완전히 지원됩니다. 더 알아보기


사용자가 볼 수 있는 모든 문자열을 messages.json이라는 파일에 넣어야 합니다. 새 로케일을 추가 할 때마다 _locales / localeCode라는 디렉토리 아래에 메시지 파일을 추가합니다. 여기서 localeCode는 영어의 경우 en과 같은 코드입니다.


다음은 영어 (en), 스페인어 (es) 및 한국어 (ko)를 지원하는 국제화 된 확장자에 대한 파일 계층 구조입니다.


In the extension directory: manifest.json, *.html, *.js, _locales directory. In the _locales directory: en, es, and ko directories, each with a messages.json file. 


다국어 지원 방법 


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


A manifest.json file and a file with JavaScript. The .json file has "name": "Hello World". The JavaScript file has title = "Hello World"; 


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


다음은 국제화 되었을 때 확장 프로그램의 모습입니다 (여전히 영어 문자열 만 있음).

In the manifest.json file, "Hello World" has been changed to "__MSG_extName__", and a new "default_locale" item has the value "en". In the JavaScript file, "Hello World" has been changed to chrome.i18n.getMessage("extName"). A new file named _locales/en/messages.json defines "extName". 


중요 : 확장에 _locales 디렉토리가 있는 경우 매니페스트는 "default_locale"을 정의해야 합니다.


국제화에 대한 몇 가지 참고 사항 :


  • 지원되는 모든 로케일을 사용할 수 있습니다. 지원되지 않는 로케일을 사용하는 경우 Chrome은 이를 무시합니다.
  • manifest.json 및 CSS 파일에서 다음과 같이 messagename이라는 문자열을 참조하십시오.
__MSG_messagename__
  • 확장 또는 앱의 JavaScript 코드에서 다음과 같이 messagename이라는 문자열을 참조하십시오.
chrome.i18n.getMessage("messagename")
  • getMessage()를 호출 할 때마다 메시지에 포함 할 문자열을 최대 9 개까지 제공 할 수 있습니다. 자세한 내용은 예 : getMessage를 참조하십시오.
  • @@ bidi_dir 및 @@ ui_locale과 같은 일부 메시지는 국제화 시스템에서 제공합니다. 사전 정의 된 메시지 이름의 전체 목록은 사전 정의 된 메시지 섹션을 참조하십시오.
  • messages.json에서 사용자에게 표시되는 각 문자열에는 이름, "메시지"항목 및 선택적 "설명"항목이 있습니다. 이름은 문자열을 식별하는 "extName"또는 "search_string"과 같은 키입니다. "메시지"는 이 로케일의 문자열 값을 지정합니다. 선택적 "설명"은 확장에서 문자열이 사용되는 방식을 볼 수 없는 번역자에게 도움을 제공합니다. 예를 들면 :
      {
        "search_string": {
          "message": "hello%20world",
          "description": "The string we search for. Put %20 between words that go together."
        },
        ...
      }

자세한 내용은 형식 : 로케일 별 메시지를 참조하십시오.


확장 프로그램 또는 앱이 국제화 되면 간단하게 번역 할 수 있습니다. messages.json을 복사하고 번역 한 다음 _locales 아래의 새 디렉토리에 복사합니다. 예를 들어 스페인어를 지원하려면 _locales / es 아래에 messages.json의 번역 된 사본을 넣으십시오. 다음 그림은 새 스페인어 번역이 포함 된 이전 확장을 보여줍니다.


This looks the same as the previous figure, but with a new file at _locales/es/messages.json that contains a Spanish translation of the messages. 

미리 정의 된 메시지 


국제화 시스템은 현지화에 도움이 되는 몇 가지 미리 정의 된 메시지를 제공합니다. 여기에는 @@ ui_locale이 포함되어 있으므로 현재 UI 로케일을 감지 할 수 있으며 텍스트 방향을 감지 할 수 있는 몇 가지 @@ bidi _... 메시지가 있습니다. 후자의 메시지는 가젯 BIDI (양방향) API의 상수와 유사한 이름을 갖습니다.


확장 또는 앱이 현지화 되었는지 여부에 관계없이 특수 메시지 @@ extension_id는 CSS 및 JavaScript 파일에서 사용할 수 있습니다. 이 메시지는 매니페스트 파일에서 작동하지 않습니다.


다음 표는 미리 정의 된 각 메시지를 설명합니다.

 Message name

 Description

 @@extension_id

 확장 또는 앱 ID 이 문자열을 사용하여 확장 내의 리소스에 대한 URL을 구성 할 수 있습니다. 현지화 되지 않은 확장도 이 메시지를 사용할 수 있습니다. 참고 : 매니페스트 파일에서는 이 메시지를 사용할 수 없습니다.

 @@ui_locale

 현재 로케일. 이 문자열을 사용하여 로케일 별 URL을 구성 할 수 있습니다.

 @@bidi_dir

 현재 로케일의 텍스트 방향으로, 영어와 같은 왼쪽에서 오른쪽 언어의 경우 "ltr", 일본어와 같은 오른쪽에서 왼쪽의 언어의 경우 "rtl"입니다.

 @@bidi_reversed_dir

 @@ bidi_dir이 "ltr"이면 "rtl"입니다. 그렇지 않으면 "ltr"입니다.

 @@bidi_start_edge

 @@ bidi_dir이 "ltr"이면 "왼쪽"입니다. 그렇지 않으면 "맞습니다".

 @@bidi_end_edge

 @@ bidi_dir이 "ltr"이면 "맞습니다"입니다. 그렇지 않으면 "왼쪽"입니다.


다음은 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;

Locales 


단일 번역이 여러 언어 변형 (예 : en_GB 및 en_US)을 지원할 수 있는 일부 (예 : en)를 포함하여 여러 로케일에서 선택할 수 있습니다.


지원되는 로케일 


Chrome 웹 스토어에서 지원하는 모든 로케일을 사용할 수 있습니다.


메시지 검색 


지원되는 모든 로케일에 대해 모든 문자열을 정의 할 필요는 없습니다. 기본 로케일의 messages.json 파일에 모든 문자열에 대한 값이 있는 한 확장 또는 앱은 번역이 얼마나 드문 지에 관계없이 실행됩니다. 확장 시스템이 메시지를 검색하는 방법은 다음과 같습니다.


  1. 사용자의 선호 로케일에 대한 메시지 파일 (있는 경우)을 검색하십시오. 예를 들어 Google Chrome의 로케일이 영국 영어 (en_GB)로 설정되면 시스템은 먼저 _locales / en_GB / messages.json에서 메시지를 찾습니다. 해당 파일이 있고 메시지가있는 경우 시스템은 더 이상 검색하지 않습니다.
  2. 사용자의 선호 로케일에 지역이 있는 경우 (즉, 로케일에 밑줄 : _이 있음) 해당 지역이 없는 로케일을 검색하십시오. 예를 들어 en_GB 메시지 파일이 존재하지 않거나 메시지가 포함되지 않은 경우 시스템은 en 메시지 파일을 찾습니다. 해당 파일이 있고 메시지가 있는 경우 시스템은 더 이상 검색하지 않습니다.
  3. 기본 로케일에 대한 메시지 파일을 검색하십시오. 예를 들어 확장 프로그램의 "default_locale"이 "es"로 설정되어 있고 _locales / en_GB / messages.json 및 _locales / en / messages.json에 메시지가 포함되어 있지 않으면 확장 프로그램은 _locales / es / messages.json의 메시지를 사용합니다.

다음 그림에서 "colores"라는 메시지는 확장이 지원하는 세 로케일 모두에 있지만 "extName"은 두 로케일에만 있습니다. 미국 영어로 Google 크롬을 실행하는 사용자에게 "색상"이라는 레이블이 표시 될 때마다 영국 영어 사용자에게는 "색상"이 표시됩니다. 미국 영어와 영국 영어 사용자 모두 "Hello World"라는 확장명을 볼 수 있습니다. 기본 언어가 스페인어이기 때문에 영어가 아닌 언어로 Chrome을 실행하는 사용자에게는 "Colores"라는 레이블과 "Hola mundo"확장명이 표시됩니다.


Four files: manifest.json and three messages.json files (for es, en, and en_GB).  The es and en files show entries for messages named "extName" and "colores"; the en_GB file has just one entry (for "colores"). 


브라우저의 로케일을 설정하는 방법 


번역을 테스트하기 위해 브라우저의 로케일을 설정할 수 있습니다. 이 섹션에서는 Windows, Mac OS X, LinuxChrome OS에서 로케일을 설정하는 방법을 설명합니다.


Windows 


로케일 별 바로 가기 또는 Google Chrome UI를 사용하여 로케일을 변경할 수 있습니다. 바로 가기 접근 방식은 일단 설정하면 더 빠르며 한 번에 여러 언어를 사용할 수 있습니다.


로케일 별 단축키 사용 


특정 로케일로 Google 크롬을 실행하는 바로 가기를 만들고 사용하려면 :


  1. 이미 데스크톱에 있는 Google 크롬 바로 가기의 복사본을 만듭니다.
  2. 새 로케일과 일치하도록 새 바로 가기의 이름을 바꿉니다.
  3. 대상 필드가 --lang 및 --user-data-dir 플래그를 지정하도록 바로 가기의 속성을 변경합니다. 대상은 다음과 같아야 합니다.
path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
  1. 바로 가기를 두 번 클릭하여 Chrome을 시작합니다.

예를 들어 스페인어 (es)로 Google Chrome을 시작하는 바로 가기를 만들려면 다음 대상이 있는 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

참고 : --user-data-dir 지정은 선택 사항이지만 편리합니다. 로케일 당 하나의 데이터 디렉토리를 사용하면 동시에 여러 언어로 브라우저를 실행할 수 있습니다. 단점은 로케일의 데이터가 공유되지 않기 때문에 확장 프로그램을 여러 번 설치해야 한다는 것입니다. 로케일 당 한 번은 언어를 사용하지 않을 때 어려울 수 있습니다. 자세한 내용은 프로필 생성 및 사용을 참조하십시오.


UI 사용 


Windows 용 Chrome에서 UI를 사용하여 로케일을 변경하는 방법은 다음과 같습니다.

  1. App icon > Options
  2. 고급 설정 탭을 선택합니다.
  3. 웹 콘텐츠까지 아래로 스크롤
  4. 글꼴 및 언어 설정 변경을 클릭합니다.
  5. 언어 탭 선택
  6. 드롭 다운을 사용하여 Google 크롬 언어를 설정합니다.
  7. Chrome 다시 시작

Mac OS X 


Mac에서 로케일을 변경하려면 시스템 환경 설정을 사용하십시오.

  1. Apple 메뉴에서 시스템 환경 설정을 선택합니다.
  2. 개인 섹션에서 국제를 선택합니다.
  3. 언어와 위치를 선택하세요
  4. Chrome 다시 시작

Linux 


Linux에서 로케일을 변경하려면 먼저 Chrome을 종료하십시오. 그런 다음 모두 한 줄에 LANGUAGE 환경 변수를 설정하고 Google Chrome을 시작하십시오. 예를 들면 :


LANGUAGE=es ./chrome

Chrome OS 


Chrome OS에서 로케일을 변경하려면 :

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


 


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 


다음 코드는 브라우저에서 accept-language를 가져 와서 각 accept-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 참조를 참조하세요.


요약 


 Types

 LanguageCode

 Methods

 getAcceptLanguages − chrome.i18n.getAcceptLanguages ​​(함수 콜백)

 getMessage − string chrome.i18n.getMessage (string messageName, 대체 항목, 객체 옵션)

 getUILanguage − string chrome.i18n.getUILanguage()

 detectLanguage − chrome.i18n.detectLanguage(string text, function callback)


Types 


LanguageCode 


Since Chrome 47.


string

en 또는 fr과 같은 ISO 언어 코드. 이 메서드에서 지원하는 전체 언어 목록은 kLanguageInfoTable을 참조하세요. 

알 수 없는 언어의 경우 und가 반환됩니다. 이는 텍스트의 [백분율]을 CLD가 알 수 없음을 의미합니다.


Methods 


getAcceptLanguages 

chrome.i18n.getAcceptLanguages(function callback)


브라우저의 허용 언어를 가져옵니다. 이것은 브라우저에서 사용하는 로케일과 다릅니다. 로케일을 얻으려면 i18n.getUILanguage를 사용하십시오.


 Parameters

 function

 callback

 콜백 매개 변수는 다음과 같은 함수 여야 합니다.
 function(array of LanguageCode languages) {...}; 

 array of LanguageCode

 languages

 Array of LanguageCode



getMessage 


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


지정된 메시지의 지역화 된 문자열을 가져옵니다. 메시지가 누락 된 경우 이 메서드는 빈 문자열 ( '')을 반환합니다. getMessage() 호출의 형식이 잘못된 경우 (예 : messageName이 문자열이 아니거나 대체 배열에 9 개 이상의 요소가 있는 경우)이 메서드는 undefined를 반환합니다.


 Parameters

 string

 messageName

 messages.json 파일에 지정된 메시지 이름입니다.

 any

 (optional) substitutions

 메시지에 필요한 경우 최대 9 개의 대체 문자열.

 object

 (optional) options

 Since Chrome 79.

 boolean

 (optional) 

escapeLt

 <로 번역에서 <를 이스케이프 합니다. 이것은 자리 표시자가 아닌 메시지 자체에만 적용됩니다. 개발자는 번역이 HTML 컨텍스트에서 사용되는 경우 이를 사용할 수 있습니다. 클로저 컴파일러와 함께 사용되는 클로저 템플릿은 이를 자동으로 생성합니다.



getUILanguage 


string chrome.i18n.getUILanguage()


브라우저의 브라우저 UI 언어를 가져옵니다. 이것은 선호하는 사용자 언어를 반환하는 i18n.getAcceptLanguages와 다릅니다.


detectLanguage 


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


Since Chrome 47.


CLD를 사용하여 제공된 텍스트의 언어를 감지합니다.


 Parameters

 string

 text

 번역할 사용자 입력 문자열입니다.

 function

 callback

 콜백 매개 변수는 다음과 같은 함수 여야 합니다.

function(object result) {...}; 

 object

 result

 감지 된 langugae 신뢰도와 DetectedLanguage의 배열을 보유하는 LanguageDetectionResult 객체

 boolean

 isReliable

 CLD detected language reliability

 array of object

 languages

 array of detectedLanguage
Properties of each object 

감지 된 ISO 언어 코드 및 입력 문자열의 백분율을 보유하는 DetectedLanguage 객체

 LanguageCode

 language

 

 integer

 percentage

 The percentage of the detected language








https://developer.chrome.com/extensions/i18n



댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.