chrome.i18n

คำอธิบาย

ไฟล์ Manifest

หากส่วนขยายมีไดเรกทอรี /_locales ไฟล์ Manifest ต้องกำหนด "default_locale"

แนวคิดและการใช้งาน

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

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

รองรับหลายภาษา

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

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

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

"

หมายเหตุเกี่ยวกับการทำให้เป็นสากล:

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

  {
    "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_... 2-3 ข้อความที่ช่วยให้คุณตรวจจับทิศทางข้อความได้ ข้อความหลังจะมีชื่อคล้ายกับค่าคงที่ใน แกดเจ็ต BIDI (2-directional) API

ข้อความพิเศษ @@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) ที่รองรับการแปลแบบ 1 ภาษา (เช่น en_GB และ en_US)

คุณสามารถแปลส่วนขยายเป็นภาษาใดก็ได้ที่ Chrome เว็บสโตร์รองรับ หากภาษาของคุณไม่อยู่ในรายการนี้ ให้เลือกตำแหน่งที่ใกล้เคียงที่สุด ตัวอย่างเช่น หากภาษาเริ่มต้นของส่วนขยายคือ "de_CH" ให้เลือก "de" ใน Chrome เว็บสโตร์

ค้นหาข้อความ

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

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

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

chrome.i18n.getUILanguage()