Google IO 2016年的大会在北京召开的时候，Google公布了一批Google中国的开发者资源网站，方便中国的开发者访问以及进行软件网站等开发，为了纪念这一里程碑的事件，我还写了一篇文章来介绍Google的这个中国开发者资源网站，可以参见Google Developers 中国网站发布。

虽然搞IT的基本上都会翻墙，但是有一个可以不用翻墙访问的Google开发者网站还是非常方便的。Google中国开发者站点采用了cn域名，比如 developers.google.cn，大部分是按这种方式进行了转换，同时上线的有好几个网站，我在第一时间做了收藏，这样就可以方便访问了。

不过因为我们大部分人访问Google的翻墙站点习惯了，脑袋里肌肉记忆的也是原来的网站，比如developers.google.com，有时候就会不自觉的输入这个网址，导致访问了速度慢、有时候没有中文的翻墙站点，这的确是一个问题。

幸运的是，今天在浏览Google官方博客的时候，发现他们开发了一个 Google Chrome 插件，安装之后，可以让我们在访问翻墙站点的时候，自动替换为对应的中国开发者站点，比如访问developers.google.com的时候，会帮我们自动替换为developers.google.cn。这真是一个好东西，可以帮我们省去了很多处理，工具自动化。

从其源代码实现中可以看出，它目前支持developers.google.com,firebase.google.com,developer.android.com,angular.io这几个域名的自动替换。

1
2
3
4
5
6
7

// These URL paths will be transformed to CN mirrors.
var mirrors = {
  "//developers.google.com" : "//developers.google.cn",
  "//firebase.google.com"   : "//firebase.google.cn",
  "//developer.android.com" : "//developer.android.google.cn",
  "//angular.io"            : "//angular.cn",
}

不过还有一些这些域名下没有CN镜像的站点，所以作者又做了一个白名单机制，在白名单内的URL不会被替换，即使他们是属于这几个域名下的。

1
2
3
4
5
6

// These URL paths are not available on CN mirrors, therefore won't be transformed.
var whitelist = [
  "//developers.google.com/groups",
  "//developers.google.com/events",
  "//firebase.google.com/support/contact/",
]

获取镜像CN地址URL的实现也非常简单，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function mirrorUrl(url) {
  // Check for whitelisting.
  for (var key in whitelist) {
    if (url.includes(whitelist[key])) {
      return url;
    }
  }

  // Check for mapping.
  for (var key in mirrors) {
  	if (url.includes(key)) {
  		url = url.replace(key, mirrors[key]);
  		break;
  	}
  }
  return url;
}

这个mirrorUrl会首先判断给定的URL是否在白名单内，如果在就不替换，返回原URL。如果不在白名单内，就再判断是否在需要替换的镜像列表内，如果在的话，就返回替换过的CN镜像URL。

基本的URL替换实现好之后，就需要在我们访问一个网址前，拦截我们的访问请求，获取访问的URL，然后调用mirrorUrl函数，获取最终要访问的URL即可。这就需要我们利用Chrome给我们提供的特性接口了，也就是Chrome的插件开发。

Chrome插件开发，为我们提供了chrome.webRequest.onBeforeRequest.addListener函数，可以让我们注册监听访问请求的函数，这样我们就可以拦截、访问甚至修改请求了。这个函数接收三个参数，他们分别是：

1
2
3

	var callback = function(details) {...};
    var filter = {...};
    var opt_extraInfoSpec = [...];

第一个参数callback是必填的，是拦截请求后的回调函数，Chrome会向这个函数传递包含请求URL的详细字典，也就是details参数。

第二个参数filter允许通过不同的方式定义我们要拦截哪些符合规则的请求，主要是URL匹配模式和请求类型type。

第三个参数opt_extraInfoSpec是可选的，值得注意的是如果该参数包含blocking字符串，那么就意味着我们的拦截请求处理是同步的，也就是必须等待callback回调函数返回后才能继续请求该URL。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var redirect_listener = function(details) {
  var url = mirrorUrl(details.url);
  return {redirectUrl : url};
};

function reset(currentState) {
  if (currentState === "on") {
    chrome.webRequest.onBeforeRequest.addListener(
    	redirect_listener,
    	{
        urls : ["<all_urls>"],
        types : ["main_frame", "sub_frame"]
      },
      [ "blocking" ]);
  }
  else {
    chrome.webRequest.onBeforeRequest.removeListener(redirect_listener);
  }
}

以上是插件的具体实现，以回调函数的方式替换要访问的URL，拦截策略是所有的URL请求，采用的是blocking阻塞的模式。这样我们在访问一个URL的时候，就会触发我们的处理程序，判断是否满足替换规则，如果满足，就可以替换请求的URL了，达到了我们自动访问 Google 中国开发者资源的目的。

从其实现来看，非常简单，可能稍微涉及一些 Google Chrome 插件开发的知识，不过也不太难。根本上来看，这是一个非常不错的，利用工具提高效率，减少重复劳动的例子，我们在工作中，生活中，也可以多使用这种方式，多借助工具，减少我们的重复劳动，提高我们的工具效率，把我们的时间和精力多放在创造性的工作上，而不是浪费在重复劳动上。

相关站点引用 http://developers.googleblog.cn/2017/01/chrome-google.html。

https://chrome.google.com/webstore/detail/google-cn-devsites/lgfkdmijgggnkoocgaenihkioidaejhd

https://github.com/chenzhuo914/google-cn-devsites-extension

本文为原创文章，转载请注明出处，欢迎扫码关注公众号flysnow_org或者网站http://www.flysnow.org/，第一时间看后续精彩文章。觉得好的话，顺手分享到朋友圈吧，感谢支持。

扫码关注