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

在這個步驟中，您將瞭解：

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

預計完成這個步驟的時間：10 分鐘。
如要預覽這個步驟中要完成的內容，請向下跳到本頁底部 ↓。

認識 Chrome 應用程式

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

  • 資訊清單會指定應用程式的中繼資料。資訊清單會告知 Chrome 您的應用程式、如何啟動應用程式，以及它需要的額外權限。
  • 事件頁面 (又稱為「背景指令碼」) 負責管理應用程式生命週期。背景指令碼可讓您註冊特定應用程式事件的事件監聽器，例如啟動和關閉應用程式視窗。
  • 所有程式碼檔案都必須封裝在 Chrome 應用程式中，包括 HTML、CSS、JS 和 Native Client 模組。
  • 素材資源 (包括應用程式圖示) 必須一併封裝在 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」(啟動)。新的獨立視窗應該會開啟：

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

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

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

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

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

「檢查元素」對話方塊

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

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

開發人員工具控制台記錄

瞭解詳情

如要進一步瞭解這個步驟介紹的某些 API，請參閱：

準備好繼續進行下一步了嗎？請參閱步驟 2 - 匯入現有的網頁應用程式 »