本教學課程會逐步引導您建立第一個 Chrome 應用程式。Chrome 應用程式的結構與擴充功能類似，因此目前的開發人員會識別資訊清單和封裝方法。完成後，您只需要產生程式碼和資產的 ZIP 檔案，即可publish應用程式。
Chrome 應用程式包含下列元件：
- 資訊清單會向 Chrome 告知您的應用程式、內容、啟動方式，以及應用程式需要的額外權限。
- 背景指令碼可用來建立負責管理應用程式生命週期的事件頁面。
- 所有程式碼都必須包含在 Chrome 應用程式套件中。這包括 HTML、JS、CSS 和 Native Client 模組。
- 所有圖示和其他素材資源都必須包含在檔案包中。
步驟 1：建立資訊清單
首先建立 manifest.json 檔案 (格式：資訊清單檔案會詳細說明這個資訊清單)：
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
步驟 2：建立背景指令碼
接著建立名為 background.js 的新檔案，其中含有以下內容：
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
在上述程式碼範例中，系統會在使用者啟動應用程式時觸發 onLaunched 事件。接著，應用程式就會立即開啟指定寬度和高度的應用程式視窗。背景指令碼可能包含其他事件監聽器、視窗、貼文和啟動資料，這些項目都由事件頁面用於管理應用程式。
步驟 3：建立視窗頁面
建立 window.html 檔案：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
步驟 4：建立圖示
將下列圖示複製到應用程式資料夾：
步驟 5：啟動應用程式
啟用旗標
許多 Chrome 應用程式 API 仍在實驗階段，因此建議您啟用實驗性 API 來試用這些 API：
- 前往 chrome://flags。
- 找出「Experimental Extension API」，然後按一下其 [啟用] 連結。
- 重新啟動 Chrome。
載入應用程式
如要載入應用程式，請按一下 Chrome 設定圖示，然後選擇「Tools」(工具) >「Extensions」(擴充功能)，開啟應用程式和擴充功能管理頁面。
確認已勾選「開發人員模式」核取方塊。
按一下「載入未封裝的擴充功能」按鈕，前往應用程式資料夾，然後按一下「確定」。
開啟新分頁並啟動
載入應用程式後，開啟「新分頁」頁面，然後按一下新的應用程式圖示。
或者透過指令列載入及啟動
以下 Chrome 指令列選項可協助您進行疊代作業：
--load-and-launch-app=/path/to/app/會從指定路徑安裝並啟動未封裝的應用程式。如果應用程式已在執行，系統會以更新後的內容重新載入應用程式。--app-id=ajjhbohkjpincjgiieeomimlgnll會啟動已載入 Chrome 的應用程式。系統不會重新啟動任何先前執行的應用程式，但會使用任何更新內容啟動新的應用程式。