Chrome 插件 030RateViewer

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。因此，如果在国外使用的话，估计速度会有一点慢。
• 每次点开插件，其实都是一次请求。但其实不一定有这个必要。可以缓存一下，然后等过一段时间再发起请求。（毕竟也不能给对方服务器造成负担）
• 可以记录一下前一天的汇率。在第二天查看时有一个参照和对比。（甚至可以积累一点数据做一个走势图，虽然感觉没什么必要）

所以，坑是永远挖不完的。期望能有时间把上面的坑填完吧。