JavaScript編寫(xiě)Chrome擴(kuò)展實(shí)現(xiàn)與瀏覽器的交互及時(shí)間通知
和瀏覽器的交互
1、書(shū)簽
使用chrome.bookmarks模塊來(lái)創(chuàng)建、組織和管理書(shū)簽。也可參看 Override Pages,來(lái)創(chuàng)建一個(gè)可定制的書(shū)簽管理器頁(yè)面。
1.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": [
"bookmarks"
],
...
}
對(duì)象和屬性:
簽是按照樹(shù)狀結(jié)構(gòu)組織的,每個(gè)節(jié)點(diǎn)都是一個(gè)書(shū)簽或者一組節(jié)點(diǎn)(每個(gè)書(shū)簽夾可包含多個(gè)節(jié)點(diǎn))。每個(gè)節(jié)點(diǎn)都對(duì)應(yīng)一個(gè)BookmarkTreeNode 對(duì)象。
可以通過(guò) chrome.bookmarks API來(lái)使用BookmarkTreeNode的屬性。
例子:
創(chuàng)建了一個(gè)標(biāo)題為 "Extension bookmarks"的書(shū)簽夾。
chrome.bookmarks.create({'parentId': bookmarkBar.id,
'title': 'Extension bookmarks'},
function(newFolder) {
console.log("added folder: " + newFolder.title);
});
創(chuàng)建了一個(gè)指向擴(kuò)展開(kāi)發(fā)文檔的書(shū)簽。
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、開(kāi)發(fā)者工具
下列API模塊提供了開(kāi)發(fā)人員工具的部分接口,以支持您對(duì)開(kāi)發(fā)人員工具進(jìn)行擴(kuò)展。
(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 是一個(gè)對(duì)象,當(dāng)你關(guān)注的一些事情發(fā)生時(shí)通知你。 以下是一個(gè)使用 chrome.tabs.onCreated event 的例子,每當(dāng)一個(gè)新標(biāo)簽創(chuàng)建時(shí),event對(duì)象會(huì)得到通知:
chrome.tabs.onCreated.addListener(function(tab) {
appendToLog('tabs.onCreated --'
+ ' window: ' + tab.windowId
+ ' tab: ' + tab.id
+ ' index: ' + tab.index
+ ' url: ' + tab.url);
});
你可以調(diào)用任何 Event 對(duì)象的以下方法:
void addListener(function callback(...)) void removeListener(function callback(...)) bool hasListener(function callback(...))
5、瀏覽歷史
chorme.history 模塊被用于和瀏覽器所訪問(wèn)的頁(yè)面記錄交互。你可以添加、刪除、查詢?yōu)g覽器的歷史記錄。
5.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": [
"history"
],
...
}
6、插件管理
chrome.management 模塊提供了管理已安裝和正在運(yùn)行中的擴(kuò)展或應(yīng)用的方法。對(duì)于重寫(xiě)內(nèi)建的新標(biāo)簽頁(yè)的擴(kuò)展尤其有用。
要使用這個(gè)API,您必須在擴(kuò)展清單文件中 中對(duì)授權(quán)。
6.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": [ "management" ],
...
}
7、標(biāo)簽
chrome標(biāo)簽?zāi)K被用于和瀏覽器的標(biāo)簽系統(tǒng)交互。此模塊被用于創(chuàng)建,修改,重新排列瀏覽器中的標(biāo)簽。
7.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": [
"tabs"
],
...
}
8、視窗
使用chrome.windows模塊與瀏覽器視窗進(jìn)行交互。 你可以使用這個(gè)模塊在瀏覽器中創(chuàng)建、修改和重新排列視窗。
8.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": ["tabs"],
...
}
時(shí)間通知(notifications)的實(shí)現(xiàn)
1、創(chuàng)建notification的兩種方法:
// 注意:沒(méi)有必要調(diào)用 webkitNotifications.checkPermission()。 // 聲明了 notifications 權(quán)限的擴(kuò)展程序總是允許創(chuàng)建通知。 // 創(chuàng)建一個(gè)簡(jiǎn)單的文本通知: var notification = webkitNotifications.createNotification( '48.png', // 圖標(biāo) URL,可以是相對(duì)路徑 '您好!', // 通知標(biāo)題 '內(nèi)容(Lorem ipsum...)' // 通知正文文本 ); // 或者創(chuàng)建 HTML 通知: var notification = webkitNotifications.createHTMLNotification( 'notification.html' // HTML 的 URL,可以是相對(duì)路徑 ); // 然后顯示通知。 notification.show();
2、通知與其他頁(yè)面的通信方式:
// 在一個(gè)通知中...
chrome.extension.getBackgroundPage().doThing();
// 來(lái)自后臺(tái)網(wǎng)頁(yè)...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
win.doOtherThing();
});
3、時(shí)間通知的實(shí)例
下面就創(chuàng)建一個(gè)時(shí)間通知,每個(gè)10秒鐘彈出一次時(shí)間提醒,一共彈出10次。

3.1、manifest.json
{
// 這個(gè)字段將用在安裝對(duì)話框,擴(kuò)展管理界面,和store里面,彈出通知的標(biāo)題
"name": "系統(tǒng)通知",
// 擴(kuò)展的版本用一個(gè)到4個(gè)數(shù)字來(lái)表示,中間用點(diǎn)隔開(kāi),必須在0到65535之間,非零數(shù)字不能0開(kāi)頭
"version": "1",
// 描述擴(kuò)種的一段字符串(不能是html或者其他格式,不能超過(guò)132個(gè)字符)。這個(gè)描述必須對(duì)瀏覽器擴(kuò)展的管理界面和Chrome Web Store都合適。
"description": "Shows off desktop notifications, which are \"toast\" windows that pop up on the desktop.",
// 一個(gè)或者多個(gè)圖標(biāo)來(lái)表示擴(kuò)展,app,和皮膚
"icons": {
"16": "16.png", // 應(yīng)用的fa網(wǎng)頁(yè)圖標(biāo)
"48": "48.png", // 應(yīng)用管理頁(yè)面需要這個(gè)圖標(biāo)
"128": "128.png" // 在webstore安裝的時(shí)候使用
},
// 擴(kuò)展或app將使用的一組權(quán)限
"permissions": ["tabs", "notifications"],
// Manifest V2 用background屬性取代了background_page
// 這里指定了一個(gè)Javascript腳本
"background": { "scripts": ["background.js"] },
// Manifest version 1在Chrome18中已經(jīng)被棄用了,這里應(yīng)該指定為2
"manifest_version": 2,
// manifest_version 2中,指定擴(kuò)展程序包內(nèi)可以在網(wǎng)頁(yè)中使用的資源路徑(相對(duì)于擴(kuò)展程序包的根目錄)需要使用該屬性把資源列入白名單,插入的content script本身不需要加入白名單
"web_accessible_resources": [
"48.png"
]
}
3.2、background.js
/**
* 顯示一個(gè)時(shí)間 notification
*/
function show() {
var time = new Date().format('yyyy-MM-dd hh:mm:ss');
// 創(chuàng)建一個(gè)notification
var notification = window.webkitNotifications.createNotification(
'48.png', // 圖片,在web_accessible_resources 中添加了
'現(xiàn)在的時(shí)間是:', // title
time // body.
);
// 顯示notification
notification.show();
}
// 格式化時(shí)間函數(shù)
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;
}
// 測(cè)試瀏覽器是否支持 webkitNotifications
if(window.webkitNotifications) {
// 顯示通知
show();
var interval = 0;
// 彈出10次
var times = 10;
// 創(chuàng)建定時(shí)器
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
相關(guān)文章
讓多個(gè)輸入框中的內(nèi)容同時(shí)變化的js代碼
怎么樣讓多個(gè)輸入框中的內(nèi)容同時(shí)變化?一般又要兼容IE與firefox2010-01-01
Bootstrap每天必學(xué)之輪播(Carousel)插件
Bootstrap每天必須之輪播(Carousel)插件,Bootstrap 輪播(Carousel)插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式,感興趣的小伙伴們可以參考一下2016-04-04
JavaScript實(shí)現(xiàn)QQ聊天室功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天室功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
概述一個(gè)頁(yè)面從輸入U(xiǎn)RL到頁(yè)面加載完的過(guò)程
本文主要對(duì)一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載完的過(guò)程中都發(fā)生了什么事情進(jìn)行概述,對(duì)我們學(xué)習(xí)網(wǎng)絡(luò)語(yǔ)言有一定的幫助,下面就跟小編一起來(lái)看下吧2016-12-12
JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法
這篇文章主要介紹了JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法,實(shí)例分析了javascript操作listbox列表框的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JS ListBox的簡(jiǎn)單功能實(shí)現(xiàn)代碼
這段時(shí)間在項(xiàng)目組都是做靜態(tài)頁(yè)面,都是些復(fù)制粘貼的活,難得碰到個(gè)稍微有點(diǎn)難度的頁(yè)面。后來(lái)看到這個(gè)頁(yè)面還不錯(cuò),可以自己做做看,雖然公司已經(jīng)有這樣的組件,但不想用,反正沒(méi)什么事,就當(dāng)多學(xué)學(xué)JS好了。2008-10-10
JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例
本篇文章主要介紹了JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08

