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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP 闭包详解及实例代码
2016/09/28 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
Overload和Override的区别
2012/09/02 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
业务员的岗位职责
2014/03/15 职场文书
聘用意向书范本
2014/04/01 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
免职通知
2015/04/23 职场文书
公司更名通知函
2015/04/24 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2016年国陪研修感言
2015/11/18 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android