0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

Chrome插件开发实例 - 时间通知(notifications)

1、创建notification的两种方法:

// 注意:没有必要调用 webkitNotifications.checkPermission()。
// 声明了 notifications 权限的扩展程序总是允许创建通知。

// 创建一个简单的文本通知:
var notification = webkitNotifications.createNotification(
'48.png', // 图标 URL,可以是相对路径
'您好!', // 通知标题
'内容(Lorem ipsum...)' // 通知正文文本
);

// 或者创建 HTML 通知:
var notification = webkitNotifications.createHTMLNotification(
'notification.html' // HTML 的 URL,可以是相对路径
);

// 然后显示通知。
notification.show();

2、通知与其他页面的通信方式:

// 在一个通知中...
chrome.extension.getBackgroundPage().doThing();

// 来自后台网页...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
win.doOtherThing();
});

3、时间通知的实例

下面就创建一个时间通知,每个10秒钟弹出一次时间提醒,一共弹出10次。

20130613235816

3.1、manifest.json

{
// 这个字段将用在安装对话框,扩展管理界面,和store里面,弹出通知的标题
"name": "系统通知",
// 扩展的版本用一个到4个数字来表示,中间用点隔开,必须在0到65535之间,非零数字不能0开头
"version": "1",
// 描述扩种的一段字符串(不能是html或者其他格式,不能超过132个字符)。这个描述必须对浏览器扩展的管理界面和Chrome Web Store都合适。
"description": "Shows off desktop notifications, which are \"toast\" windows that pop up on the desktop.",
// 一个或者多个图标来表示扩展,app,和皮肤
"icons": {
"16": "16.png", // 应用的fa网页图标
"48": "48.png", // 应用管理页面需要这个图标
"128": "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,

// manifest_version 2中,指定扩展程序包内可以在网页中使用的资源路径(相对于扩展程序包的根目录)需要使用该属性把资源列入白名单,插入的content script本身不需要加入白名单
"web_accessible_resources": [
"48.png"
]
}

3.2、background.js

/**

  • 显示一个时间 notification
    */
    function show() {
    var time = new Date().format('yyyy-MM-dd hh:mm:ss');
    // 创建一个notification
    var notification = window.webkitNotifications.createNotification(
    '48.png', // 图片,在web_accessible_resources 中添加了
    '现在的时间是:', // title
    time // body.
    );
    // 显示notification
    notification.show();
    }

// 格式化时间函数
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}

// 测试浏览器是否支持 webkitNotifications
if(window.webkitNotifications) {
// 显示通知
show();
var interval = 0;
// 弹出10次
var times = 10;
// 创建定时器
var timer = setInterval(function() {
interval++;
// 10秒钟弹出一次
if (10 <= interval) {
show();
interval = 0;
times--;
if(times <- 0) clearInterval(timer);
}
}, 1000);
}

源代码

https://github.com/arthinking/google-plugins/tree/master/example/notifications

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法