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 }

 

posted @ 2015-10-15 09:27  Chrome扩展开发极客  阅读(3959)  评论(0编辑  收藏  举报