Chrome浏览器扩展开发系列之十八：扩展的软件国际化chrome.i18n API

时间：2021-03-23 18:05:53

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;

 }

相关文章