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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
javascript 三种编解码方式
Feb 01 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue实现微信获取用户信息的方法
Mar 21 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
JavaScript 中的六种循环方法
Jan 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python 中Pickle库的使用详解
2018/02/24 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python列表使用实现名字管理系统
2019/01/30 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
运行时异常与一般异常有何异同?
2014/01/05 面试题
教师实习自我鉴定
2013/12/13 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
应聘面试自我评价
2014/01/24 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
辩论赛主持人开场白
2015/05/29 职场文书