淺嚐 Chrome Extension

平常在瀏覽網頁的時候都會用一些好用的plugin或是extension，不僅提高工作效率，有時候也是讓自己操作更方便。那為何不會想去自己去開發一個專屬的extension給自己呢?

一直到最近開始要操作一些繁雜且無謂的動作時，這個念頭又再竄起 "是時候該做些事情了"。便開始爬文起來....(雖然看過好幾次，但腦容量太小，很快就忘了。) 基本架構很陽春，最重要得核心就是manifest.json，是用來定義整個extension的設定檔，再來就是其他你自己的js檔, html, icon等等...。

以我做的例子來說，整個目錄內包含這些檔案：

1. manifest.json：主要設定檔
2. background.html：用來跑整個背景的網頁
3. background.js：把background.html主程式拉出來
4. content_script.js：是要用來執行該tab的程式
5. on/off.png：顯示這個extension開關的icon

除了主要的manifest.json其他都是自己愛怎麼寫就怎麼寫，

下面來看一下內容：

 
{
 //定議manifest的版本, 會影響API的使用
 //如果要支援比較低的chrome版本,可以使用1
 "manifest_version": 2,
 "name": "extension的名稱外掛",
 "description": "extension說明",
 "version": "1.0",  //你extension版本, chrome會用來斷是否要update extension



 //你extension的icon及語系
 "icons": { ... },
 "default_locale": "en",


 //開啟extension後,在背景一直run的網頁
 "background" : {
  "page":"background.html"
  "scripts": ["background.js"]
 },



 //這個是讓你掛在chrome旁邊的小icon, 可以點擊跳出小框框
 "browser_action": {
  "default_title" : "滑鼠移過去會顯示的title",
  "default_icon": "on.png"
  "default_popup": "popup.html"
 },

 //要求使用的API權限
 "permissions": [
  "tabs",
  "background",
  "storage"
 ],

 //需要開啟tabs的權限
 //通常我們外掛就是需要修改tab中的DOM等功能
 //content_scripts就是負責的主程式
 "content_scripts": [
  {
   "matches" : ["http://yuhua-chen.blogspot.tw/*"], //設定相對應執行的網址
   "run_at" : "document_start", //設定執行點
   "all_frames" : true, //如果有iframe或是frameset就要開啟這個才可以操作整個頁面
   "js" : ["jquery.min.js","content_script.js","jquery-ui.js"], //要載入外部的js
   "css":["jquery-ui.css"] //要使用外部的CSS
  }
 ]
}

json很簡單明瞭定義整個架構，不過，剛開始寫的時候會有點搞不清楚content_script 跟 background 的差別。其實沒有想像中的複雜，先來搞清楚content_script：

• 不能使用chrome.* APIs 
• 無法使用extension's page中的functions及變數
• 無法使用其他content_script中的functions及變數
• 只會在指定的tab中載入程式

所以，如果需要使用到Chrome API的時候就要透過background，

然後background跟content_script之間是可以溝通的。

當初一直想要將extension的varible傳給content_script，

不斷鬼打牆後，才搞懂他們之間的關係...才明白使用的限制，

還是可以透過chrome.tabs.executeScript方式丟參數到content_script。

經過簡單的說明，很快地開發自己想要的外掛了。

不過大部分的外掛都可以滿足需求，可能實際開發不難，反而是在想做什麼比較困難吧!

參考網址：
http://gibuloto.com/blog/google-chrome-extension/

http://developer.chrome.com/extensions/