和浏覽器的交互
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