售前咨询
技术支持
渠道合作
  1. 首页
  2. 证书相关
  3. 【Chrome扩展开发】定制HTTP请求响应头域（四）

【Chrome扩展开发】定制HTTP请求响应头域（四）

发布日期：2017-11-20

国际化

为了让全球都能使用你开发的扩展，国际化是必须的。从软件工程的角度讲，国际化就是将产品用户界面中可见的字符串全部存放在资源文件中，然后根据用户所处不同的语言环境，展示相应语言的视觉信息。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",

如何引用国际化字符串

  • 如需在manifest.json或CSS文件中引用一个名称为”key”的字符串，如下所示： 
    __MSG_key__
  • 如需在扩展程序的JS中引用key对应的字符串，则需要借助chrome.i18n.getMessage(string messageName, any substitutions)这个API。其中messageName指的是信息的关键字（key），substitutions数组用于存放字符串待替换字符对应的值（该参数可选，且最多不超过9个替换值）。使用如下所示： 
    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;
}

其它国际化API

除了chrome.i18n.getMessage外，还有另外三个API。

  • getAcceptLanguages，获取浏览器可接受的语言列表。 
    chrome.i18n.getAcceptLanguages(function(languageArray){
    console.log(languageArray);
});
// 由于IHeader只支持中文和英文，故输出 ["zh-CN", "zh", "en", "zh-TW"]
  • getUILanguage，获取浏览器用户界面的语言（从Chrome v35起支持）。 
    chrome.i18n.getUILanguage(); // "zh-CN"
  • detectLanguage，使用CLD检测文本对应的语言。 
    chrome.i18n.detectLanguage('你好nihaoこんにちは how are you', function(result){
  console.log(result);
});

    输出如下图：

Chrome扩展开发的心得

到目前为止，IHeader是我业余开发时间最长的一款Chrome扩展。从今年的5月8号始，到6月14号，第一版才完工，然后又经过7月、8月近两个月的陆续修改，最终v1.1.0版才成型，这才达到了我最初的开发初衷。

现在网络上流传的各种扩展开发教程非常之多，甚至API翻译的网站也很多，就我所知道的至少有这些：

  • 360–扩展开发文档
  • JavaScript API -百度浏览器应用开发文档
  • Chrome扩展及应用开发（首发版）
  • Chrome扩展开发极客

通过查看这些资源，基本上就能快速上手Chrome扩展开发。

当然，教程再完善也不及官方文档，开发过程中，最难过的就是Chrome开发者网站连接不稳定，经常无法访问（即使自带梯子），因此查看官方网站的资料有些困难，这点比较影响开发进度，所以本文有意多介绍了一些Chrome API的用法。另外，开发好的扩展发布过程中也需要注意两点：

  1. 注册Chrome开发者需要5$，亲测浦发的visa信用卡可以支付，没有网上讲的那么复杂。
  2. 发布的扩展，为方便用户查看，需要完善的文档。由于Chrome webstore的扩展面向全球用户，所以文档至少要支持两种语言：中文和英文。

总之，Chrome扩展，万变不离其宗，无论扩展多么神奇和强大，最终都是通过HTML、CSS、JS来实现功能，脱离不了Web的小天地。因此理论上，只要你会写JS，就完全可以开发Chrome扩展。甚至，连第一个Demo，Chrome都帮你写好了，下载并安装Sample Extensions – Google Chrome网站的随意一个扩展源码，修修改改你就能运行属于自己的扩展了。

当然，一个好的扩展应该是对工作或生活有帮助的。只要你抓住痛点，用心实现功能，利用业余时间开发出一个强大的扩展自然不是问题。

小结

至此，Chrome扩展有关的介绍差不多了，让我们来看看IHeader的效果。借助IHeader扩展程序，我去掉了 www.google.com 网站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/

上一篇：

下一篇：

相关文章