利用数字公司 CDN 解决 GoogleApi 无法访问的问题

cover-image
因为 google 被 GXW 屏蔽，所以很多运用了 fonts.googleapis 的网站都打开很慢，会直到加载 fonts.googleapis 超时才能打开网页。

根本的解决方法是在天朝下载谷歌的字体文件到本地，而不使用它的云服务，然而这显然是不现实的方法。

数字公司这回还是挺厚道的提供了常用前端公共库和谷歌公共库的代理服务，地址在下面

http://libs.useso.com/

我的方法是通过 Chrome 插件，将谷歌字体等链接替换成 360 的国内 CDN 链接, 解决 google 在中国访问时常抽风影响到了 google api 和一些公共服务.

之前尝试用搜索引擎寻找这样的插件，找到的却是一个半成品插件 googleapi2useso。为什么说是半成品呢，它用的方案是通过在文档加载完成的时候注入content_script来实现的。在谷娘的文档里提到，这样做 js 运行的时刻相当于window.onload事件发生的时刻。显然这个时候浏览器到 googleapi 的请求已经超时，也就是文档已经持续加载几十秒了，除非在这个加载过程中按下 ESC 键强制停止加载，不然这个脚本不会执行。

想起好多 chrome 插件的实现应该是可以实现在请求发出前拦截并修改 HTTP 头的，便到 Google 的开发者平台 https://developer.chrome.com/extensions/ 寻找 API （英文，需要Fan墙），也是花了挺久（英语捉鸡 TvT）找到了这个叫webRequest的东西，实现在下面，代码臭勿喷…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
chrome.webRequest.onBeforeRequest.addListener(callback,
  {urls: ["<all_urls>"]},
  ["blocking"]
);

function callback(details){
	var url = details.url;
	var domain = url.match(/^(http|https)\:\/\/([a-zA-Z0-9\.\-])+/g);
	var judge = domain && domain[0].match(/googleapis/g);

	if(judge){
 		//for useso do not support https...
 		url = url.replace(/^https/, 'http').replace('googleapis', 'useso')
		return {redirectUrl: url};
	}
}

before
上面是使用之前的，下面是使用之后的效果
after

因为是第三方插件，所以安装方式是先下载 crx 文件，再打开 chrome 浏览器的扩展插件页面，把 crx 文件拖进去，最后点确定就行了。

crx插件下载