建立一個簡單的擴充套件

目錄

要開始建立擴充套件，首先需要一個包含從擴充套件原始碼到所需特定擴充套件檔案的目錄。本頁面提供瞭如何設定基於純 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://www.docker.com/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 Desktop 儀表板。

左側選單將顯示一個新選項卡，其中包含您的副檔名稱。

Minimal frontend extension

下一步是什麼？