[野人獻曝] Google Chrome Extension 淺論（前言篇）

因為我太無聊了，所以才寫這篇文章（拖走）

基本上我算是個Chrome的忠實使用者（使用Chrome之前是用Firefox)，
因此針對自己的需求寫一些extension也是很正常的事情。
也因為我都研究了，所以就順便把研究心得寫出來好了。

基本上，Chrome的extension的構成元件通常是這些部份：

• 幾個尺寸的圖片：至少要有16*16和128*128以上的圖片各一張
• mainfest.json 這個extension的基本資訊
• 一個或多個html。當你需要撰寫較複雜的功能時會需要。不過由於是淺論，這裡不會特別提到這塊。

當你知道有這些內容時，
接著就可以來寫一個簡單的Chrome Extension了。

首先打開你的文字編輯器，
然後先敲下以下的code試試看吧：

{
  "name":               "連到Yahoo!奇摩",
  "description":        "不用懷疑，就只是新開一個分頁然後連到Yahoo!奇摩",
  "permissions":        [],
  "version":            "1.0",
  "icons":              {
    "128":              "128.png",
    "16":               "16.png"
  },
  "app":{
    "launch":           {
      "web_url":        "http://tw.yahoo.com/"
    }
  }
}

敲完以後，請在你放檔案的地方開一個新目錄，
嗯......名字就叫作「chrome_test」吧，
把以上的內容存成「manifest.json」到上述目錄中。
除此之外，還要再弄出16*16、128*128的圖各一張放在該目錄。

接著開啟Google瀏覽器，
選擇最右邊的那把鈑手，然後選擇「工具」-「擴充功能」，
如果沒意外，這裡除了列出你已經安裝的extensions外，
應該在右上角有個開發人員模式，
請點開它後選擇「載入未封裝擴充功能」，
接著會出現選擇目錄的視窗，請選擇剛才那個目錄吧。
然後再開啟一個新分頁，
怎樣，有看到應用程式那個區塊出現了剛才寫的玩意吧。
點下去就可以直接連到Yahoo!奇摩的首頁了。
這樣就是一個簡單的應用程式了，
雖然功能簡陋到靠北，但他可是第一步喔，
因此請大家要先記住這個json的結構。

以下是我以表格解釋每個元素所代表的意義：

元素名稱	元素說明
name	應用程式的名字，在Google應用程式商店上架時，會以這個欄位作為作為應用程式的名字
description	應用程式的說明，同樣也會出現在Google應用程式商店
permissions	應用程式所需的權限，在本例中，因為沒有需要特別的權限，所以可以給個空值就好
version	應用程式版本，請使用「1.0」這種類似的格式
icons	圖示檔的路徑，前面的16代表是什麼尺寸的圖片
app - launch	這裡是指示執行時，要怎麼做的行為，裡面的子元素web_url即代表「執行後要跳出這個網頁blah」

那麼本期的淺論就到這裡了，
希望各位同學看完以後可以多加練習（拖走）。

參考網站：
Google的說明網站