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次。
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提供了丰富的API供插件使用,如存储数据(chrome.storage API)、管理书签(chrome.bookmarks API)、发送通知(chrome.notifications API)等。通过`manifest.json`中的`permissions`字段,可以了解插件使用...
本文将通过三个实例,帮助初学者快速入门Chrome插件的开发。 首先,我们来看第一个例子——"弹窗"。在Chrome扩展中,弹窗通常用于显示一些临时信息或交互界面。这个例子可能涉及到创建一个按钮,当用户点击该按钮时...
开发者可能使用了Chrome的API,比如`chrome.storage`来持久化存储待办事项,`chrome.notifications`来创建提醒通知,以及`chrome.browserAction`来控制插件的图标和弹出视图。 "其它杂项"的标签可能意味着这个插件...
`easyNotify`是一款基于Notifications API的jQuery插件,它简化了在网页中实现通知功能的过程。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等任务。`easyNotify`将HTML5...
显示推送通知,为专家提供新的聊天/工作机会。 在Google Chrome浏览器中播放音频以获取背景标签 支持语言:English
在PhoneGap应用中,`cordova-plugin-local-notifications`是一个非常重要的插件,它使得开发者能够实现本地通知功能,这些通知可以在用户不直接与应用交互时触发,比如当应用在后台运行或者被关闭时。本实例将详细...
这个"最全的Notifications通知栏"项目提供了一个全面的示例集合,可以帮助开发者理解和掌握如何有效地使用Android的通知功能。 通知(Notification)在Android中扮演着与用户沟通的关键角色,即使应用在后台运行...
《Flutter本地通知插件详解——基于flutter_local_notifications》 Flutter作为Google推出的跨平台开发框架,以其高效、便捷的特性受到了广大开发者们的喜爱。在移动应用中,本地通知是与用户进行交互的重要方式,...
在Android开发中,Notifications是应用与用户交互的重要方式之一,尤其在后台运行时,通过通知栏消息能够及时向用户传达信息。本学习资料主要聚焦于Android的通知系统,旨在帮助开发者理解如何创建、管理和优化通知...
通过`laravel-notifications`,你可以轻松地创建、管理和发送多种类型的通知,包括邮件、短信、数据库存储以及自定义通道。 ### 1. 安装与配置 首先,你需要通过Composer安装`laravel-notification`包。在项目根...
`local_notifications`插件还支持设置定时通知,通过设置触发器参数来安排在未来某个时间或间隔发送通知。 在Android系统中,你可以进一步定制通知栏的外观和行为,比如设置通知的优先级、颜色、角标,甚至添加可...
Better Notifications for WordPress 是一个简单但功能强大的WordPress插件,允许您使用可视化编辑器和简码来自定义wordpress发送的电子邮件通知。不仅可以编辑所有WordPress默认的电子邮件通知,还可以添加新的各种...
chrome.notifications 插件 此插件允许应用程序在状态栏中显示通知。 地位 在安卓上稳定; iOS 不支持。 参考 API 参考在。 发行说明 1.0.5(2014 年 10 月 21 日) 文档更新。 1.0.4(2014 年 8 月 20 日) 添加...
bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications 。快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:...
【Laravel 开发与 Plivo 短信通知驱动程序】 在 Laravel 框架中,开发者经常需要集成各种通知服务来发送短信、邮件或推送通知。`laravel-notifications` 是 Laravel 提供的一个强大组件,它使得实现这些功能变得...
Laravel开发-telegram-notifications Laravel的电报通知
- 使用`chrome.notifications` API发送桌面级别的通知。 - 适用于提醒用户重要信息的场景。 - **Omnibox** - 定制地址栏输入提示,当用户在地址栏输入特定前缀时显示自定义建议。 - 通过`chrome.omnibox` API...
在本文中,我们将深入探讨如何在Laravel框架中使用laravel-notifications和Pusher来实现高效的通知推送系统。Laravel是PHP开发中最受欢迎的Web应用框架之一,它提供了丰富的功能和工具来简化复杂的Web开发任务。`...
- **Chrome API**:利用 Chrome 提供的 API,如 `chrome.storage` 用于存储用户配置,`chrome.notifications` 实现通知功能。 - **HTML**:构建用户界面的基础,与 CSS 结合定义了插件的结构和样式。 压缩包中的 **...