得益于 API, 我们可以用 JavaScript 编写 Chrome 扩展实现与浏览器的交互及时间通知。值得一提的是现在 Chrome 拥有后台进程可以使通知在前台浏览器关闭的情况下依然能够生效.
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
和浏览器的交互
1、书签
使用 chrome.bookmarks 模块来创建、组织和管理书签。也可参看 Override Pages,来创建一个可定制的书签管理器页面。
1.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [
- "bookmarks"
- ],
- ...
- }
对象和属性:
签是按照树状结构组织的,每个节点都是一个书签或者一组节点(每个书签夹可包含多个节点)。每个节点都对应一个 BookmarkTreeNode 对象。
可以通过 chrome.bookmarks API 来使用 BookmarkTreeNode 的属性。
例子:
创建了一个标题为 "Extension bookmarks" 的书签夹。
- chrome.bookmarks.create({
- 'parentId': bookmarkBar.id,
- 'title': 'Extension bookmarks'
- },
- function(newFolder) {
- console.log("added folder: " + newFolder.title);
- });
创建了一个指向扩展开发文档的书签。
- chrome.bookmarks.create({
- 'parentId': extensionsFolderId,
- 'title': 'Extensions doc',
- 'url': 'http://code.google.com/chrome/extensions'
- });
2、Cookies
2.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [
- "cookies",
- "*://*.google.com"
- ],
- ...
- }
3、开发者工具
下列 API 模块提供了开发人员工具的部分接口,以支持您对开发人员工具进行扩展。
(1)devtools.inspectedWindow
(2)devtools.network
(3)devtools.panels
3.1、manifest.json 中配置
- {
- "name": ...
- "version": "1.0",
- "minimum_chrome_version": "10.0",
- "devtools_page": "devtools.html",
- ...
- }
- chrome.tabs.onCreated.addListener(function(tab) {
- appendToLog('tabs.onCreated --'
- + ' window: ' + tab.windowId
- + ' tab: ' + tab.id
- + ' index: ' + tab.index
- + ' url: ' + tab.url);
- });
你可以调用任何 Event 对象的以下方法:
- void addListener(function callback(...))
- void removeListener(function callback(...))
- bool hasListener(function callback(...))
5、浏览历史
chorme.history 模块被用于和浏览器所访问的页面记录交互。你可以添加、删除、查询浏览器的历史记录。
5.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [
- "history"
- ],
- ...
- }
要使用这个 API,您必须在扩展清单文件中 中对授权。
6.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [ "management" ],
- ...
- }
7.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [
- "tabs"
- ],
- ...
- }
8、视窗
使用 chrome.windows 模块与浏览器视窗进行交互。 你可以使用这个模块在浏览器中创建、修改和重新排列视窗。
8.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": ["tabs"],
- ...
- }
时间通知(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 次。
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
来源: http://www.phperz.com/article/17/0401/265726.html