建立您的第一個應用程式

本教學課程將逐步引導您建立第一個 Chrome 應用程式。Chrome 應用程式的結構相似 ，以便目前的開發人員辨識資訊清單和封裝方法。當你 然後製作程式碼和素材資源的 ZIP 檔案，就能在 應用程式。

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 可以試試：

  • 前往 chrome://flags。
  • 找到「實驗性擴充功能 API」，然後按一下其「啟用」連結。
  • 重新啟動 Chrome。

載入應用程式

如要載入應用程式，請按一下 Chrome 設定圖示，開啟應用程式和擴充功能管理頁面 選擇「工具」>「工具」擴充功能：

確認已勾選「開發人員模式」核取方塊。

按一下「載入未封裝的擴充功能」按鈕，前往應用程式的資料夾，然後按一下「確定」。

開啟新分頁並啟動

載入應用程式後，請開啟新分頁，然後按一下新的應用程式圖示。

或是透過指令列載入並啟動

以下 Chrome 指令列選項可協助您疊代：

  • --load-and-launch-app=/path/to/app/ 會從指定路徑安裝未封裝的應用程式，以及 就會啟動該圖片如果應用程式已在執行，則會使用更新後的內容重新載入應用程式。
  • --app-id=ajjhbohkjpincjgiieeomimlgnll 會啟動 Chrome 中已載入的應用程式。沒有 重新啟動任何先前執行的應用程式，但會以任何更新內容啟動新的應用程式。