ChromeExtension那些事兒

Chrome Extension是什麼呢？

簡而言之，就是Chrome擴展，它是基於Chrome瀏覽器的，咱們能夠理解它爲一個獨立運行在Chrome瀏覽器下的APP，固然核心編程語言就是JavaScript咯，而後結合HTML以及CSS來開發。重點是，這個「APP」功能強大，能夠獨自運行，亦能夠與打開的網頁、Chrome控制面板(DevTools)、第三方插件等等進行通訊，且，Google容許ChromeExtension沒必要受限於跨域限制，結合以上種種優勢，固，咱們可使用ChromeExtension，結合自身業務，開發出許多提升工做效率的工具。

部署ChromeExtension也很簡單，以下：

好了，如今來聽聽屬於ChromeExtension它的故事。

1、概要及manifest.json

ChromeExtension是Chrome提出來的一個概念，其實正如上文所說，核心編程語言就是JavaScript，而後提供一切通訊、存儲接口，大體就差很少了。

須要注意的是，ChromeExtension都包含一個Manifest文件——manifest.json，這個文件能夠告訴Chrome關於這個擴展的相關信息，它是整個擴展的入口，也是Chrome擴展必不可少的部分。且必須包含name、version和manifest_version屬性，其餘經常使用的可選屬性還有browser_action、page_action、background、permissions、options_page、content_scripts。

因此咱們能夠保留一份manifest.json模板，當編寫新的擴展時直接填入相應的屬性值就OK了。

manifest.json模板及相關屬性解釋以下：

{
    "manifest_version": 2,
    //定義chrome擴展的名稱
    "name": "My Extension",
    //定義chrome擴展的版本
    "version": "versionString",
    "default_locale": "en",
    //定義chrome擴展的描述
    "description": "A plain text description",
    //定義了擴展相關圖標文件的位置
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    /*
      Browser Actions將擴展圖標置於Chrome瀏覽器工具欄中，地址欄的右側。若是聲明瞭popup頁面，當用戶點擊圖標時，在圖標的下側會打開這個頁面。同時圖標上面還能夠附帶badge——一個帶有顯示有限字符空間(只能顯示4字節長度信息)的區域——用以顯示一些有用的信息，如未讀郵件數等。且Badge目前只可以經過JavaScript設定顯示的內容，同時Chrome還提供了更改badge背景的方法。若是不定義badge的背景顏色，默認將使用紅色。例如，顯示了一個背景顏色爲藍色，內容爲「Dog」的badge：
      chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'});
      chrome.browserAction.setBadgeText({text: 'Dog'});
    */
    "browser_action": {
        //經過setIcon方法能夠動態更改擴展的圖標,chrome.browserAction.setIcon(details, callback)
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        //定義了當用戶鼠標懸停於擴展圖標上所顯示的文字,chrome.browserAction.setTitle({title: 'This is a new title'})
        "default_title": "Extension Title",
        /*
          定義了當用戶單擊擴展圖標時所顯示頁面的文件位置, 值得注意的是Chrome不容許將JavaScript代碼段直接內嵌入HTML文檔，因此咱們須要經過外部引入的方式引用JS文件。因爲其在關閉後，就至關於用戶關閉了相應的標籤頁，這個頁面不會繼續運行。當用戶再次打開這個頁面時，全部的DOM和js空間變量都將被從新建立，因此不要在popup頁面的js空間變量中保存數據，而是利用localStorage和chrome.storage將數據保存在用戶的硬盤上。
        */
        "default_popup": "popup.html"
    },
    /*
      Page Actions與Browser Actions很是相似，除了Page Actions沒有badge外，其餘Browser Actions全部的方法Page Actions都有。另外的區別就是，Page Actions並不像Browser Actions那樣一直顯示圖標，而是能夠在特定標籤特定狀況下顯示或隱藏，因此它還具備獨有的show和hide方法。
        chrome.pageAction.show(integer tabId);
        chrome.pageAction.hide(integer tabId);
        另，tabId爲標籤（下面會具體講解）id，能夠經過tabs接口獲取。
    */
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",
        "default_popup": "popup.html"
    },
    /*
      在Manifest中指定background域可使擴展常駐後臺。background能夠包含三種屬性，分別是scripts、page和persistent。若是指定了scripts屬性，則Chrome會在擴展啓動時自動建立一個包含全部指定腳本的頁面；若是指定了page屬性，則Chrome會將指定的HTML文件做爲後臺頁面運行。一般咱們只須要使用scripts屬性便可，除非在後臺頁面中須要構建特殊的HTML——但通常狀況下後臺頁面的HTML咱們是看不到的。persistent屬性定義了常駐後臺的方式——當其值爲true時，表示擴展將一直在後臺運行，不管其是否正在工做；當其值爲false時，表示擴展在後臺按需運行，這就是Chrome後來提出的Event Page。Event Page能夠有效減少擴展對內存的消耗，如非必要，請將persistent設置爲false。注意，persistent的默認值爲true。
    */
    "background": {
        "scripts": ["background.js"]
    },
    /*
      能夠指定將哪些腳本什麼時候注入到哪些頁面中，當用戶訪問這些頁面後，相應腳本便可自動運行，從而對頁面DOM進行操做。屬性值爲數組類型，數組的每一個元素能夠包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_globs等屬性其中matches屬性定義了哪些頁面會被注入腳本，exclude_matches則定義了哪些頁面不會被注入腳本，css和js對應要注入的樣式表和JavaScript，run_at定義了什麼時候進行注入，all_frames定義腳本是否會注入到嵌入式框架中，include_globs和exclude_globs則是全局URL匹配，最終腳本是否會被注入由matches、exclude_matches、include_globs和exclude_globs的值共同決定.

　　　 注意：content_scripts中的腳本只是共享頁面的DOM(DOM中的自定義屬性不會被共享)，而並不共享頁面內嵌JavaScript的命名空間。也就是說，若是當前頁面中的JavaScript有一個全局變量a，content_scripts中注入的腳本也能夠有一個全局變量a，二者不會相互干擾。固然你也沒法經過content_scripts訪問到頁面自己內嵌JavaScript的變量和函數。
    */
    "content_scripts": [
        {
            "matches": ["http://www.google.com/*"],
            "css": ["mystyles.css"],
            "js": ["jquery.js", "myscript.js"]
        }
    ],
    /*
      有一些擴展容許用戶進行個性化設置，這樣就須要向用戶提供一個選項頁面。Chrome經過Manifest文件的options_page屬性爲開發者提供了這樣的接口，能夠爲擴展指定一個選項頁面。當用戶在擴展圖標上點擊右鍵，選擇菜單中的「選項」後，就會打開這個頁面
    */
    "options_page": "options.html",
    /*
      瀏覽器出於安全考慮是不容許跨域, 但這個規則若是一樣限制Chrome擴展應用，就會使其能力大打折扣，因此Google容許Chrome擴展應用沒必要受限於跨域限制。但出於安全考慮，須要在Manifest的permissions屬性中聲明須要跨域的權限。
    */
    "permissions": [
        "*://www.google.com/*"
    ],
    // 爲notification服務，桌面通知功能
    "web_accessible_resources": [
        "images/*.png"
    ]
}

2、存儲

對於網站來講，用戶的設置一般保存在Cookies中，或者保存在網站服務器的數據庫中。對於JavaScript來講，一些數據能夠保存在變量中。
但，若是用戶從新啓動瀏覽器，這些數據就會消失。那麼如何在擴展中保存用戶的設置呢？咱們可使用HTML5新增的localStorage接口。
固然，Chrome爲擴展應用提供了存儲API，以便將擴展中須要保存的數據寫入本地磁盤。Chrome提供的存儲API能夠說是對localStorage的改進，它與localStorage相比有如下區別：
　　1.若是儲存區域指定爲sync，數據能夠自動同步；
　　2.content_scripts能夠直接讀取數據，而沒必要經過background頁面；
　　3.在隱身模式下仍然能夠讀出以前存儲的數據；
　　4.讀寫速度更快；
　　5.用戶數據能夠以對象的類型保存。
對於第二點須要說明一下。首先localStorage是基於域名的，而content_scripts是注入到用戶當前瀏覽頁面中的，若是content_scripts直接讀取localStorage，所讀取到的數據是用戶當前瀏覽頁面所在域中的。因此一般的解決辦法是「content_scripts」經過runtime.sendMessage和「background」通訊，由「background」讀寫擴展所在域（一般是chrome-extension://extension-id/）的localStorage，而後再傳遞給content_scripts。

使用Chrome存儲API必需要在Manifest的permissions中聲明"storage"，以後纔有權限調用。Chrome存儲API提供了2種儲存區域，分別是sync和local。兩種儲存區域的區別在於，sync儲存的區域會根據用戶當前在Chrome上登錄的Google帳戶自動同步數據，當無可用網絡鏈接可用時，sync區域對數據的讀寫和local區域對數據的讀寫行爲一致。對於每種儲存區域，Chrome又提供了5個方法，
分別是get、getBytesInUse、set、remove和clear，以下：

/*
StorageArea爲sync或則local
例, chrome.storage.sync.get(...)
*/
chrome.storage.StorageArea.get(keys, function(result){
　　console.log(result);
});
chrome.storage.StorageArea.getBytesInUse(keys, function(bytes){
　　console.log(bytes);
});
chrome.storage.StorageArea.set(items, function(){
　　//do something
});
chrome.storage.StorageArea.remove(keys, function(){
　　//do something
});
chrome.storage.StorageArea.clear(function(){
　　//do something
});

Chrome同時還爲存儲API提供了一個onChanged事件，當存儲區的數據發生改變時，這個事件會被觸發，以下：

/*
callback會接收到兩個參數，第一個爲changes，第二個是StorageArea。changes是個對象，鍵爲更改的屬性名稱，值包含兩個屬性，分別爲oldValue和newValue
*/
chrome.storage.onChanged.addListener(function(changes, areaName){
　　console.log('Value in '+areaName+' has been changed:');
　　console.log(changes);
});

3、通訊

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

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

/*
extensionId(optional)爲所發送消息的目標擴展，若是不指定這個值，則默認爲發起此消息的擴展自己；
message(required)爲要發送的內容，類型隨意，內容隨意
options(optional)
callback(optional)用於接收返回結果
*/
chrome.runtime.sendMessage(extensionId, message, options, callback)

/*
callback(required)接收到的參數有三個，分別是message、sender和sendResponse。
其中sender對象包含4個屬性，分別是tab、id、url和tlsChannelId，tab是發起消息的標籤(下節會詳講)
*/
chrome.runtime.onMessage.addListener(callback)

 例如，popup.html與backgroud能夠以下通訊：

//popup.html
chrome.runtime.sendMessage('Hello', function(response){
    document.write(response);
});

//background
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    if(message == 'Hello'){
        sendResponse('Hello from background.');
    }
});

查看popup.html頁面會發現有輸出「Hello from background.」

4、標籤

標籤的意思就是在瀏覽器中打開的一個個頁面，以下：

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

"permissions": [
    "tabs"
]

獲取標籤信息。Chrome提供了三種獲取標籤信息的方法，分別是get、getCurrent和query。get方法能夠獲取到指定id的標籤，getCurrent則獲取運行的腳本自己所在的標籤，query能夠獲取全部符合指定條件的標籤。

以getCurrent爲例，代碼以下：

chrome.tabs.getCurrent(function(tab){
    console.log(tab);
});

重點是，ChromeExtension也能夠與指定的標籤通訊(標籤中注入了"content_scripts")，方法以下：

chrome.tabs.sendMessage(tabId, message, function(response){
    console.log(response);
});

5、拓展閱讀

[1]. Chrome Extensions

[2]. Chrome擴展及應用開發