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

前端之家收集整理的这篇文章主要介绍了JavaScript编写Chrome扩展实现与浏览器的交互及时间通知前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

和浏览器的交互 1、书签

使用chrome.bookmarks模块来创建、组织和管理书签。也可参看 Override Pages,来创建一个可定制的书签管理器页面

1.1、manifest.json 中配置

对象和属性: 签是按照树状结构组织的,每个节点都是一个书签或者一组节点(每个书签夹可包含多个节点)。每个节点都对应一个BookmarkTreeNode 对象。

可以通过 chrome.bookmarks API来使用BookmarkTreeNode的属性

例子: 创建了一个标题为 "Extension bookmarks"的书签夹。

创建了一个指向扩展开发文档的书签。

2、Cookies 2.1、manifest.json 中配置

3、开发者工具

下列API模块提供了开发人员工具的部分接口,以支持您对开发人员工具进行扩展。

(1)devtools.inspectedWindow (2)devtools.network (3)devtools.panels

3.1、manifest.json 中配置

4、Events

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

你可以调用任何 Event 对象的以下方法

5、浏览历史

chorme.history 模块被用于和浏览器所访问的页面记录交互。你可以添加删除查询浏览器的历史记录。

5.1、manifest.json 中配置

6、插件管理

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

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

6.1、manifest.json 中配置

7、标签

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

7.1、manifest.json 中配置

8、视窗

使用chrome.windows模块与浏览器视窗进行交互。 你可以使用这个模块在浏览器中创建、修改和重新排列视窗。

8.1、manifest.json 中配置

时间通知(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

通知的标题 "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

原文链接:https://www.f2er.com/js/48722.html

猜你在找的JavaScript相关文章