chrome.i18n

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

ใช้โครงสร้างพื้นฐาน chrome.i18n เพื่อใช้การทำให้เป็นสากลในแอปหรือส่วนขยายทั้งหมด

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

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

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

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

หากต้องการทำให้ส่วนขยายนี้เป็นสากล ให้ตั้งชื่อสตริงที่ผู้ใช้มองเห็นได้แต่ละรายการและใส่ไว้ในไฟล์ข้อความ ไฟล์ 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"="" />

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

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

• คุณสามารถใช้ภาษาที่รองรับ หากคุณใช้ภาษาที่ไม่รองรับ Google Chrome จะไม่สนใจภาษานั้น

• ในไฟล์ manifest.json และ CSS ให้อ้างอิงสตริงชื่อ messagename ดังนี้

  __MSG_messagename__
  

• ในโค้ด JavaScript ของส่วนขยายหรือแอป ให้อ้างอิงสตริงชื่อ messagename ดังนี้

  chrome.i18n.getMessage("messagename")
  

• ในการเรียก getMessage() แต่ละครั้ง คุณสามารถระบุสตริงได้สูงสุด 9 รายการเพื่อรวมไว้ในข้อความ ดูรายละเอียดได้ที่ตัวอย่าง: getMessage

• ระบบการทำให้เป็นสากลจะแสดงข้อความบางอย่าง เช่น @@bidi_dir และ @@ui_locale ดูรายการชื่อข้อความที่กำหนดไว้ล่วงหน้าทั้งหมดได้ในส่วนข้อความที่กำหนดไว้ล่วงหน้า

• ใน messages.json สตริงที่ผู้ใช้มองเห็นแต่ละรายการจะมีชื่อ รายการ "message" และรายการ "description" ที่ไม่บังคับ ชื่อคือคีย์ เช่น "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 ภาพต่อไปนี้แสดงส่วนขยายก่อนหน้าพร้อมคำแปลภาษาสเปนใหม่

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

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

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

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

ชื่อข้อความ	คำอธิบาย
@@extension_id	รหัสส่วนขยายหรือแอป คุณอาจใช้สตริงนี้เพื่อสร้าง URL สำหรับทรัพยากรภายในส่วนขยาย แม้แต่ส่วนขยายที่ไม่ได้แปลก็ใช้ข้อความนี้ได้ หมายเหตุ: คุณใช้ข้อความนี้ในไฟล์ Manifest ไม่ได้
@@ui_locale	ภาษาปัจจุบัน คุณอาจใช้สตริงนี้เพื่อสร้าง URL ภาษาท้องถิ่น
@@bidi_dir	ทิศทางข้อความสำหรับภาษาปัจจุบัน โดยอาจเป็น "ltr" สำหรับภาษาที่อ่านจากซ้ายไปขวา เช่น ภาษาอังกฤษ หรือ "rtl" สำหรับภาษาที่อ่านจากขวาไปซ้าย เช่น ภาษาญี่ปุ่น
@@bidi_reversed_dir	หาก @@bidi_dir เป็น "ltr" ค่านี้จะเป็น "rtl" ไม่เช่นนั้นจะเป็น "ltr"
@@bidi_start_edge	หาก @@bidi_dir เป็น "ltr" ค่านี้จะเป็น "left" ไม่เช่นนั้นจะเป็น "right"
@@bidi_end_edge	หาก @@bidi_dir เป็น "ltr" ค่านี้จะเป็น "right" ไม่เช่นนั้นจะเป็น "left"

ต่อไปนี้เป็นตัวอย่างการใช้ @@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

หมายเหตุ: การระบุ --user-data-dir เป็นตัวเลือกที่ไม่บังคับ แต่มีประโยชน์ การมีไดเรกทอรีข้อมูล 1 รายการต่อภาษาจะช่วยให้คุณเรียกใช้เบราว์เซอร์ได้หลายภาษาพร้อมกัน ข้อเสียคือเนื่องจากไม่มีการแชร์ข้อมูลของภาษา คุณจึงต้องติดตั้งส่วนขยายหลายครั้ง โดยติดตั้ง 1 ครั้งต่อภาษา ซึ่งอาจเป็นเรื่องยากหากคุณไม่พูดภาษานั้น ดูข้อมูลเพิ่มเติมได้ที่การสร้างและการใช้โปรไฟล์

การใช้ 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

ประเภท

LanguageCode

Chrome 47 ขึ้นไป

รหัสภาษา ISO เช่น en หรือ fr ดูรายการภาษาทั้งหมดที่เมธอดนี้รองรับได้ที่ kLanguageInfoTable สำหรับภาษาที่ไม่รู้จัก ระบบจะแสดงผล und ซึ่งหมายความว่า CLD ไม่รู้จักข้อความ [เปอร์เซ็นต์]

ประเภท

สตริง

เมธอด

detectLanguage()

Promise Chrome 47 ขึ้นไป

chrome.i18n.detectLanguage(
  text: string,
  callback?: function,
): Promise<object>

ตรวจหาภาษาของข้อความที่ระบุโดยใช้ CLD

พารามิเตอร์

• ข้อความ

  สตริง

  สตริงอินพุตของผู้ใช้ที่จะแปล

• callback

  function ไม่บังคับ

  พารามิเตอร์ callback จะมีลักษณะดังนี้

  (result: object) => void

  • ผลลัพธ์

    ออบเจ็กต์

    ออบเจ็กต์ LanguageDetectionResult ที่เก็บความน่าเชื่อถือของภาษาที่ตรวจพบและอาร์เรย์ของ DetectedLanguage

    • isReliable

      บูลีน

      ความน่าเชื่อถือของภาษาที่ตรวจพบโดย CLD

    • ภาษา

      object[]

      อาร์เรย์ของ detectedLanguage

      • ภาษา

        สตริง

      • เปอร์เซ็นต์

        ตัวเลข

        เปอร์เซ็นต์ของภาษาที่ตรวจพบ

การคืนสินค้า

• Promise<object>

  Chrome 99 ขึ้นไป

  ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

getAcceptLanguages()

Promise

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

รับภาษาที่ยอมรับของเบราว์เซอร์ ซึ่งจะแตกต่างจากภาษาที่เบราว์เซอร์ใช้ หากต้องการดูภาษา ให้ใช้ i18n.getUILanguage

พารามิเตอร์

• callback

  function ไม่บังคับ

  พารามิเตอร์ callback จะมีลักษณะดังนี้

  (languages: string[]) => void

  • ภาษา

    string[]

    อาร์เรย์ของ LanguageCode

การคืนสินค้า

• Promise<LanguageCode[]>

  Chrome 99 ขึ้นไป

  ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

getMessage()

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

รับสตริงที่แปลแล้วสำหรับข้อความที่ระบุ หากไม่มีข้อความ เมธอดนี้จะแสดงผลสตริงว่าง ('') หากรูปแบบการเรียก getMessage() ไม่ถูกต้อง เช่น messageName ไม่ใช่สตริงหรืออาร์เรย์ substitutions มีองค์ประกอบมากกว่า 9 รายการ เมธอดนี้จะแสดงผล undefined

พารามิเตอร์

• messageName

  สตริง

  ชื่อของข้อความตามที่ระบุไว้ในไฟล์ messages.json

• การเปลี่ยนตัว

  ไม่บังคับ

  สตริงการแทนที่สูงสุด 9 รายการ หากข้อความต้องการ

• ตัวเลือก

  object ไม่บังคับ

  Chrome 79 ขึ้นไป
  • escapeLt

    บูลีน ไม่บังคับ

    กำหนดเป็นอักขระหลีก < ในการแปลเป็น < ซึ่งจะมีผลกับตัวข้อความเท่านั้น ไม่ใช่ตัวยึดตำแหน่ง นักพัฒนาแอปอาจต้องการใช้ตัวเลือกนี้หากใช้คำแปลในบริบท HTML เทมเพลต Closure ที่ใช้กับ Closure Compiler จะสร้างโค้ดนี้โดยอัตโนมัติ

การคืนสินค้า

• สตริง

  ข้อความที่แปลแล้วสำหรับภาษาปัจจุบัน

getUILanguage()

chrome.i18n.getUILanguage(): string

รับภาษา UI ของเบราว์เซอร์ ซึ่งแตกต่างจาก i18n.getAcceptLanguages ที่แสดงผลภาษาที่ผู้ใช้ต้องการ

การคืนสินค้า

• สตริง

  รหัสภาษาของ UI เบราว์เซอร์ เช่น en-US หรือ fr-FR