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实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
JavaScript函数柯里化
Nov 07 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
php过滤危险html代码
2008/08/18 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python 发送get请求接口详解
2020/11/17 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
什么是封装
2013/03/26 面试题
执行总经理岗位职责
2014/02/03 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
联片教研活动总结
2014/07/01 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python