Chrome应该是很多人都喜欢用的浏览器，特别是玩前端的同学。Chrome上的各种插件也是很好用的。对于Chrome小插件的制作，很久之前就挺感兴趣的。以前看这教程做过一个P站的去广告的插件，不过效果不是太满意后面也就弃坑了。
Chrome插件相关的教程网上也不少，比较推荐的是下面几个：
- Chrome扩展及应用开发（首发版） 有简单的例子，挺适合上手的。
- Chrome非官方中文文档（需要科学上网） 查找一些API的用法比较管用。
- 360急速浏览器的文档 可以作为入门教材。
接下来就说一下这一次的小插件 030RateViewer。
首先是GitHub地址：Git地址 （在上面一级目录有crx文件，可以下载下来拖进Chrome使用）
起因其实很简单。某天在做React练习的时候，正好偷懒去逛萌购想买某水团的CD。不过貌似汇率涨了一点，只能姑且作罢。于是便想，能不能有个工具可以很简单的知道萌购汇率（即萌购的汇率），万一碰到低的时候就能赶紧去买买买了。所以就打算做个Chrome小插件随时看看萌购汇率。
当然，可能已经有了类似或者更好的插件。毕竟是个码农，还是应该自己动动手。简单的构想就是如果可以拿到萌购的页面，就能从上面找到萌购汇率，然后只要显示出来就可以了。（类似于一个爬虫）
因为整体比较简单，所以就只用了jQuery来辅助一下。CSS方面也没用SCSS。 原理也很简单，就是去萌购的主页抓汇率而已。
不过因为单纯JavaScript是不能跨域请求的，所以一开始想到了使用iframe。
跟iframe搏斗了半天之后……结果发现其实作为Chrome的拓展程序，是可以进行跨域请求的。只要在manifest文件中写好Permission即可。
于是，就用了$.get来进行抓取。
$(function() {
const URL = "http://www.030buy.net/";
// 获取当天的萌购汇率
$.get(URL, function(data) {
let rate = $(data).find('.jmall-currency').html();
$('.content').html(rate);
});
$('.desc').click(function(event) {
// 在新标签页中打开网页
chrome.tabs.create({url:URL});
event.event.stopPropagation();
});
});
主要逻辑就是js这一块，所以其他也不贴了。做好之后效果就像这样。
当然修改的地方和拓展点还有很多。比如下面几个。
- 萌购对于国内的IP，给出的地址是.net。而对于国外的IP给出的地址是.com。因此，如果在国外使用的话，估计速度会有一点慢。
- 每次点开插件，其实都是一次请求。但其实不一定有这个必要。可以缓存一下，然后等过一段时间再发起请求。（毕竟也不能给对方服务器造成负担）
- 可以记录一下前一天的汇率。在第二天查看时有一个参照和对比。（甚至可以积累一点数据做一个走势图，虽然感觉没什么必要）
所以，坑是永远挖不完的。期望能有时间把上面的坑填完吧。
