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


Posted in Javascript onMay 16, 2016

和浏览器的交互
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次。

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

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

Javascript 相关文章推荐
js资料toString 方法
Mar 13 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
动态的9*9乘法表效果的实现代码
May 16 #Javascript
Svg.js实例教程及使用手册详解(一)
May 16 #Javascript
限制只能输入数字的实现代码
May 16 #Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 #Javascript
基于javascript实现最简单的选项卡切换效果
May 16 #Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP多进程编程实例详解
2017/07/19 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python比较2个xml内容的方法
2015/05/11 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python实现关键词提取的示例讲解
2018/04/28 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
日期和时间问题
2015/01/04 面试题
小班下学期评语
2014/05/04 职场文书
经营理念标语
2014/06/21 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
先进典型发言材料
2014/12/30 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
学校运动会开幕词
2016/03/03 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
V Rising 服务器搭建图文教程
2022/06/16 Servers