JavaScript编写Chrome扩展实现与浏览器的交互及时间
和浏览器的交互
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、时间通知的实例
狼蚁网站SEO优化就创建一个时间通知，每个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