如何開始寫 Chrome App

Google I/O 2010 的 Day 1 Keynote 中介紹了 Chrome Web Store,顯然這就是(不久的)未來在 Chrome/Chromium/(Chrome OS) 的應用程式平台及 marketplace。

而在這樣的平台之下,使用者便可以在 Chrome (泛指 Google Chrome, Chromium, 以及 Chrome OS)上面安裝「應用程式」,當然,這個應用程式的運作平台就是 Chrome 這個瀏覽器,於是你也可以猜想得到--應用程式是以 HTML/CSS/JavaScript 所開發的,而隨著 Google 一直宣傳著 HTML5 Rocks ,對於有志於開發「Chrome App」的人來說,當然是選擇 HTML5 再加上 CSS3 作為開發技術囉。(平衡報導一下:只要是目前能在 Chrome 上使用的網頁技術都可以啦,如 Flash、Native Client 都可以,不然怎麼會有植物大戰殭屍、樂高星際大戰呢 :P)


Chrome 裝了 Chrome Apps 的開始畫面

在目前的 Chrome dev channel 版本或是 Chromium nightly build 都已經開始支援 Chrome App 這個功能,不過還沒有預設開啟,不過可以透過在啟動 Chrome 之前傳入 --enable-apps 的參數來開啟 Chrome App 的支援,以 Mac 版為例,簡單的方法可以在終端機下以這樣的指令來啟動:

open '/Applications/Google Chrome.app' --args --enable-apps

在 Windows 上則可以去修改桌面捷徑的內容。

要開發 Chrome App 可以參考這個官方文件,但由於目前還算是早期測試,所以文件規格會突然變動,當你哪一天發現自己寫的 Chrome App 不會動的時候,可以來這裡看看,或是到討論區看看有沒有新消息。

至於 Chrome App 的結構,與 Chrome Extensions 的結構幾乎一模一樣(參考:開發文件)--用一個資料夾將一個 app 裝起來,而裡面至少有一個 manifest.json 檔案,用來描述 app。Chrome 官方以 Google Maps App 為例,示範了如何將一個原本就是 web application 的網站包裝成一個 Chrome App。

而當你將 Chrome App 寫好了之後,可以就像開發 Chrome extension 那樣,在 chrome://extensions 這一頁,打開「開發人員模式」,再「載入未封裝擴充功能」將這個 app 載入即可。


安裝 chrome app 的方式與 chrome ext 一模一樣

而 Maps App 安裝好就會像是這樣:

如果你想將原本的 webapp 包裝成 chrome app 是非常簡單的事,但若是你要開發一個單獨執行(standalone)的 webapp(非網站),那也可以將 manifest.json 中的 app 部份修改像是這樣:

...
"app": {
"launch": {
"local_path": "main.html"
}
}
...

local_path 來指定 app 啟動的 html 檔案,作為 app 的進入點。這裡有一個從 Chromium 討論區上網友分享的作品--Ajax Animator(需先開啟 chrome app 功能再下載安裝),還蠻有模有樣的(以 ExtJS 所開發的一個 app),也許你可以由這個 app 來發現究竟可以在 chrome 這樣一個應用程式平台玩出什麼樣的可能性。

如果你覺得學習 HTML5, CSS3 (可能為了得支援過時的瀏覽器等等的原因)無法應用在現有的網站產品上,那麼,相信在 Chrome 這個「平台」上,會有很多發揮的空間。

  • devon22

    請問,我在Mac上執行 open ‘/Applications/Google Chrome.app’ –args –enable-apps
    不過卻跳出 unrecognized option `–args’
    這是哪裡有問題呢?

  • @devon22,

    這個錯誤訊息看起來是 open 這個指令吐出來的,
    您要不要利用 open –help 看一下它下參數的方式呢?
    我在我的 Mac 上這樣的指令是可以 work 的。

  • 是兩個’-‘才對喔

    “–“