建立簡單的擴充套件

要開始建立擴充套件，您首先需要一個包含檔案的目錄，這些檔案從擴充套件的原始碼到所需的擴充套件特定檔案不等。本頁面提供有關如何基於純 HTML 設定最小前端擴充套件的資訊。

在開始之前，請確保您已安裝最新版本的 Docker Desktop。

提示

如果您想為新擴充套件啟動一個程式碼庫，我們的 快速入門指南 和 docker extension init <my-extension> 為您的擴充套件提供了更好的基礎。

擴充套件資料夾結構

在 minimal-frontend 示例資料夾中，您可以找到一個現成的示例，它代表一個基於 HTML 的 UI 擴充套件。在本教程中，我們將詳細介紹此程式碼示例。

雖然您可以從空目錄開始，但強烈建議您從下面的模板開始，並根據需要對其進行更改以滿足您的需求。

.
├── Dockerfile # (1)
├── metadata.json # (2)
└── ui # (3)
    └── index.html

1. 包含構建擴充套件並將其在 Docker Desktop 中執行所需的一切。
2. 一個檔案，其中提供有關擴充套件的資訊，例如名稱、描述和版本。
3. 包含所有 HTML、CSS 和 JS 檔案的原始檔夾。還可能包含其他靜態資源，例如徽標和圖示。有關構建 UI 的更多資訊和指南，請參閱 設計和 UI 樣式部分。

建立 Dockerfile

在最小情況下，您的 Dockerfile 需要

• 標籤，這些標籤提供有關擴充套件、圖示和螢幕截圖的額外資訊。
• 原始碼，在本例中是位於 ui 資料夾中的 index.html。
• metadata.json 檔案。

# syntax=docker/dockerfile:1
FROM scratch

LABEL org.opencontainers.image.title="Minimal frontend" \
    org.opencontainers.image.description="A sample extension to show how easy it's to get started with Desktop Extensions." \
    org.opencontainers.image.vendor="Awesome Inc." \
    com.docker.desktop.extension.api.version="0.3.3" \
    com.docker.desktop.extension.icon="https://docker.net.tw/wp-content/uploads/2022/03/Moby-logo.png"

COPY ui ./ui
COPY metadata.json .

配置元資料檔案

映象檔案系統根目錄下需要 metadata.json 檔案。

{
  "ui": {
    "dashboard-tab": {
      "title": "Minimal frontend",
      "root": "/ui",
      "src": "index.html"
    }
  }
}

有關 metadata.json 的更多資訊，請參閱 元資料。

構建擴充套件並安裝

現在您已配置了擴充套件，您需要構建 Docker Desktop 將用於安裝它的擴充套件映象。

$ docker build --tag=awesome-inc/my-extension:latest .

這將構建一個標記為 awesome-inc/my-extension:latest 的映象，您可以執行 docker inspect awesome-inc/my-extension:latest 檢視有關它的更多詳細資訊。

最後，您可以安裝擴充套件，並在 Docker Desktop 儀表板中看到它。

$ docker extension install awesome-inc/my-extension:latest

預覽擴充套件

要在 Docker Desktop 中預覽擴充套件，請在安裝完成後關閉並重新開啟 Docker 儀表板。

左側選單會顯示一個帶有副檔名稱的新選項卡。

下一步是什麼？

• 構建更 高階前端 擴充套件。
• 瞭解如何 測試和除錯 擴充套件。
• 瞭解如何 為擴充套件設定 CI。
• 詳細瞭解擴充套件的 架構。