คำอธิบาย
ใช้โครงสร้างพื้นฐาน 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="ในไฟล์ Manifest.json, " and="" been="" changed="" chrome.i18n.getmessage("extname=""define="" en the item="" file="" กำหนด="" en en items="" file="" ถึงกำหนด="" en item.json")
หมายเหตุบางประการเกี่ยวกับการปรับให้เป็นสากล:
- โดยคุณสามารถใช้ภาษาที่รองรับ หากคุณใช้ภาษาที่ไม่รองรับ 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" ที่ระบุสตริง ส่วน "ข้อความ" จะระบุค่าของสตริงในภาษานี้ "คำอธิบาย" (ไม่บังคับ) จะให้ความช่วยเหลือแก่นักแปล ซึ่งอาจไม่เห็นวิธีใช้สตริงในส่วนขยาย เช่น{ "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_...
อีก 2-3 ข้อความที่ให้คุณตรวจหาทิศทางของข้อความได้ ข้อความหลังจะมีชื่อคล้ายกับค่าคงที่ใน API ของ bidI (2 ทิศทาง) ของแกดเจ็ต
ข้อความพิเศษ @@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
ของภาษาเริ่มต้นมีค่าสำหรับทุกสตริง ส่วนขยายหรือแอปจะทำงานไม่ว่าคำแปลจะมีความเรียบง่ายเพียงใด ระบบส่วนขยายสามารถค้นหาข้อความได้ดังนี้
- ค้นหาไฟล์ข้อความ (หากมี) ในภาษาที่ผู้ใช้ต้องการ ตัวอย่างเช่น เมื่อตั้งค่าภาษาของ Google Chrome เป็นภาษาอังกฤษ (
en_GB
) ระบบจะค้นหาข้อความใน_locales/en_GB/messages.json
ก่อน หากมีไฟล์อยู่และเห็นข้อความนั้นอยู่ ระบบก็ไม่ต้องดำเนินการใดๆ - หากภาษาที่ผู้ใช้ต้องการมีภูมิภาค (ภาษานั้นมีเครื่องหมายขีดล่างเป็น _) ให้ค้นหาภาษาโดยไม่มีเขตนั้น เช่น หากไฟล์ข้อความ
en_GB
ไม่มีอยู่หรือไม่มีข้อความดังกล่าว ระบบก็จะดูในไฟล์ข้อความen
หากมีไฟล์อยู่และ มีข้อความอยู่ ระบบก็ไม่ต้องดำเนินการใดๆ - ค้นหาไฟล์ข้อความสำหรับภาษาเริ่มต้น ตัวอย่างเช่น หากตั้งค่า "default_locale" ของส่วนขยายเป็น "es" และทั้ง
_locales/en_GB/messages.json
และ_locales/en/messages.json
ไม่มีข้อความ ส่วนขยายจะใช้ข้อความจาก_locales/es/messages.json
ในรูปต่อไปนี้ ข้อความชื่อ "colores" อยู่ในทั้ง 3 ภาษาที่ส่วนขยายรองรับ แต่ "extName" เป็นภาษาเพียง 2 ภาษาเท่านั้น เมื่อใดก็ตามที่ผู้ใช้ Google Chrome ในภาษาอังกฤษ (สหรัฐอเมริกา) เห็นป้ายกำกับ "สี" ผู้ใช้ภาษาอังกฤษ (สหราชอาณาจักร) จะเห็น "Colours" ผู้ใช้ภาษาอังกฤษ (สหรัฐอเมริกา) และภาษาอังกฤษ (อังกฤษ) จะเห็นส่วนขยายชื่อ " Hello World" เนื่องจากภาษาเริ่มต้นคือภาษาสเปน ผู้ใช้ที่ใช้ Google Chrome ในภาษาที่ไม่ใช่ภาษาอังกฤษจะเห็นป้ายกำกับ "Colores" และ ชื่อส่วนขยาย "Hola mundo"
วิธีตั้งค่าภาษาของเบราว์เซอร์
หากต้องการทดสอบคำแปล คุณอาจต้องตั้งค่าภาษาของเบราว์เซอร์ ส่วนนี้จะอธิบายวิธีตั้งค่าภาษาใน Windows, Mac OS X, Linux และ ChromeOS
Windows
คุณสามารถเปลี่ยนภาษาได้โดยใช้ทางลัดเฉพาะภาษาหรือ UI ของ Google Chrome การใช้ทางลัดจะรวดเร็วขึ้น เมื่อตั้งค่าแล้ว และคุณสามารถใช้หลายภาษาได้พร้อมกัน
การใช้ทางลัดเฉพาะภาษา
หากต้องการสร้างและใช้ทางลัดที่เปิด Google Chrome ด้วยภาษาใดภาษาหนึ่ง ให้ทำดังนี้
- ทำสำเนาทางลัดของ Google Chrome ที่มีอยู่บนเดสก์ท็อปของคุณอยู่แล้ว
- เปลี่ยนชื่อแป้นพิมพ์ลัดใหม่ให้ตรงกับภาษาใหม่
เปลี่ยนพร็อพเพอร์ตี้ของทางลัดเพื่อให้ช่องเป้าหมายระบุแฟล็ก
--lang
และ--user-data-dir
เป้าหมายควรมีลักษณะดังนี้path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
เปิด 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 มีดังนี้
- ไอคอนแอป > ตัวเลือก
- เลือกแท็บ Under the Hood
- เลื่อนลงไปที่เนื้อหาเว็บ
- คลิกเปลี่ยนการตั้งค่าแบบอักษรและภาษา
- เลือกแท็บภาษา
- ใช้เมนูแบบเลื่อนลงเพื่อตั้งค่าภาษาของ Google Chrome
- รีสตาร์ท Chrome
Mac OS X
หากต้องการเปลี่ยนภาษาใน Mac ให้ใช้ค่ากำหนดของระบบ
- จากเมนู Apple ให้เลือกค่ากำหนดของระบบ
- ใต้หัวข้อส่วนตัว ให้เลือกระหว่างประเทศ
- เลือกภาษาและสถานที่ตั้งของคุณ
- รีสตาร์ท Chrome
Linux
หากต้องการเปลี่ยนภาษาใน Linux ให้ออกจาก Google Chrome ก่อน จากนั้น ให้กำหนดตัวแปรสภาพแวดล้อม LANGUAGE แล้วเปิด Google Chrome ในบรรทัดเดียว เช่น
LANGUAGE=es ./chrome
ChromeOS
วิธีเปลี่ยนภาษาใน ChromeOS
- จากถาดระบบ ให้เลือกการตั้งค่า
- ในส่วนภาษาและการป้อนข้อมูล ให้เลือกเมนูแบบเลื่อนลงภาษา
- หากภาษาของคุณไม่อยู่ในรายการ ให้คลิกเพิ่มภาษา แล้วเพิ่มภาษานั้น
- เมื่อเพิ่มแล้ว ให้คลิกรายการเมนูการทำงานเพิ่มเติม 3 จุดข้างภาษาของคุณ แล้วเลือกแสดง ChromeOS ในภาษานี้
- คลิกปุ่มรีสตาร์ทที่ปรากฏข้างภาษาที่ตั้งค่าไว้เพื่อรีสตาร์ท 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
ตัวอย่าง: getacceptLanguage
โค้ดต่อไปนี้จะรับภาษาที่ยอมรับจากเบราว์เซอร์ และแสดงเป็นสตริงโดยแยกภาษาที่ยอมรับแต่ละภาษาด้วย ","
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
รหัสภาษา ISO เช่น en
หรือ fr
ดูรายการภาษาทั้งหมดที่วิธีนี้รองรับได้ที่ kLanguageInfoTable สำหรับภาษาที่ไม่รู้จัก ระบบจะแสดงผล und
ซึ่งหมายความว่า CLD ไม่รู้จัก [percentage] ข้อความ
ประเภท
string
วิธีการ
detectLanguage()
chrome.i18n.detectLanguage(
text: string,
callback?: function,
)
ตรวจหาภาษาของข้อความที่ระบุโดยใช้ CLD
พารามิเตอร์
-
ข้อความ
string
สตริงข้อมูลจากผู้ใช้ที่จะแปล
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: object) => void
-
ผลลัพธ์
ออบเจ็กต์
ออบเจ็กต์ LanguageDetection Results ที่มีความเสถียรของภาษาและอาร์เรย์ของ DetectedLanguage ที่ตรวจพบ
-
isReliable
boolean
ความน่าเชื่อถือของภาษาที่ตรวจพบ CLD
-
ภาษา
ออบเจ็กต์[]
อาร์เรย์ของ DetectLanguage
-
ภาษา
string
-
เปอร์เซ็นต์
ตัวเลข
เปอร์เซ็นต์ของภาษาที่ตรวจพบ
-
-
-
การคืนสินค้า
-
Promise<object>
Chrome 99 ขึ้นไปPromiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ
getAcceptLanguages()
chrome.i18n.getAcceptLanguages(
callback?: function,
)
เรียกภาษาที่ยอมรับของเบราว์เซอร์ ซึ่งแตกต่างจากภาษาที่เบราว์เซอร์ใช้ หากต้องการหาภาษาดังกล่าว ให้ใช้ i18n.getUILanguage
พารามิเตอร์
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(languages: string[]) => void
-
ภาษา
สตริง[]
อาร์เรย์ของ LanguageCode
-
การคืนสินค้า
-
Promise<LanguageCode[]>
Chrome 99 ขึ้นไปPromiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ
getMessage()
chrome.i18n.getMessage(
messageName: string,
substitutions?: any,
options?: object,
)
รับสตริงที่แปลแล้วสำหรับข้อความที่ระบุ หากไม่มีข้อความ เมธอดนี้จะแสดงสตริงว่าง ('') หากรูปแบบการเรียก getMessage()
ไม่ถูกต้อง ตัวอย่างเช่น messageName ไม่ใช่สตริง หรืออาร์เรย์การแทนที่มีองค์ประกอบมากกว่า 9 รายการ เมธอดนี้จะแสดง undefined
พารามิเตอร์
-
messageName
string
ชื่อของข้อความตามที่ระบุไว้ในไฟล์
messages.json
-
การใช้แทน
รายการใดก็ได้ ไม่บังคับ
สตริงทดแทนสูงสุด 9 สตริง หากมีข้อความที่ต้องการ
-
ตัวเลือก
ออบเจ็กต์ ไม่บังคับ
Chrome เวอร์ชัน 79 ขึ้นไป-
escapeLt
บูลีน ไม่บังคับ
ซ่อน
<
ที่แปลเป็น<
ซึ่งจะมีผลกับข้อความเท่านั้น ไม่ใช่กับตัวยึดตำแหน่ง นักพัฒนาซอฟต์แวร์อาจต้องการใช้คำแปลนี้หากมีการใช้คำแปลในบริบท HTML เทมเพลตการปิดที่ใช้กับคอมไพเลอร์การปิดจะสร้างการดำเนินการนี้โดยอัตโนมัติ
-
การคืนสินค้า
-
string
ข้อความที่แปลแล้วสำหรับภาษาปัจจุบัน
getUILanguage()
chrome.i18n.getUILanguage()
ดึงข้อมูลภาษา UI ของเบราว์เซอร์ ซึ่งแตกต่างจาก i18n.getAcceptLanguages
ซึ่งแสดงภาษาที่ผู้ใช้ต้องการ
การคืนสินค้า
-
string
รหัสภาษา UI ของเบราว์เซอร์ เช่น en-US หรือ fr-FR