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

i18n是internationalization 的簡寫，這裡將討論軟體國際化的問題。熟悉軟體國際化的朋友應該知道，軟體國際化要求，頁面中所有使用者可見的字串都必須置於資源屬性檔案中。資源屬性檔案中的資源是形如“key=value”的鍵值對，一行一個。其中key為資源的識別符號，用於HTML頁面中，根據當前頁面的Locale確定要使用的資源。value是資源的值，不同的Locale對應的資源值不同，在資原始檔中統一用Unicode編碼。

通過chrome.i18n API和相關的資源配置檔案，可以實現Chrome瀏覽器擴充套件程式的國際化。

Chrome瀏覽器擴充套件中只支援唯一的message.json資源屬性檔案，注意這裡的唯一性。message.json資源屬性檔案示例如下：

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

 

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

Chrome瀏覽器擴充套件要實現軟體國際化，必須在根目錄下有_locales目錄，而一旦有_locales目錄就必須在manifest.json檔案中指定預設Locale如下：

{
        ...
        "default_locale": "zh_CN",
        ...
}

 

定義了資源屬性檔案後，Chrome瀏覽器擴充套件中的manifest.json、CSS和JavaScript檔案中都可以通過資源屬性檔案中的key引用對應Locale的資源值，只是引用方式不同。在manifest.json和CSS檔案中的引用方法如下：

__MSG_key__

在JavaScript檔案中的引用方法如下：

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檔案中)：

body {
        background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
        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;
}