桌面提醒助手谷歌浏览器插件

最近总是有一些每天需要做的任务遗忘,由于每天电脑开机浏览器就会打开,所以想着做一个插件,在特定的时间提醒自己做某一件事。

主文件:manifest.json

代码:

{
  // 这个字段将用在安装对话框,扩展管理界面,和store里面,弹出通知的标题
  "name": "桌面助手",
  // 扩展的版本用一个到4个数字来表示,中间用点隔开,必须在0到65535之间,非零数字不能0开头
  "version": "1",
  // 描述扩种的一段字符串(不能是html或者其他格式,不能超过132个字符)。这个描述必须对浏览器扩展的管理界面和Chrome Web Store都合适。
  "description": "桌面提醒插件",
  // 一个或者多个图标来表示扩展,app,和皮肤
  "icons": {
      "16":"images/32.png",
      "128": "images/128.png"  // 在webstore安装的时候使用
  },
  // 扩展或app将使用的一组权限
  "permissions": ["tabs", "notifications"],
  // Manifest V2 用background属性取代了background_page
  // 这里指定了一个Javascript脚本
  "background": { "scripts": ["background.js"] },
  // Manifest version 1在Chrome18中已经被弃用了,这里应该指定为2
  "manifest_version": 2

}


具体执行任务的js:background.js

代码:

/*
created 2017-11-22 by 1540077031
 v2.0.3 | (c) 2017 
*/
//配置通用参数
/*
根据语义可知含义
*/
var date=getDate();
var json={"moringhour":9,"moringminute":10,"moringsecond":10,"middayhour":11, "middayminute":59,"middaysecond":10,"afternoonhour":17,"afternoonminute":35,"afternoonsecond":10};

//温馨提醒
function showRemind(){
//alert(Boolean(window.Notification)); //判断浏览器是否支持通知  
//欢迎通知参数
var options={
	         type:"image",
            dir: "ltr",  //控制方向,据说目前浏览器还不支持
            lang: "utf-8",
            icon: "images/18.png",
			image:"images/oneremind.jpg",
            body: "电脑使用一小时了,请休息一下吧",				
            sound:""
            };
//创建通知对象
var n = new Notification("桌面小助手", options); 
//显示通知
n.onshow = function () { 
 setTimeout(n.close.bind(n), 8000); 
}
n.show();
}
function showWelcome(){
//alert(Boolean(window.Notification)); //判断浏览器是否支持通知  
//欢迎通知参数
var options={
	         type:"image",
            dir: "ltr",  //控制方向,据说目前浏览器还不支持
            lang: "utf-8",
            icon: "images/18.png",
			image:"images/timg1.jpg",
            body: "你好,欢迎使用桌面小助手",				
            sound:"9284.wav"
            };
//创建通知对象
var n = new Notification("桌面小助手", options); 
//显示通知
n.onshow = function () { 
 setTimeout(n.close.bind(n), 8000); 
}
n.show();
}
//早上通知参数
function showMorning(){
	var image1=["images/m1.jpg","images/m2.jpg","images/m3.jpg","images/m4.jpg"];
var index1 = Math.floor((Math.random()*image1.length));
var options={
            dir: "ltr",  //控制方向,据说目前浏览器还不支持
            lang: "utf-8",
            icon: "images/18.png",
			image:image1[index1],
            body: "早上好,希望以最好的状态度过这一天,加油!!"
        
            };
//创建通知对象
var n = new Notification("桌面小助手", options); 
//定时关闭通知
n.onshow = function () { 
  setTimeout(n.close.bind(n), 8000); 
}	
//显示通知
n.show();

}
//中午通知参数
function showMidday(){
var image2=["images/d1.jpg","images/d2.jpg","images/d3.jpg","images/d4.jpg","images/d5.jpg","images/d6.jpg","images/d7.jpg","images/d8.jpg","images/d9.jpg","images/d10.jpg","images/d11.jpg","images/d12.jpg","images/d13.jpg","images/d14.jpg","images/d15.jpg"];
var index2 = Math.floor((Math.random()*image2.length));
var options={
            dir: "ltr",  //控制方向,据说目前浏览器还不支持
            lang: "utf-8",
            icon: "images/18.png",
			image:image2[index2],
            body: "中午了 考虑一下吃什么去呢?",
            sound:""
            };
//创建通知对象
var n = new Notification("桌面小助手", options); 
//定时关闭通知
n.onshow = function () { 
  setTimeout(n.close.bind(n), 8000); 
}
//显示通知
n.show();
}
//通知配置通知参数
function showNotification(){
var options={
            dir: "ltr",  //控制方向,据说目前浏览器还不支持
            lang: "utf-8",
            icon: "images/18.png",
			image:"images/remind.jpg",
            body: "快出来写日报啦"+date,
            sound:"9284.wav"
            };
//创建通知对象
var n = new Notification("桌面小助手", options); 

//定时关闭通知
n.onshow = function () { 
  setTimeout(n.close.bind(n), 8000); 
}
//显示通知
n.show();
n.onclick = function() {
  window.open('http://XXXX.XXX.XXX:9999/in/', '_blank');
}
}
//浏览器是否支持 webkitNotifications
if(("Notification" in window)){
timing();
//isFirst();//每次打开浏览器通知
}
//定时任务
function timing(){ 
var go=setInterval(run,1000); 
} 
//具体执行方法
function run(){
var date=new Date(); 
//json字符串转对象
var obj=eval(json);  
if(date.getHours()==obj.afternoonhour&& date.getMinutes()==obj.afternoonminute && date.getSeconds()==obj.afternoonsecond){
//clearInterval(go); //终止定时任务
showNotification(); //下午通知显示
}else if(date.getHours()==obj.moringhour&& date.getMinutes()==obj.moringminute && date.getSeconds()==obj.moringsecond){
showMorning(); //早上通知显示
}else if(date.getHours()==obj.middayhour&& date.getMinutes()==obj.middayminute && date.getSeconds()==obj.middaysecond){
showMidday();  //中午通知显示
}else{

modifyflag();
}
} 
//判断是否第一次安装
function isFirst(){
	var f=true;        //第一次安装则显示cookies实现
   if(getCookie("flag")=='' && getCookie("flag")!=true){
	showWelcome();//欢迎通知显示
	document.cookie="flag="+f;
   }	
}
//获取cookies
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
  { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
  } 
  }
return ""
}
//获取当前时间格式化
function getDate(){
	var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
	var strDate = date.getDate();
	var hour=date.getHours();
	var minute=date.getMinutes();
	var second=date.getSeconds();
	if (month >= 1 && month <= 9) {
	    month = "0" + month;
	}
	if (strDate >= 0 && strDate <= 9) {
	    trDate = "0" + strDate;
	}
	if(hour>=0 && hour <=9){	    
	    hour="0"+hour;
	}
	if(minute>=0 && minute <=9){
	    minute="0"+minute;
	}
	if(second>=0 && second <=9){
	second="0"+second;
	}
	var currentdate = year +"年"+  month+"月" + strDate+"日" + hour +"时"+ minute +"分"+ second+"秒";
	return currentdate;	
}




还有一些图片都放在一个文件夹images中

其他的操作就是打包测试了。当然每个人的想法都不一样,我只提供自己的想法,具体的实现大家可以按照自己的需要做。

项目仓库地址:https://github.com/liberliushahe/remind

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liberalliushahe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值