步驟 1：建立並執行 Chrome 應用程式

在這個步驟中，您將瞭解以下內容：

  • Chrome 應用程式的基本構成要素，包括資訊清單檔案和背景指令碼。
  • 如何安裝、執行 Chrome 應用程式並進行偵錯。

完成這個步驟的預估時間：10 分鐘。
如要預覽您將在這個步驟中完成的內容，請向下捲動到本頁底部 ↓。

熟悉 Chrome 應用程式

Chrome 應用程式包含下列元件：

  • 資訊清單可指定應用程式的中繼資訊。資訊清單會讓 Chrome 瞭解 以及如何啟動該應用程式，以及應用程式所需的任何額外權限。
  • 「事件頁面」又稱為「背景指令碼」，負責管理應用程式生命週期 您可以在背景指令碼中註冊特定應用程式事件 (例如 啟動及關閉應用程式視窗。
  • 所有程式碼檔案都必須封裝在 Chrome 應用程式中。包括 HTML、CSS、JS 和原生 用戶端模組。
  • 素材資源 (包括應用程式圖示) 應一併封裝在 Chrome 應用程式中。

建立資訊清單

開啟您常用的程式碼/文字編輯器，建立名為 manifest.json 的檔案：

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

請注意此資訊清單如何說明名為 background.js 的背景指令碼。您將建立 。

"background": {
  "scripts": ["background.js"]
}

稍後，我們會在此步驟中提供應用程式圖示：

"icons": {
  "128": "icon_128.png"
},

建立背景指令碼

建立以下檔案，並將其儲存為 background.js：

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

這個背景指令碼只會等待應用程式的 chrome.app.runtime.onLaunched 啟動事件 應用程式，並執行回呼函式：

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Chrome 應用程式啟動後，chrome.app.window.create() 會使用 基本 HTML 網頁 (index.html) 做為來源。您將在下一個步驟建立 HTML 檢視。

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

背景指令碼可能包含其他事件監聽器、視窗、貼文訊息和啟動資料。 活動頁面可用來管理應用程式。

建立 HTML 檢視

建立簡易網頁來顯示「Hello World」將訊息另存為 index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

就像任何其他網頁一樣，在這個 HTML 檔案中，您可以加入額外的封裝 JavaScript。 CSS 或素材資源

新增應用程式圖示

按一下滑鼠右鍵，並將這張 128x128 的圖片儲存為專案資料夾 _icon128.png：

本程式碼研究室的 Chrome 應用程式圖示

您將使用此 PNG 做為應用程式的圖示，供使用者在啟動選單中查看。

確認你已建立所有檔案

您的專案資料夾現在應該會顯示以下 4 個檔案：

資料夾螢幕截圖

在開發人員模式中安裝 Chrome 應用程式

使用開發人員模式快速載入及啟動應用程式，不必像完成身分驗證程序 發行套件

  1. 透過 Chrome 網址列存取 chrome://extensions。
  2. 勾選「開發人員模式」核取方塊。

啟用開發人員模式

  1. 按一下「載入未封裝的擴充功能」。
  2. 使用檔案選擇器對話方塊，瀏覽至應用程式的專案資料夾，然後選取該資料夾即可載入 應用程式。

載入未封裝的擴充功能

啟動已完成的 Hello World 應用程式

將專案載入為未封裝的擴充功能後，按一下已安裝應用程式旁邊的「Launch」。A 罩杯 獨立視窗應該會開啟：

完成步驟 1 後建立的 Hello World 應用程式

恭喜！您剛建立了新的 Chrome 應用程式！

使用 Chrome 開發人員工具對 Chrome 應用程式進行偵錯

你可以使用 Chrome 開發人員工具檢查、偵錯、稽核及測試應用程式，就像這樣 您在一般網頁上執行的作業

變更程式碼並重新載入應用程式 (按一下滑鼠右鍵，然後重新載入應用程式)，查看 開發人員工具控制台是否有任何錯誤 (按一下滑鼠右鍵 >「檢查元素」)。

「Inspect Element」對話方塊

(我們將會在步驟 3 介紹「檢查背景」選項，並設定鬧鐘)。

開發人員工具 JavaScript 控制台可存取應用程式可用的 API。您可以輕鬆 ，再將 API 呼叫加入程式碼：

開發人員工具控制台記錄

瞭解詳情

如要進一步瞭解這個步驟中導入的部分 API，請參閱：

準備好進行下一個步驟了嗎？前往步驟 2 - 匯入現有的網頁應用程式 »