瞭解Chrome擴展程序開發--摘抄

瞭解Chrome擴展程序開發

2018-01-11 邊城到此莫若 雞蛋君說前端

首先，我嘗試來用簡單幾句話描述一下Chrome擴展程序：

Chrome擴展主要用於對瀏覽器功能的加強，它強調與瀏覽器相結合。好比Chrome擴展能夠在瀏覽器的工具欄和地址欄中顯示圖標，它能夠更改用戶當前瀏覽的網頁中的內容，也能夠更改瀏覽器代理服務器的設置等等。

0. 認識Chrome擴展程序 - 最重要的入口 manifest.json

---

 

Chrome擴展是一系列文件的集合，這些文件包括HTML文件、CSS樣式文件、JavaScript腳本文件、圖片等靜態文件以及manifest.json。清單文件信息

擴展被安裝後，Chrome就會讀取擴展中的manifest.json文件。這個文件的文件名固定爲manifest.json，內容是按照必定格式描述的擴展相關信息，如擴展名稱、版本、更新地址、請求的權限、擴展的UI界面入口等等。這樣Chrome就能夠知道在瀏覽器中如何呈現這個擴展，以及這個擴展如何同用戶進行交互。

經過Chrome擴展咱們能夠對用戶當前瀏覽的頁面進行操做，實際上就是對用戶當前瀏覽頁面的DOM進行操做。經過Manifest中的content_scripts屬性能夠指定將哪些腳本什麼時候注入到哪些頁面中，當用戶訪問這些頁面後，相應腳本便可自動運行，從而對頁面DOM進行操做。

值得一提的是，Google容許Chrome擴展應用沒必要受限於跨域限制。跨域指的是JavaScript經過XMLHttpRequest請求數據時，調用JavaScript的頁面所在的域和被請求頁面的域不一致。對於網站來講，瀏覽器出於安全考慮是不容許跨域。這個規則若是一樣限制Chrome擴展應用，就會使其能力大打折扣，因此Google容許Chrome擴展應用沒必要受限於跨域限制。但出於安全考慮，須要在Manifest的permissions屬性中聲明須要跨域的權限。

1. 操做用戶正在瀏覽的頁面

---

 

經過Chrome擴展咱們能夠對用戶當前瀏覽的頁面進行操做，實際上就是對用戶當前瀏覽頁面的DOM進行操做。經過Manifest中的content_scripts屬性能夠指定將哪些腳本什麼時候注入到哪些頁面中，當用戶訪問這些頁面後，相應腳本便可自動運行，從而對頁面DOM進行操做。

content_scripts很像Userscript，它就是將指定的腳本文件插入到符合規則的特定頁面中，從而使插入的腳本能夠對頁面的DOM進行操做。

2. 常駐後臺

---

 

有時咱們但願擴展不只在用戶主動發起時（如開啓特定頁面或點擊擴展圖標等）才運行，而是但願擴展自動運行並常駐後臺來實現一些特定的功能，好比實時提示未讀郵件數量、後臺播放音樂等等。

Chrome容許擴展應用在後臺常駐一個頁面以實現這樣的功能。在一些典型的擴展中，UI頁面，如popup頁面或者options頁面，在須要更新一些狀態時，會向後臺頁面請求數據，而當後臺頁面檢測到狀態發生改變時，也會通知UI界面刷新。後臺頁面與UI頁面能夠相互通訊.

在Manifest中指定background域可使擴展常駐後臺。background能夠包含三種屬性，分別是scripts、page和persistent。若是指定了scripts屬性，則Chrome會在擴展啓動時自動建立一個包含全部指定腳本的頁面；若是指定了page屬性，則Chrome會將指定的HTML文件做爲後臺頁面運行。一般咱們只須要使用scripts屬性便可，除非在後臺頁面中須要構建特殊的HTML——但通常狀況下後臺頁面的HTML咱們是看不到的。persistent屬性定義了常駐後臺的方式——當其值爲true時，表示擴展將一直在後臺運行，不管其是否正在工做；當其值爲false時，表示擴展在後臺按需運行，這就是Chrome後來提出EventPage。Event Page能夠有效減少擴展對內存的消耗，如非必要，請將persistent設置爲false。persistent的默認值爲true。

 

3. 帶選項頁面的擴展

---

 

"options_page": "options.html"

通常來講作一些選擇設置而後本地localstorage的工做

4. 擴展頁面間的通訊

---

 

Chrome提供了4個有關擴展頁面間相互通訊的接口，分別是runtime.sendMessage、runtime.onMessage、runtime.connect和runtime.onConnect。

請注意，Chrome提供的大部分API是不支持在content_scripts中運行的，但runtime.sendMessage和runtime.onMessage能夠在content_scripts中運行，因此擴展的其餘頁面也能夠同content_scripts相互通訊。

runtime.sendMessage完整的方法爲：

chrome.runtime.sendMessage(
extensionId, message, options, callback)

其中extensionId爲所發送消息的目標擴展，若是不指定這個值，則默認爲發起此消息的擴展自己；message爲要發送的內容，類型隨意，內容隨意，好比能夠是'Hello'，也能夠是{action: 'play'}、2013和['Jim', 'Tom', 'Kate']等等；

runtime.onMessage完整的方法爲：

chrome.runtime.onMessage.addListener(callback)

此處的callback爲必選參數，爲回調函數。callback接收到的參數有三個，分別是message、sender和sendResponse，即消息內容、消息發送者相關信息和相應函數。其中sender對象包含4個屬性，分別是tab、id、url和tlsChannelId，tab是發起消息的標籤

5. Browser Actions

---

 

 

1. 圖標

"browser_action": {    
"default_icon": {        
"19": "images/icon19.png",        
"38": "images/icon38.png"    } } chrome.browserAction.setIcon(details, callback) 
// details的類型爲對象，能夠包含三個屬性，
分別是imageData、path和tabId。

2.Popup頁面

Popup頁面提供了一個簡單便捷的UI接口。新窗口會使用戶反感，而popup頁面的設計更像是瀏覽器的一部分，但popup頁面並不適用於全部狀況。因爲其在關閉後，就至關於用戶關閉了相應的標籤頁。當用戶再次打開這個頁面時，全部的DOM和js空間變量都將被從新建立。

• 使用帶有滾動條的DIV容器。

• 設計一個更好的滾動條樣式。

• 考慮屏蔽右鍵菜單。

• 使用外部引用的腳本。

值得注意的是Chrome不容許將JavaScript代碼段直接內嵌入HTML文檔，因此咱們須要經過外部引入的方式引用JS文件。固然inline-script也是被禁止的，因此全部元素的事件都須要使用JavaScript代碼進行綁定。

• 不要在popup頁面的js空間變量中保存數據。

3.標題和badge

將鼠標移至擴展圖標上，片刻後所顯示的文字就是擴展的標題。標題不只僅只是給出擴展的名稱，有時它能爲用戶提供更多的信息。好比一款聊天客戶端的標題，能夠動態地顯示當前登陸的賬戶信息，如號碼和登陸狀態等。因此若是能合理使用好擴展的標題，會給用戶帶來更好的體驗。

"browser_action": {    
"default_title": "Extension Title"} chrome.browserAction.setTitle({
title: 'This is a new title'});

Badge至關於APP未讀消息數的小氣泡。目前只可以經過JavaScript設定顯示的內容，同時Chrome還提供了更改badge背景的方法。若是不定義badge的背景顏色，默認將使用紅色。badge目前還不支持更改文字的顏色——始終是白色，因此應避免使用淺顏色做爲背景。

chrome.browserAction.setBadgeBackgroundColor({
color: '#0000FF'});
chrome.browserAction.setBadgeBackgroundColor({
color: [0, 255, 0, 128]});
chrome.browserAction.setBadgeText({text: 'Dog'});

 

6. 右鍵菜單、桌面提醒、地址欄（略過）

---

 

當用戶在網頁中點擊鼠標右鍵後，會喚出一個菜單，在上面有複製、粘貼和翻譯等選項，爲用戶提供快捷便利的功能。Chrome也將這裏開放給了開發者，也就是說咱們能夠把本身所編寫的擴展功能放到右鍵菜單中。

要將擴展加入到右鍵菜單中，首先要在Manifest的permissions域中聲明contextMenus權限。

"permissions": [    
"contextMenus"]"icons": {   
 "16": "icon16.png"}

以前的章節提到過利用標題和badge向用戶提供有限的信息，那麼若是須要向用戶提供更加豐富的信息怎麼辦呢？Chrome提供了桌面提醒功能，這個功能能夠爲用戶提供更加豐富的信息。

"permissions": [    "notifications"]

建立桌面提醒很是容易，只需指定標題、內容和圖片便可。下面的代碼生成了標題爲「Notification Demo」，內容爲「Merry Christmas」，圖片爲「icon48.png」的桌面提醒窗口。

var notification = webkitNotifications.createNotification( 
'icon48.png','Notification Demo','Merry Christmas'); notification.show();

須要注意的是，對於要在桌面窗口中顯示的圖片，必須在Manifest的web_accessible_resources域中進行聲明，不然會出現圖片沒法打開的狀況：

"web_accessible_resources": ["images/*.png"]

桌面提醒窗口提供了四種事件：ondisplay、onerror、onclose和onclick。

除了用戶主動關閉桌面提醒窗口外，還能夠經過cancel方法自動關閉。

setTimeout(function(){ notification.cancel();},5000);

 

7. 管理你的瀏覽器

1.書籤

Chrome爲開發者提供了添加、分類（書籤文件夾）和排序等方法來操做書籤，同時也提供了讀取書籤的方法。
要在擴展中操做書籤，須要在Manifest中聲明bookmarks權限：

"permissions": [    "bookmarks"]

2.Cookies

Cookies是瀏覽器記錄在本地的用戶數據，如用戶的登陸信息。Chrome爲擴展提供了Cookies API用以管理Cookies。
要管理Cookies，須要在Manifest中聲明cookies權限，同時也要聲明所需管理Cookies所在的域：

"permissions": [    
"cookies",    "*://*.google.com"]
"permissions": ["cookies","<all_urls>"]

3.歷史

歷史用於記錄用戶訪問過頁面的信息。與書籤同樣，歷史也是瀏覽器很早就具備的功能，對用戶來講也是一個很重要的功能。Chrome提供了history接口，容許擴展對用戶的歷史進行管理。

要使用history接口，須要在Manifest中聲明history權限：

"permissions": ["history"]

4.管理擴展與應用

除了經過chrome://extensions/管理Chrome擴展和應用外，也能夠經過Chrome的management接口管理。management接口能夠獲取用戶已安裝的擴展和應用信息，同時還能夠卸載和禁用它們。經過management接口能夠編寫出智能管理擴展和應用的程序。

要使用management接口，須要在Manifest中聲明management權限：

"permissions": ["management"]

5.標籤

Chrome經過tabs方法提供了管理標籤的方法與監聽標籤行爲的事件，大多數方法與事件是無需聲明特殊權限的，但有關標籤的url、title和favIconUrl的操做（包括讀取），都須要聲明tabs權限。

"permissions": ["tabs"]

6.Override Pages

Chrome不只提供了管理書籤、歷史和標籤的接口，還支持用自定義的頁面替換Chrome相應默認的頁面，這就是override pages。目前支持替換的頁面包含Chrome的書籤頁面、歷史記錄和新標籤頁面。

使用override pages很簡單，只需在Manifest中進行聲明便可（一個擴展只能替換一個頁面）：

"chrome_url_overrides" : {    
"bookmarks": "bookmarks.html"}
"chrome_url_overrides" : {"history": "history.html"}
"chrome_url_overrides" : {"newtab": "newtab.html"}

 

8. 高級API

1.下載

"permissions": ["downloads"] chrome.downloads.download(options, callback);
// options
{url: 下載文件的url,    
filename: 保存的文件名,    
conflictAction: 重名文件的處理方式,   
saveAs: 是否彈出另存爲窗口,    
method: 請求方式（POST或GET），    
headers: 自定義header數組,    
body: POST的數據 }

2.網絡請求

Chrome提供了較爲完整的方法供擴展程序分析、阻斷及更改網絡請求，同時也提供了一系列較爲全面的監聽事件以監聽整個網絡請求生命週期的各個階段。

要對網絡請求進行操做，須要在Manifest中聲明webRequest權限以及相關被操做的URL。如須要阻止網絡請求，須要聲明webRequestBlocking權限。

"permissions": [    
"webRequest",    
"webRequestBlocking",    
"*://*.google.com/"]

3.代理

代理可讓用戶經過代理服務器瀏覽網絡資源以達到匿名訪問等目的。代理的類型有多種，經常使用的包括http代理和socks代理等。有時咱們不但願全部的網絡資源都經過代理瀏覽，這種狀況下一般會使用pac腳原本告訴瀏覽器使用代理訪問的規則。

Chrome瀏覽器提供了代理設置管理接口，這樣可讓擴展來作到更加智能的代理設置。要讓擴展使用代理接口，須要聲明proxy權限：

"permissions": ["proxy"]

4.系統信息

Chrome提供了獲取系統CPU、內存和存儲設備的信息。