Changes between Version 3 and Version 4 of jazz/Chrome_Apps


Ignore:
Timestamp:
Mar 12, 2012, 8:53:46 AM (12 years ago)
Author:
jazz
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • jazz/Chrome_Apps

    v3 v4  
    2121
    2222 * DEBUG: 在 Firefox 常用 Firebug 進行除錯,在 Google Chrome 上的話,就可以用[http://code.google.com/intl/zh-TW/chrome/devtools/docs/overview.html Google Chrome Developer Tools],最好學一下它的使用方法。
     23
     24== 2012-03-11 ==
     25
     26 * [參考] [http://www.vikitech.com/2398/create-chrome-web-apps How To Create Your Own Chrome Web Apps]
     27 * [小目標] 嘗試做一個 hadoop.nchc.org.tw 的 Chrome App,根據定位應該比較偏向「[http://code.google.com/chrome/apps/docs/developers_guide.html 線上網頁應用程式(Hosted App)]」。
     28 * 首先,準備一個 128x128 的圖檔 128.png 當 logo
     29 * [[Image(jazz/12-03-11:128.png)]]
     30 * 接著,產生一個 manifest.json
     31{{{
     32~$ mkdir hadoop.tw
     33~$ cd hadoop.tw
     34~/hadoop.tw$ cat >> manifest.json << EOF
     35{
     36  "name": "Hadoop 實驗叢集",
     37  "description": "提供使用者一個連上 hadoop.nchc.org.tw 的 Chrome Hosted App",
     38  "version": "0.0.1",
     39  "icons": { "128": "128.png" },
     40  "app": {
     41    "urls": [
     42      "https://hadoop.nchc.org.tw/"
     43    ],
     44    "launch": {
     45      "web_url": "https://hadoop.nchc.org.tw/",
     46      "container": "tab"
     47    }
     48  }
     49}
     50EOF
     51}}}
     52 * 開啟 Chrome 瀏覽器的「工具」->「擴充功能」,勾選「開發人員模式」,選擇剛剛建立的 hadoop.tw 目錄,就會看到類似底下的結果:
     53 * [[Image(jazz/12-03-11:hadoop_chrome_app.png)]]
     54 * 開啟一個新的分頁,就能看到剛新增的「擴充功能」:
     55 * [[Image(jazz/12-03-11:new-tab.png)]]
     56 * 在 chrome://settings/extensions 分頁,點選「封裝擴充功能」,就可以得到 hadoop.tw.crx (供別人下載或上傳 Chrome Web Store)以及 hadoop.tw.pem 金鑰。
     57 * [[Image(jazz/12-03-11:chrome_crx.png)]]