Chrome插件开发实例 – 时间通知(notifications)
本文由发表于4年前 | Javascript | 评论数 1 |  被围观 9,700 views+
1、创建notification的两种方法:2、通知与其他页面的通信方式:3、时间通知的实例3.1、manifest.json3.2、background.js
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宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/chrome-plugin-development-examples-time-notification-notifications.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 6/13
文章评论
    一条评论
  1. qdujunjie 2015年03月17日12:13:45  #-49楼 回复 回复

    你好,想请教下,chrome插件能控制notification的样式吗?能控制从哪里弹出吗?

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 JSF笔记 – JSF配置文件的说明和常用配置元素 2011/12/1
2 jQuery使用数组编写向左滚动的图片栏 2011/5/15
3 Struts2中的Unable to load configuration错误的分析与解决方法 2011/5/22
4 Java虚拟机笔记 – JVM 自定义的类加载器的实现和使用 2011/11/5
5 转角处的音乐梦想家 2012/7/4
6 JavaScript设计模式笔记 – 享元模式 代理模式 2012/11/21
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.