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: .05em;
         overflow: hidden;
         padding-bottom: .5em;
         padding-__MSG_@@bidi_start_edge__: ;
         padding-__MSG_@@bidi_end_edge__: .5em;
         position: relative;
 }