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