2011年6月13日 星期一

[野人獻曝] 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的說明網站
張貼留言