欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript編寫Chrome擴(kuò)展實(shí)現(xiàn)與瀏覽器的交互及時(shí)間通知

 更新時(shí)間：2016年05月16日 16:20:35   作者：arthinking  
得益于API,我們可以用JavaScript編寫Chrome擴(kuò)展實(shí)現(xiàn)與瀏覽器的交互及時(shí)間通知。值得一提的是現(xiàn)在Chrome擁有后臺(tái)進(jìn)程可以使通知在前臺(tái)瀏覽器關(guān)閉的情況下依然能夠生效.

和瀏覽器的交互
1、書簽
使用chrome.bookmarks模塊來創(chuàng)建、組織和管理書簽。也可參看 Override Pages，來創(chuàng)建一個(gè)可定制的書簽管理器頁面。

1.1、manifest.json 中配置

{
 "name": "My extension",
 ...
 "permissions": [
  "bookmarks"
 ],
 ...
}

對(duì)象和屬性：
簽是按照樹狀結(jié)構(gòu)組織的，每個(gè)節(jié)點(diǎn)都是一個(gè)書簽或者一組節(jié)點(diǎn)（每個(gè)書簽夾可包含多個(gè)節(jié)點(diǎn)）。每個(gè)節(jié)點(diǎn)都對(duì)應(yīng)一個(gè)BookmarkTreeNode 對(duì)象。

可以通過 chrome.bookmarks API來使用BookmarkTreeNode的屬性。

例子：
創(chuàng)建了一個(gè)標(biāo)題為 "Extension bookmarks"的書簽夾。

chrome.bookmarks.create({'parentId': bookmarkBar.id,
             'title': 'Extension bookmarks'},
            function(newFolder) {
 console.log("added folder: " + newFolder.title);
});

創(chuàng)建了一個(gè)指向擴(kuò)展開發(fā)文檔的書簽。

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、開發(fā)者工具
下列API模塊提供了開發(fā)人員工具的部分接口，以支持您對(duì)開發(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 模塊被用于和瀏覽器所訪問的頁面記錄交互。你可以添加、刪除、查詢?yōu)g覽器的歷史記錄。

5.1、manifest.json 中配置

{
 "name": "My extension",
 ...
 "permissions": [
  "history"
 ],
 ...
}

6、插件管理
chrome.management 模塊提供了管理已安裝和正在運(yùn)行中的擴(kuò)展或應(yīng)用的方法。對(duì)于重寫內(nèi)建的新標(biāo)簽頁的擴(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的兩種方法：

// 注意：沒有必要調(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、通知與其他頁面的通信方式：

// 在一個(gè)通知中...
chrome.extension.getBackgroundPage().doThing();

// 來自后臺(tái)網(wǎng)頁...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
 win.doOtherThing();
});

3、時(shí)間通知的實(shí)例
下面就創(chuàng)建一個(gè)時(shí)間通知，每個(gè)10秒鐘彈出一次時(shí)間提醒，一共彈出10次。

2016516161415314.png (315×87)

3.1、manifest.json

{
 // 這個(gè)字段將用在安裝對(duì)話框，擴(kuò)展管理界面，和store里面，彈出通知的標(biāo)題
 "name": "系統(tǒng)通知",
 // 擴(kuò)展的版本用一個(gè)到4個(gè)數(shù)字來表示，中間用點(diǎn)隔開,必須在0到65535之間，非零數(shù)字不能0開頭
 "version": "1",
 // 描述擴(kuò)種的一段字符串（不能是html或者其他格式，不能超過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)來表示擴(kuò)展，app，和皮膚
 "icons": {
   "16": "16.png", // 應(yīng)用的fa網(wǎng)頁圖標(biāo)
   "48": "48.png", // 應(yīng)用管理頁面需要這個(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)頁中使用的資源路徑（相對(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)文章

最新評(píng)論