自己实现的一个chrome插件

前言

chrome 插件很多年前就有, 很多年前我也在用各种各样的插件.
但是最近想打造一个自己的插件.
于是查了一下文档, 做出一个简单的样品来了.

源码放在了 github 上 personal-chrome-extensions 了.

背景

最近是 javascript 横行天下的时代了.
很多人之前认为 javascript 是在浏览器上运行的语言, 这种认知减缓了 javascript 的发展速度.
实际上 javascript 和 c/c++ 一样, 都是一门语言, 至于这门语言可以做什么, 是由码农说了算的.

比如我们可以使用 javascript 来写WEB上的一些东西, 我们可以用 javascript 来写后台的服务, 我们还可以使用 javascript 来写移动端的app软件.
甚至我们还可以写一些PC上的应用软件.

说了这么多, 只是想说 javascript 只是一个普普通通的计算机语言, 而chrome的插件就是使用 javascript 为核心语言实现的.

为什么说是核心语言呢, 因为一个chrome插件一般还需要一些 html, css 等语言的辅助才能算一个插件.

或者简单的说, chrome 插件就是做了一个小型的网站, 或者 web 页面吧.

说到这里, 想起一个道理: 对一个技术的认识很重要.
初期, 一个技术因为某些场景而产生了, 接下来的一段时间, 大家都会把这个技术的功能局限在那个场景下.
突然有一天, 某个码农发现这个技术可以在其他地方使用, 而且很强大的样子, 于是这个技术就火了.

比如docker相关技术, 很多年前就有了, 但是最近才被人们发现这种技术的强大.

技术简介

关于学习一个东西, 一般情况下, 看官方的文档是最快的方法.

如果一个工具没有文档, 有没有demo, 我是不想使用它的.
除非那个工具比较吸引人, 这时我又会去尝试看那个工具的源代码来认识那个工具.
扯远了.

chrome 插件的官方地址在 这里, 如果页面打不开, 说明这个页面被墙了, 自己自备梯子吧.

chrome 插件有一个核心文件, 叫做 manifest.json .
这个文件包含有一些基本信息: 名字,描述,版本等等.
当然, 这个文件还包含了一个插件的功能信息, 右上角的插件图片, 点击图片弹出的页面或者点击图片对应的事件, 还有后台注入页面运行的脚本.

我们开发一个插件, 一般需要做两个东西: 点击图标弹出的页面 和 注入到页面运行的脚本.

弹出的页面是一个单独的窗口, 就像一个网站一样, 实现自己的功能就行了.
注入到页面运行的脚本这个看起来就比较可怕了, 如果不小心安装了恶意插件, 我们登录时密码可能被盗走的.
想到这里, 不敢继续往下说了, 还是就此打住吧.

插件简介

既然了解了chrome插件能够干什么, 那我们自然就想做点什么了.
比如我的文档一般是 markdown 编写的, 那自然就需要一个工具能够展示 markdown 编写后的界面.

比如这样:

又或者, 开发时, 通常调用一个WEB接口来获取数据, 数据一般都是json形式, 那我们自然就想可以自动格式化json了.

比如这样:

今天学弟们要比赛, 想起以前比赛刚开始的时候, 总是因为题目打不开而浪费一些时间.
如果能开发一个插件, 先自动把所有的题目下载好, 那就不需要浪费时间去一个一个的打开题目了.

于是自己花了几个小时做了这么一个东西, 名字叫做 一键加载ACM比赛题, 设想后续可以支持更多的比赛网站.

功能描述

这个功能的原理很简单, 在题目列表页运行这个插件, 插件会尝试获取题目列表以及对应的链接.
然后尝试下载这些题目链接, 最后显示在一个页面上即可.

像这个样子:

安装说明可以参考这里 : chrome扩展集合

好了, 欢迎大家互相宣传来使用.