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的說明網站

2011年6月12日 星期日

[野人獻曝] 淺談oEmbed機制

你或許會很好奇,
為啥我在plurk上貼一個youtube連結後,
plurk會把他轉換成其他人只要一點開就能播放且有縮圖的連結;
或者是你貼了一個flickr連結後,
plurk會幫你轉換成那張圖片,並且設定好連結。 

這些(大概)都是透過oEmbed這個機制所弄出來的。
(因為我又沒問plurk的人是怎麼弄的w) 

那什麼是oEmbed呢,
詳情請翻翻看維基百科上的說明。
如果不想看的話,
這裡就簡單一點說:「oEmbed是個開放格式,可以讓你知道想要的東西資源在哪裡該如何使用blahblah」。
至於詳細內容在上面所提及的oEmbed官網大概就提的差不多了,
所以請務必看看(不然我也沒打算再說更多了)。 

所以說該怎麼實作勒?

就以實作Youtube的以oEmbed取資源為例,
首先你必須要知道Youtube的oEmbed資源在那個Uri,
基本上你可以在Youtube這篇部落格文章找到,
不過我可以先貼出來參考:http://www.youtube.com/oembed?url={youtube影片網址}&format=json 
當你組出這段網址後,
你可以用你上手的語言去作一個http get的動作,
如果順利的話,
你的程式應該會收到一段json,
至少會有type、version、title等元素,
請參照oEmbed官網中所提及的response type, 
去取用你所需要的項目,
就算是大功告成了。

行文至此應該會有人要問:「那我怎麼知道哪些網站有支援這個機制?」
基本上幾個比較大手的網站都已經實做這種格式了,
你可以在oEmbed的官網首頁的最後部份看到那些網站的清單。

當然oEmbed還有一個Discovery機制,
也可以讓你知道這個網站是否支援,
只是因為本期稿擠(實際上是天氣好熱不想多打字),
所以改天有機會再來開新文說明好了。