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/,第一时间看后续精彩文章。觉得好的话,顺手分享到朋友圈吧,感谢支持。

扫码关注