提醒我喝水chrome插件开发指南

时间:2023-06-27 11:10:36 编辑:浏览器知识

起因

因为最近工作比较忙，经常忘记了喝水。作为一名前端开发人员，面对着浏览器工作是常态。所以这里为了解决这个痛点，面向前端开发人员写了一款浏览器插件。他的作用就是提醒喝水。
这里将半个小时设置为一个周期，大概和番茄工作法的原理一样。基本上集中注意力半个小时人也就累了。这个时候喝口水，舒缓一下紧张的神经。也作为一个休息的周期。为我们的工作继续高效的进行奠定了节奏。

成果

这是我做的浏览器插件
插件下载地址

开发思路

下面顺道介绍一下浏览器插件开发思路，编程不光要求理论还要有实践，撸起袖子直接干。

开始直接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翻译的文档

可以参考这个看。

结语

感兴趣的可以下载插件进行使用

文章TAG：提醒喝水 chrome 插件提醒我喝水chrome插件开发指南

加载全部内容