`

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
分享到:
评论

相关推荐

    Chrome插件开发完整demo

    Chrome提供了丰富的API供插件使用,如存储数据(chrome.storage API)、管理书签(chrome.bookmarks API)、发送通知(chrome.notifications API)等。通过`manifest.json`中的`permissions`字段,可以了解插件使用...

    chrome扩展插件的3个例子帮助入门

    本文将通过三个实例,帮助初学者快速入门Chrome插件的开发。 首先,我们来看第一个例子——"弹窗"。在Chrome扩展中,弹窗通常用于显示一些临时信息或交互界面。这个例子可能涉及到创建一个按钮,当用户点击该按钮时...

    一个简洁高效的待办事项chrome插件

    开发者可能使用了Chrome的API,比如`chrome.storage`来持久化存储待办事项,`chrome.notifications`来创建提醒通知,以及`chrome.browserAction`来控制插件的图标和弹出视图。 "其它杂项"的标签可能意味着这个插件...

    基于HTML5 Notifications API的消息通知插件

    `easyNotify`是一款基于Notifications API的jQuery插件,它简化了在网页中实现通知功能的过程。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等任务。`easyNotify`将HTML5...

    推送通知「Push Notifications」-crx插件

    显示推送通知,为专家提供新的聊天/工作机会。 在Google Chrome浏览器中播放音频以获取背景标签 支持语言:English

    phonegap local-notifications插件应用实例含(android、ios、windows)

    在PhoneGap应用中,`cordova-plugin-local-notifications`是一个非常重要的插件,它使得开发者能够实现本地通知功能,这些通知可以在用户不直接与应用交互时触发,比如当应用在后台运行或者被关闭时。本实例将详细...

    最全的Notifications通知栏

    这个"最全的Notifications通知栏"项目提供了一个全面的示例集合,可以帮助开发者理解和掌握如何有效地使用Android的通知功能。 通知(Notification)在Android中扮演着与用户沟通的关键角色,即使应用在后台运行...

    Jira-Toast:Chrome插件, Jira二次开发, issue自动提醒

    - **Chrome API**:利用 Chrome 提供的 API,如 `chrome.storage` 用于存储用户配置,`chrome.notifications` 实现通知功能。 - **HTML**:构建用户界面的基础,与 CSS 结合定义了插件的结构和样式。 压缩包中的 **...

    flutter_local_notifications..zip

    《Flutter本地通知插件详解——基于flutter_local_notifications》 Flutter作为Google推出的跨平台开发框架,以其高效、便捷的特性受到了广大开发者们的喜爱。在移动应用中,本地通知是与用户进行交互的重要方式,...

    Notifications(通知栏学习)

    在Android开发中,Notifications是应用与用户交互的重要方式之一,尤其在后台运行时,通过通知栏消息能够及时向用户传达信息。本学习资料主要聚焦于Android的通知系统,旨在帮助开发者理解如何创建、管理和优化通知...

    Laravel开发-laravel-notifications

    通过`laravel-notifications`,你可以轻松地创建、管理和发送多种类型的通知,包括邮件、短信、数据库存储以及自定义通道。 ### 1. 安装与配置 首先,你需要通过Composer安装`laravel-notification`包。在项目根...

    LocalNotifications是在Android和iOS上利用Flutter创建通知的简便方法

    `local_notifications`插件还支持设置定时通知,通过设置触发器参数来安排在未来某个时间或间隔发送通知。 在Android系统中,你可以进一步定制通知栏的外观和行为,比如设置通知的优先级、颜色、角标,甚至添加可...

    WordPress自定义邮件通知插件-Better Notifications V1.8.2 汉化版

    Better Notifications for WordPress 是一个简单但功能强大的WordPress插件,允许您使用可视化编辑器和简码来自定义wordpress发送的电子邮件通知。不仅可以编辑所有WordPress默认的电子邮件通知,还可以添加新的各种...

    chrome-notifications

    chrome.notifications 插件 此插件允许应用程序在状态栏中显示通知。 地位 在安卓上稳定; iOS 不支持。 参考 API 参考在。 发行说明 1.0.5(2014 年 10 月 21 日) 文档更新。 1.0.4(2014 年 8 月 20 日) 添加...

    bootstrap-notifications, Bootstrap 框架的通知组件.zip

    bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications 。快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:...

    Laravel开发-laravel-notifications-plivo

    【Laravel 开发与 Plivo 短信通知驱动程序】 在 Laravel 框架中,开发者经常需要集成各种通知服务来发送短信、邮件或推送通知。`laravel-notifications` 是 Laravel 提供的一个强大组件,它使得实现这些功能变得...

    Laravel开发-telegram-notifications

    Laravel开发-telegram-notifications Laravel的电报通知

    Chrome扩展及应用开发.pdf

    - 使用`chrome.notifications` API发送桌面级别的通知。 - 适用于提醒用户重要信息的场景。 - **Omnibox** - 定制地址栏输入提示,当用户在地址栏输入特定前缀时显示自定义建议。 - 通过`chrome.omnibox` API...

    Laravel开发-laravel-notifications-pusher

    在本文中,我们将深入探讨如何在Laravel框架中使用laravel-notifications和Pusher来实现高效的通知推送系统。Laravel是PHP开发中最受欢迎的Web应用框架之一,它提供了丰富的功能和工具来简化复杂的Web开发任务。`...

Global site tag (gtag.js) - Google Analytics