JavaScript编写Chrome扩展实现与浏览器的交互及时间通知

时间:2021-05-26

和浏览器的交互
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", ...}

4、Events
Event 是一个对象,当你关注的一些事情发生时通知你。 以下是一个使用 chrome.tabs.onCreated event 的例子,每当一个新标签创建时,event对象会得到通知:

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" ], ...}

6、插件管理
chrome.management 模块提供了管理已安装和正在运行中的扩展或应用的方法。对于重写内建的新标签页的扩展尤其有用。

要使用这个API,您必须在扩展清单文件中 中对授权。

6.1、manifest.json 中配置

{ "name": "My extension", ... "permissions": [ "management" ], ...}

7、标签
chrome标签模块被用于和浏览器的标签系统交互。此模块被用于创建,修改,重新排列浏览器中的标签。

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;}// 测试浏览器是否支持 webkitNotificationsif(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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章