Chrome extension開發筆記

這篇文章是紀錄Chrome extension開發過程中要注意的點，和一些備忘。官網有hello world tutorial，也有提供非常多的範例，從簡單到複雜的都有，基本上從那邊去找應該就足夠了。

Chrome extension使用HTML + Javascript + CSS，對於網頁開發人員來說，幾乎不會有轉換的問題，只需要瞭解架構和runtime environment，一下子就可以上手。extension完全支援HTML5 API，chrome自己也提供一系列的API(chrome.*)可供使用，也支援NPAPI plugins，NPAPI plugins是什麼呢？舉簡單的例子，例如常見的Adobe flash player或PDF reader，安裝後可以在網頁瀏覽器觀看flash影片或開啟PDF檔案，基本上背後是依靠一個安裝在本地端的應用程式來執行，只是內嵌到瀏覽器裡頭。所以雖然只是extension，其實可以做的事情非常多，甚至拿來開發簡單的application也是OK的。

Architecture

先來看看Chrome extension的架構，分成幾個部份：

1. background page
   所有的視窗(window)和tab都會存取相同的background page。換句話說，background page只會有一個給大家存取。background page又分為兩種，分別是persistent page和event page，差別在於event page會在extension閒置時釋放掉，以節省資源，persistent page則相反。background page可以是html或js檔案。
2. popup page
   popup page可以來自page action或browser action，如下圖所示。按下icon彈跳出來的視窗就是popup page。browser action和page action同時只能存在一個，無法兩者同時存在。popup page並非必要的，要注意的是，如果有設定popup page，那icon的onClick事件會失效，換句話說，如果有popup page，原本在onClick要處理的事情就要寫在popup page裡面。
   
   
3. content script
   Chrome允許extension跟web page互動，作法就是將程式碼inject(注入)到web page，但是有一些限制。
   • 只能使用少量被允許的chrome.* API
   • 不能存取其他page內定義的script變數和function
   • 不能存取web page內的script變數和function
   對於DOM操作的限制道是沒遇到也沒看到官網上有提到，倒是有說要自行注意安全性的問題，例如不要用eval這類危險的function，或是cross-site scripting的問題。
4. options page
   就是設定extension"選項"的頁面。

Project and file path

chrome extension的project目錄結構很簡單，如下圖所示，根目錄下一定要有manifest.json的檔案，其格式可參考說明。其他的就依喜好擺放，路徑則使用相對路徑，例如在popup.html裏面要載入一張圖片，就使用<img src="images/abc.png" />。

Message Passing

每個部份彼此之間都無法直接溝通，例如在popup page直接呼叫background page裡的function是不允許的，必須透過message passing的機制來達到互動的效果。message passing說簡單點就是在任一邊建立一個監聽器，其他人可以透過chrome.extension.sendMessage或chrome.tabs.sendMessage傳送訊息，而監聽器裏面必須自行過濾送來的訊息以進行相對應的動作。舉例來說，如果在background page和popup page裏面各設立一個監聽器，然後在content script裏面發送了一則message，background page和popup page的監聽器都會收到這則message，至於誰該處理這則訊息，則由開發者自行定義和篩選。message passing傳送的訊息使用JSON格式傳送。

Storage

Chrome extension和web page是視為不同的domain，所以運用一些如WebStorage, cookie等必須要注意這一點。舉個例子，如果想要在web page執行content script以擷取一些資訊，如果使用WebStorage做儲存，會發現在extension的popup page或background page是抓不到資料的，因為與web page的domain不同的原因。但是並非就這樣不能用WebStorage了，可以改用chrome.storage API，基本上這就是chrome整合WebStorage API，讓extension可以存許相同的storage。chrome.storage API提供兩種模式，一個是local，另一個是sync，這兩種使用的方法一樣，而sync提供同步的功能，所謂的同步就是可在不同的電腦上相互同步。所以如果要讓extension的使用者設定值可以在不同電腦之間同步的話，使用chrome.storage.sync就對了。

webRequest

chrome.webRequest API 算是一個比較進階的應用，說明白一點就是可以讓extension對web page產生的request做處理，包括XMLHttpRequest。其用法就是設立監聽器，定義規則(rule)和callback function，當符合規則就會執行callback function。至於是在何時套用設定的規則，可以參考下方的request life cycle圖。

From http://developer.chrome.com/stable/static/images/webrequestapi.png

監聽器有3個參數，分別是callback, rule, opt_extraInfoSpec，關於opt_extraInfoSpec有兩處說明文件中沒有清楚的寫出。第一點，說明文件上說opt_extraInfoSpec是一個array型態的物件，但沒有明確寫出有哪些選項，我只找到兩個，分別是blocking和requestBody。

• blocking
  當request符合設定的規則時，request會被block直到callback function處理完並回傳值(BlockResponse)。
• requestBody
  如果監聽onBeforeRequest時，需要取得request body的內容時，就需要加入這個參數。

第二點，如果使用blocking，manifect的permissions必須加入webRequestBlocking。以後會有declarativeWebRequest代替掉這個webRequest，但目前還在development狀態，據說明文件其效能較webRequest好。