为了让全球都能使用你开发的扩展,国际化是必须的。从软件工程的角度讲,国际化就是将产品用户界面中可见的字符串全部存放在资源文件中,然后根据用户所处不同的语言环境,展示相应语言的视觉信息。Chrome从v17版本开始就提供了国际化标准API——chrome.i18n。i18n即internationalization(国际化),由于i和n中间共计18个字母,故简称为i18n。
Chrome扩展预留了_locales目录,用于存放多种语言版本的资源文件——message.json。目录结构为 “_locales/locales_code/message.json”,如下所示:
_locales
|-- en
|-- message.json
|-- zh_CN
|-- message.json
locales_code不仅包含以上举例的en(英文)、zh_CN(简体中文)等,还包含全球多种其它语言,具体请参考Choosing locales to support,对于不支持的locale,Chrome会自动忽略。
message.json资源文件如下所示,其中key为关键字,其message属性指定了它对应的值,description属性用于描述该key。
{
"key": {
"message": "the value for the key",
"description": "the description for the key"
},
...
}
根据i18n的官网文档
Important: If an extension has a
_locales
directory, the manifest must define “default_locale”.
一旦扩展中有了_locales目录,那么就必须要在manifest.json中指定”default_locale”,如下所示。
"default_locale": "en",
__MSG_key__
chrome.i18n.getMessage("key");
如果获取不到key对应的值,chrome.i18n.getMessage将返回空字符串""
;若messageName不是字符串或者substitutions数组长度超过9,那么该方法将返回undefined
。
那么,如何为message.json添加含有占位符的字符串呢?如下就以IHeader中message.json的代码做测试:
"iconTips": {
"message": "进入Header监听模式 $a$ $b$",
"placeholders": {
"a": {
"content": "$1"
},
"b": {
"content": "$2"
}
}
},
如上,占位符格式为$key$
,$key$
为字符串待注入标示, key是注入点名称,它需要在placeholders配置中指定第几个substitutions的值注入到这里。如上所述,注入点a
的内容指定为$1
,即第一个替换的值注入到a
所在的位置,注入点b
的内容指定为$2
,即第二个替换的值注入到b
所在的位置,以此类推。
实际上,我们有如下两种方式去注入。
// 替换注入点a为"apple",如果只是替换一个占位点的话,传入数组或字符串都行
chrome.i18n.getMessage('iconTips', 'apple');
chrome.i18n.getMessage('iconTips', ['apple']);
// 替换注入点a为"apple",替换b为"oranges",对于两个或以上的点位的替换,substitutions类型只能为数组
chrome.i18n.getMessage('iconTips', ['apple', 'oranges']);
实际效果如图:
以上引用过程,如下所示(图片来自MDN):
以上,提供了这些API还不够,国际化系统还提供了一些预定义的消息,它们如下。
Message Name | Description |
---|---|
@@extension_id | 扩展ID,可用于拼接链接,即使没有国际化的扩展也可用,注意不能用于manifest.json文件。 |
@@ui_locale | 当前语言,可用于拼接本地化的链接。 |
@@bidi_dir | 当前语言的文字方向,包含ltr 、rtl ,分别为从左到右、从右到左。 |
@@bidi_reversed_dir | 若@@bidi_dir值为ltr ,则它的值为rtl ,否则为ltr |
@@bidi_start_edge | 若@@bidi_dir值为rtl ,则它的值为left ,否则为right |
@@bidi_end_edge | 若@@bidi_dir值为ltr ,则它的值为right ,否则为left |
预定义的消息可在Chrome扩展的JavaScript和CSS中使用,如下。
var extensionId = chrome.i18n.getMessage('@@extension_id');
location.href = 'chrome-extension://' + extensionId + '/res/options.html';
body {
direction: __MSG_@@bidi_dir__;
background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}
div {
padding-__MSG_@@bidi_start_edge__: 5px;
padding-__MSG_@@bidi_end_edge__: 10px;
}
除了chrome.i18n.getMessage外,还有另外三个API。
chrome.i18n.getAcceptLanguages(function(languageArray){
console.log(languageArray);
});
// 由于IHeader只支持中文和英文,故输出 ["zh-CN", "zh", "en", "zh-TW"]
chrome.i18n.getUILanguage(); // "zh-CN"
chrome.i18n.detectLanguage('你好nihaoこんにちは how are you', function(result){
console.log(result);
});
输出如下图:
到目前为止,IHeader是我业余开发时间最长的一款Chrome扩展。从今年的5月8号始,到6月14号,第一版才完工,然后又经过7月、8月近两个月的陆续修改,最终v1.1.0版才成型,这才达到了我最初的开发初衷。
现在网络上流传的各种扩展开发教程非常之多,甚至API翻译的网站也很多,就我所知道的至少有这些:
通过查看这些资源,基本上就能快速上手Chrome扩展开发。
当然,教程再完善也不及官方文档,开发过程中,最难过的就是Chrome开发者网站连接不稳定,经常无法访问(即使自带梯子),因此查看官方网站的资料有些困难,这点比较影响开发进度,所以本文有意多介绍了一些Chrome API的用法。另外,开发好的扩展发布过程中也需要注意两点:
总之,Chrome扩展,万变不离其宗,无论扩展多么神奇和强大,最终都是通过HTML、CSS、JS来实现功能,脱离不了Web的小天地。因此理论上,只要你会写JS,就完全可以开发Chrome扩展。甚至,连第一个Demo,Chrome都帮你写好了,下载并安装Sample Extensions – Google Chrome网站的随意一个扩展源码,修修改改你就能运行属于自己的扩展了。
当然,一个好的扩展应该是对工作或生活有帮助的。只要你抓住痛点,用心实现功能,利用业余时间开发出一个强大的扩展自然不是问题。
至此,Chrome扩展有关的介绍差不多了,让我们来看看IHeader的效果。借助IHeader扩展程序,我去掉了 www.trustauth.cn 网站response的X-Frame-Options
字段,终于解决了文章开头的难题,如下所示。
安装好IHeader后,可以戳此链接http://louiszhai.github.io/res/search/index.html?q=123 ,试用IHeader。
不仅如此,IHeader还可以新增、删除或编辑任意指定url的请求响应头,并且即使浏览器重启后,全局监听器依然有效。它适合用于HTTP缓存研究,HTTP接口字段调试,甚至还可以为接口调试时的跨域问题提供临时的解决方案(笔者基于此完成了很多跨域接口的调试工作)。因此,只要您基于HTTP请求响应头去做事情,IHeader都可以帮您简化工作。至于如何使用,这里有一个IHeader-Guide(由于网络原因,Chrome webstore上更新可能不及时,推荐安装Github上的IHeader源码)。
对Chrome扩展感兴趣的同学,欢迎来Github学习交流扩展开发的经验。
本文以IHeader扩展程序为引,逐步讲解Chrome扩展程序的开发,涉及内容较多,难免有所疏漏,欢迎批评斧正,谢谢。、
文章转载于:louis blog。作者:louis
原链接:http://louiszhai.github.io/2017/11/14/iheader/