chrome.i18n

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

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

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

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

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

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

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

<img "__msg_extname__",="" "default_locale"="" "en".="" "extname"."="" "hello="" _locales="" a="" alt="In the manifest.json file, " and="" been="" changed="" chrome.i18n.getmessage("extname").="" defines="" en="" file="" file,="" has="" hello="" in="" item="" javascript="" messages.json="" named="" new="" src="/static/images/i18n-after-1.gif" the="" to="" value="" world"="" />

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

• คุณสามารถใช้ภาษาที่รองรับ หากคุณใช้ภาษาที่ไม่รองรับ 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

โค้ดต่อไปนี้จะรับ accept-languages จากเบราว์เซอร์และแสดงเป็นสตริงโดย คั่นแต่ละ 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

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