资讯专栏INFORMATION COLUMN

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

mozillazg / 373人阅读

摘要:分析自己的需求,就是半个小时通知我一次,那么最简单的就是一个后台运行的定时器,每隔半个小时运行一次。

起因

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

成果

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

开发思路

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

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

可以参考这个看。

结语

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

插件地址

源码地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107230.html

相关文章

  • python小脚本:定时提醒喝水

    摘要:多喝水分钟循环一次定时提醒喝水不用费劲的把脚本添加到计划任务了后缀保存为就不会出现控制台窗口了 # # -*- coding: utf-8 -*- import subprocess import time,os def createFile(filename): if os.path.exists(filename) == False: open(fil...

    jkyin 评论0 收藏0
  • 520为心爱的TA定制一个生活小助理吧

    摘要:只需要短短的几行代码结合微信就可以为你心爱的打造一个贴心智能小助理。每天早上的时候准时推送今天天气情况生活指数等。只需要两行代码即可注册一个定时执行事件,写好提前想好的提醒语。淡忘你的小可爱提醒你该喝水了快喝一杯水showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad55bc4cf835a7); 只需要短短的几行代码结合微信就可以为你心爱的T...

    王陆宽 评论0 收藏0
  • Chrome插件开发 - 提醒点餐

    摘要:背景一忙起来,老是忘记点的晚餐,晚餐很丰盛,重点是免费于是抽空写了个小插件,提醒我点餐在这简单分享一下。点击弹出的提示,就到点餐详情页面选菜去了。都有什么菜上图回到正题使用的插件来自社区查看效果请戳主要思路设置个定时器每天定时提醒。 背景 一忙起来, 老是忘记点Shopee的晚餐,晚餐很丰盛, 重点是免费!, 于是抽空写了个小插件,提醒我点餐, 在这简单分享一下。 先睹为快 到点自动...

    jollywing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<