Chrome瀏覽器擴展開發系列之十八：擴展的軟件國際化chrome.i18n API

i18n是internationalization 的簡寫，這裏將討論軟件國際化的問題。熟悉軟件國際化的朋友應該知道，軟件國際化要求，頁面中全部用戶可見的字符串都必須置於資源屬性文件中。資源屬性文件中的資源是形如「key=value」的鍵值對，一行一個。其中key爲資源的標識符，用於HTML頁面中，根據當前頁面的Locale肯定要使用的資源。value是資源的值，不一樣的Locale對應的資源值不一樣，在資源文件中統一用Unicode編碼。

經過chrome.i18n API和相關的資源配置文件，能夠實現Chrome瀏覽器擴展程序的國際化。

Chrome瀏覽器擴展中只支持惟一的message.json資源屬性文件，注意這裏的惟一性。message.json資源屬性文件示例以下：

1 {
2         "key": {
3           "message": "\u4ea7\u54c1\u540d\u79f0",
4           "description": "The string we search for. Put %20 between words that go together."//可選
5         },
6         ...
7 }

 

資源屬性文件位於Chrome瀏覽器擴展的根目錄下的_locales\locale_Code目錄下，其中的locale_Code有專門的國際標準規定，好比中國大陸的簡體中文對應zh_CN。須要說明的是，Chrome瀏覽器目前只支持部分Locale，忽略不支持的Locale。

Chrome瀏覽器擴展要實現軟件國際化，必須在根目錄下有_locales目錄，而一旦有_locales目錄就必須在manifest.json文件中指定默認Locale以下：

1 {
2         ...
3         "default_locale": "zh_CN",
4         ...
5 }

 

定義了資源屬性文件後，Chrome瀏覽器擴展中的manifest.json、CSS和JavaScript文件中均可以經過資源屬性文件中的key引用對應Locale的資源值，只是引用方式不一樣。在manifest.json和CSS文件中的引用方法以下：

1 __MSG_key__

在JavaScript文件中的引用方法以下：

1 chrome.i18n.getMessage("key")

其中，chrome.i18n.getMessage(…)方法還能夠帶第二個參數，以替換資源值中的佔位符。第二個參數要麼是一個字符串，要麼是一個字符串數組（數組中最多9個元素）。

 

Chrome瀏覽器擴展的國際化機制中的預約義資源

資源名稱	備註
@@extension_id	Chrome瀏覽器擴展的ID，可用於動態構建與某Chrome瀏覽器擴展相關的URL 只能用於CSS和JavaScript文件，如__MSG_@@extension_id__ manifest.json中不可用
@@ui_locale	當前頁面的Locale，可用於動態構建與Locale相關的URL
@@bidi_dir	當前Locale的文本走向 "ltr"表示從左向右，"rtl"表示從右向左
@@bidi_reversed_dir	與@@bidi_dir的值相反 若是@@bidi_dir爲"ltr"，則@@bidi_reversed_dir 爲"rtl" 若是@@bidi_dir爲"rtl"，則@@bidi_reversed_dir 爲"ltr"
@@bidi_start_edge	若是@@bidi_dir爲"ltr"，則@@bidi_start_dir 爲"left" 若是@@bidi_dir爲"rtl"，則@@bidi_start_dir 爲"right"
@@bidi_end_edge	若是@@bidi_dir爲"ltr"，則@@bidi_start_dir 爲"right" 若是@@bidi_dir爲"rtl"，則@@bidi_start_dir 爲"left"

 

預約義資源的用法示例以下(在CSS文件中)：

 1 body {
 2         background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
 3         direction: __MSG_@@bidi_dir__;
 4 }
 5 
 6 div#header {
 7         margin-bottom: 1.05em;
 8         overflow: hidden;
 9         padding-bottom: 1.5em;
10         padding-__MSG_@@bidi_start_edge__: 0;
11         padding-__MSG_@@bidi_end_edge__: 1.5em;
12         position: relative;
13 }