起因
因为最近工作比较忙, 经常忘记了喝水作为一名前端开发人员, 面对着浏览器工作是常态所以这里为了解决这个痛点, 面向前端开发人员写了一款浏览器插件他的作用就是提醒喝水
这里将半个小时设置为一个周期, 大概和番茄工作法的原理一样基本上集中注意力半个小时人也就累了这个时候喝口水, 舒缓一下紧张的神经也作为一个休息的周期为我们的工作继续高效的进行奠定了节奏
成果
这是我做的浏览器插件
插件下载地址
开发思路
下面顺道介绍一下浏览器插件开发思路, 编程不光要求理论还要有实践, 撸起袖子直接干
开始直接 github 找了一个浏览器插件代码 下载到本地
再配合和 segmentfault 的这篇文章
对照着练习
分析自己的需求, 就是半个小时通知我一次, 那么最简单的就是一个后台运行的定时器, 每隔半个小时运行一次
关键点在于后台运行和通知
代码肯定是最简单的定时器, 对于前端开发人员肯定不用多说, so easy!
这里主要在 manifest.json 里面配置
后台运行, 关键代码
- // 参考代码
- "background":{//background script 即插件运行的环境
- "page":"background.html"
- // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]// 数组. chrome 会在扩展启动时自动创建一个包含所有指定脚本的页面
- },
- // 实际代码
- "background": {
- "scripts": [
- "js/background.js"
- ]
- },
通知, 那就需要浏览器的通知权限了, 看了单词, 猜了一下那就是 permissions 这个了
- // 参考代码
- "permissions": [ // 允许插件访问的 url
- "http://*/",
- "bookmarks",
- "tabs",
- "history"
- ],
- // 实际代码
- "permissions": [
- "notifications"
- ],
这里的 notifucations 这个参数是我参考人家写的插件里面找到的, 当前我这是速成
正规的进行开发学习可以参考官方文档
如果英语不好的同学可以看下这个
360 翻译的文档
可以参考这个看
结语
感兴趣的可以下载插件进行使用
插件地址
源码地址
来源: http://www.bubuko.com/infodetail-2487630.html