当前位置: 首页 > news >正文

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

起因

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

成果

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

开发思路

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

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

可以参考这个看。

结语

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

  • 插件地址
  • 源码地址

相关文章:

  • 进度二
  • mysql数据库主从复制
  • Python_OOP
  • 获取ip地址
  • ajax引用检测用户名是否存在
  • IDEA快捷键笔记
  • JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
  • 用Metaclass实现一个精简的ORM框架
  • 看不到短期回报,首席财务官们表示对AI并不感冒
  • 杂感一篇
  • 影响存储快照使用率的六大因素
  • 寒假作业02
  • 绝对路径和相对路径
  • rabbitmq延迟消息示例
  • JS易混淆的方法整理
  • JS 中的深拷贝与浅拷贝
  • Computed property XXX was assigned to but it has no setter
  • JS基础之数据类型、对象、原型、原型链、继承
  • MYSQL 的 IF 函数
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • nodejs实现webservice问题总结
  • TypeScript实现数据结构(一)栈,队列,链表
  • ViewService——一种保证客户端与服务端同步的方法
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • 从@property说起(二)当我们写下@property (nonatomic, weak) id obj时,我们究竟写了什么...
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 浮现式设计
  • 前端代码风格自动化系列(二)之Commitlint
  • 如何利用MongoDB打造TOP榜小程序
  • 网页视频流m3u8/ts视频下载
  • 为视图添加丝滑的水波纹
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • !!java web学习笔记(一到五)
  • #define
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (a /b)*c的值
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (第二周)效能测试
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (小白学Java)Java简介和基本配置
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (一)Thymeleaf用法——Thymeleaf简介
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (轉貼) UML中文FAQ (OO) (UML)
  • *++p:p先自+,然后*p,最终为3 ++*p:先*p,即arr[0]=1,然后再++,最终为2 *p++:值为arr[0],即1,该语句执行完毕后,p指向arr[1]
  • .NET Micro Framework初体验
  • .NET/C# 使用 SpanT 为字符串处理提升性能
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .net与java建立WebService再互相调用
  • .net中应用SQL缓存(实例使用)
  • /etc/sudoer文件配置简析
  • @Mapper作用
  • @Query中countQuery的介绍
  • @SuppressLint(NewApi)和@TargetApi()的区别