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;
}