chrome.i18n

คำอธิบาย

คุณต้องใส่สตริงทั้งหมดที่ผู้ใช้มองเห็นลงในไฟล์ชื่อ messages.json ทุกครั้งที่คุณเพิ่มภาษาใหม่ คุณจะต้องเพิ่มไฟล์ข้อความในไดเรกทอรีที่ชื่อ _locales/_localeCode_ โดย localeCode คือรหัส เช่น en สำหรับภาษาอังกฤษ

ต่อไปนี้คือลำดับชั้นของไฟล์สำหรับส่วนขยายที่รองรับหลายภาษาซึ่งรองรับภาษาอังกฤษ (en), สเปน (es) และเกาหลี (ko)

วิธีรองรับหลายภาษา

สมมติว่าคุณมีส่วนขยายที่มีไฟล์ตามที่แสดงในรูปต่อไปนี้

หากต้องการทำให้ส่วนขยายนี้รองรับหลายภาษา ให้ตั้งชื่อสตริงที่ผู้ใช้มองเห็นแต่ละรายการและใส่ไว้ในไฟล์ messages Manifest ของส่วนขยาย ไฟล์ CSS และโค้ด JavaScript จะใช้ชื่อของสตริงแต่ละรายการเพื่อรับเวอร์ชันที่แปลแล้ว

ส่วนขยายจะมีลักษณะดังนี้เมื่อมีการแปลเป็นภาษาต่างๆ (โปรดทราบว่าส่วนขยายยังคงมีสตริงภาษาอังกฤษเท่านั้น)

<img dex="" />

ข้อควรทราบเกี่ยวกับการปรับให้เหมาะกับภาษาต่างๆ

• คุณสามารถใช้ภาษาที่รองรับ หากคุณใช้ภาษาที่ไม่รองรับ Google 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" ที่ระบุ สตริง "message" ระบุค่าของสตริงในภาษาถิ่นนี้ "คำอธิบาย" (ไม่บังคับ) จะช่วยนักแปลที่อาจไม่เห็นว่าสตริงใช้ในส่วนขยายของคุณอย่างไร เช่น

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

  ดูข้อมูลเพิ่มเติมได้ที่รูปแบบ: ข้อความเฉพาะภาษา

เมื่อมีการปรับส่วนขยายหรือแอปให้รองรับหลายภาษาแล้ว การแปลก็ทำได้ง่ายๆ คุณคัดลอก messages.json, แปล และวางสำเนาลงในไดเรกทอรีใหม่ภายใต้ _locales เช่น หากต้องการรองรับภาษาสเปน ให้วางสำเนาที่แปลแล้วของ messages.json ไว้ใต้ _locales/es รูปภาพต่อไปนี้ แสดงส่วนขยายก่อนหน้าที่มีการแปลเป็นภาษาสเปนใหม่

ข้อความที่กำหนดไว้ล่วงหน้า

ระบบการแปลเป็นภาษาต่างๆ มีข้อความที่กำหนดไว้ล่วงหน้า 2-3 รายการเพื่อช่วยคุณแปล ซึ่งรวมถึง @@ui_locale เพื่อให้คุณตรวจหาภาษา UI ปัจจุบันได้ และข้อความ @@bidi_... บางรายการที่ช่วยให้คุณตรวจหาทิศทางของข้อความได้ ข้อความหลังมีชื่อคล้ายกับค่าคงที่ใน BIDI (สองทิศทาง) API ของ Gadget

คุณใช้ข้อความพิเศษ @@extension_id ในไฟล์ CSS และ JavaScript ได้ ไม่ว่าส่วนขยายหรือแอปจะได้รับการแปลหรือไม่ก็ตาม ข้อความนี้ใช้ในไฟล์ Manifest ไม่ได้

ตารางต่อไปนี้จะอธิบายข้อความที่กำหนดไว้ล่วงหน้าแต่ละรายการ

ตัวอย่างการใช้ @@extension_id ในไฟล์ CSS เพื่อสร้าง URL มีดังนี้

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

หากรหัสส่วนขยายคือ abcdefghijklmnopqrstuvwxyzabcdef บรรทัดที่ทำเป็นตัวหนาในโค้ด ตัวอย่างก่อนหน้าจะกลายเป็น

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

ตัวอย่างการใช้ข้อความ @@bidi_* ในไฟล์ CSS มีดังนี้

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) ที่ช่วยให้คำแปลเดียว รองรับภาษาหลายรูปแบบ (เช่น en_GB และ en_US)

ตำแหน่งที่ได้รับการสนับสนุน

คุณใช้ภาษาที่ 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" อยู่ในภาษาทั้ง 3 ภาษาที่ส่วนขยายรองรับ แต่ "extName" อยู่ในภาษาเพียง 2 ภาษาเท่านั้น เมื่อใดก็ตามที่ผู้ใช้ที่เรียกใช้ Google Chrome ในสหรัฐอเมริกาเป็นภาษาอังกฤษเห็นป้ายกำกับ "Colors" ผู้ใช้ภาษาอังกฤษแบบอังกฤษจะเห็น "Colours" ทั้งผู้ใช้ภาษาอังกฤษแบบสหรัฐอเมริกาและภาษาอังกฤษแบบอังกฤษจะเห็นชื่อส่วนขยาย "Hello World" เนื่องจากภาษาเริ่มต้นคือสเปน ผู้ใช้ที่เรียกใช้ Google Chrome ในภาษาอื่นที่ไม่ใช่ภาษาอังกฤษจะเห็นป้ายกำกับ "Colores" และชื่อส่วนขยาย "Hola mundo"

วิธีตั้งค่าภาษาของเบราว์เซอร์

หากต้องการทดสอบการแปล คุณอาจต้องตั้งค่าภาษาของเบราว์เซอร์ ส่วนนี้จะอธิบายวิธีตั้งค่า ภาษาใน Windows, Mac OS X, Linux และ ChromeOS

Windows

คุณเปลี่ยนภาษาได้โดยใช้แป้นพิมพ์ลัดเฉพาะภาษาหรือ UI ของ Google Chrome วิธีการใช้แป้นพิมพ์ลัดจะเร็วกว่าเมื่อตั้งค่าแล้ว และช่วยให้คุณใช้ได้หลายภาษาพร้อมกัน

การใช้แป้นพิมพ์ลัดเฉพาะภาษา

วิธีสร้างและใช้ทางลัดที่เปิด Google Chrome ด้วยภาษาที่เฉพาะเจาะจง

1. ทำสำเนาทางลัดของ Google Chrome ที่อยู่บนเดสก์ท็อปอยู่แล้ว
2. เปลี่ยนชื่อทางลัดใหม่ให้ตรงกับภาษาใหม่

3. เปลี่ยนพร็อพเพอร์ตี้ของทางลัดเพื่อให้ช่องเป้าระบุแฟล็ก --lang และ --user-data-dir เป้าหมายควรมีลักษณะดังนี้

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

4. เปิด Google Chrome โดยดับเบิลคลิกทางลัด

เช่น หากต้องการสร้างทางลัดที่เปิด Google 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

วิธีเปลี่ยนภาษาโดยใช้ UI ใน Google Chrome สำหรับ Windows มีดังนี้

1. ไอคอนแอป > ตัวเลือก
2. เลือกแท็บเบื้องหลัง
3. เลื่อนลงไปที่เนื้อหาเว็บ
4. คลิกเปลี่ยนการตั้งค่าแบบอักษรและภาษา
5. เลือกแท็บภาษา
6. ใช้เมนูแบบเลื่อนลงเพื่อตั้งค่าภาษาของ Google Chrome
7. รีสตาร์ท Chrome

Mac OS X

หากต้องการเปลี่ยนภาษาใน Mac ให้ใช้ค่ากำหนดของระบบ

1. จากเมนู Apple ให้เลือกค่ากำหนดของระบบ
2. ในส่วนส่วนตัว ให้เลือกต่างประเทศ
3. เลือกภาษาและสถานที่ตั้ง
4. รีสตาร์ท Chrome

Linux

หากต้องการเปลี่ยนภาษาใน Linux ให้ปิด Google Chrome ก่อน จากนั้นในบรรทัดเดียว ให้ตั้งค่าตัวแปรสภาพแวดล้อม LANGUAGE แล้วเปิด Google Chrome เช่น

LANGUAGE=es ./chrome

ChromeOS

วิธีเปลี่ยนภาษาใน ChromeOS

1. จากถาดระบบ ให้เลือกการตั้งค่า
2. ในส่วนภาษาและการป้อนข้อมูล ให้เลือกเมนูภาษาแบบเลื่อนลง
3. หากภาษาของคุณไม่อยู่ในรายการ ให้คลิกเพิ่มภาษา แล้วเพิ่มภาษา
4. เมื่อเพิ่มแล้ว ให้คลิกรายการเมนูการดำเนินการเพิ่มเติมแบบ 3 จุดข้างภาษาของคุณ แล้วเลือก แสดง ChromeOS ในภาษานี้
5. คลิกปุ่มรีสตาร์ทที่ปรากฏข้างภาษาที่ตั้งค่าไว้เพื่อรีสตาร์ท ChromeOS

ตัวอย่าง

คุณดูตัวอย่างการทำให้เป็นสากลแบบง่ายได้ในไดเรกทอรี examples/api/i18n ดูตัวอย่างที่สมบูรณ์ได้ที่ examples/extensions/news ดูตัวอย่างอื่นๆ และความช่วยเหลือในการดู ซอร์สโค้ดได้ที่ตัวอย่าง

ตัวอย่าง: getMessage

โค้ดต่อไปนี้จะรับข้อความที่แปลแล้วจากเบราว์เซอร์และแสดงเป็นสตริง โดยจะ แทนที่ตัวยึดตำแหน่ง 2 ตัวภายในข้อความด้วยสตริง "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

โค้ดต่อไปนี้จะรับภาษาที่ยอมรับจากเบราว์เซอร์และแสดงเป็นสตริงโดย คั่นแต่ละภาษาที่ยอมรับด้วย ","

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,
): Promise<object>

chrome.i18n.getAcceptLanguages(
  callback?: function,
): Promise<LanguageCode[]>

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

chrome.i18n.getUILanguage(): string