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

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

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
， 扩展
， chrome
， 通知
浏览器交互
chrome浏览器扩展程序、chrome浏览器扩展、chrome浏览器扩展商店、ios javascript 交互、c javascript 交互，以便于您获取更多的相关知识。

时间： 2024-11-03 15:00:49

JavaScript编写Chrome扩展实现与浏览器的交互及时间通知_javascript技巧的相关文章

javascript:FF/Chrome与IE动态加载元素的区别说明_javascript技巧

复制代码 代码如下: <!doctype html><html><head> <title>ff 与 ie 动态加载元素的区别</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css">  li{margin:0;p

javascript 检测浏览器类型和版本的代码_javascript技巧

检测浏览器及其版本的代码 复制代码 代码如下: getBrowser : function(){ var browser = { msie: false, firefox: false, opera: false, safari: false, chrome: false, netscape: false, appname: 'unknown', version: 0 }, userAgent = window.navigator.userAgent.toLowerCase(); if ( /(

javascript检查浏览器是否已经启用XX功能_javascript技巧

检测浏览器是否支持cookie功能 <script> if(navigator.cookieEnabled) { document.write("你的浏览器支持cookie功能!"); } else{ document.write("你的浏览器不支持cookie!"); } </script> 检查浏览器是否已经启用Java支持功能 <script type="text/javascript"> documen

解析浏览器端的AJAX缓存机制_javascript技巧

AJAX的缓存是由浏览器维持的,对于发向服务器的某个url,ajax仅在第一次请求时与服务器交互信息,之后的请求中,ajax不再向服务器提交请求,而是直接从缓存中提取数据. 有些情况下,我们需要每一次都从服务器得到更新后数据.思路是让每次请求的url都不同,而又不影响正常应用:在url之后加入随机内容. e.g. url=url+"&"+Math.random(); Key points: 1.每次请求的url都不一样(ajax的缓存便不起作用) 2.不影响正常应用(最基本的)

Js 获取、判断浏览器版本信息的简单方法_javascript技巧

Navigator 对象包含有关浏览器的信息: •appCodeName -- 浏览器代码名的字符串表示 •appName -- 官方浏览器名的字符串表示 •appVersion -- 浏览器版本信息的字符串表示 •cookieEnabled -- 如果启用cookie返回true,否则返回false •javaEnabled -- 如果启用java返回true,否则返回false •platform -- 浏览器所在计算机平台的字符串表示 •plugins -- 安装在浏览器中的插件数组 •t

基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标_javascript技巧

前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog

Web跨浏览器进程通信(Web跨域)_javascript技巧

在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性. 花了两个晚上简略的研究了下,LocalConnection的单向通信非常的简单,不过要实现多个终端交互,必须自己实现一套消息机制,见智见仁了. 为了简单演示,本例使用了基于广播的观察者模式:每个终端可以订阅自己感兴趣的主题,也可以向广播发送消息,通知其他感兴趣的终端. Demo: http://www.etherdream.com/FunnyScript/WebIPC/ (多

javascript 在 chrome（Google）浏览器中无效

问题描述 下面是我写的一段JS代码,在IE和friefox中都可以正常运行,但是,在google浏览器中就无效了,不知为什么.请大家帮帮忙!谢谢了啊!<scriptlanguage="javascript"type="text/javascript">functionClickCount(){varmydate=newDate();vartoupiaoTime=20111231;varnewTime=mydate.toLocaleDateString()

javascript检测浏览器的缩放状态实现代码_javascript技巧

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放). 检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供javascript的方法来检测浏览器的缩放. 对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放. 先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了.在普通的 PC 浏览器上,在默认无缩