本教學課程會逐步引導您建立第一個 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 的應用程式。系統不會重新啟動任何先前執行的應用程式,但會使用任何更新內容啟動新的應用程式。