创建一个简单的扩展

要开始创建扩展，首先需要一个包含从扩展源代码到所需特定扩展文件的目录。本页面提供了如何设置基于纯 HTML 的最小前端扩展的信息。

在开始之前，请确保已安装最新版本的 Docker Desktop。

提示
如果您想为新扩展启动一个代码库，我们的快速入门指南和 docker extension init <my-extension> 为您的扩展提供了更好的基础。

扩展文件夹结构

在 minimal-frontend 示例文件夹中，您可以找到一个现成的示例，它代表一个基于 HTML 构建的 UI 扩展。我们将在本教程中介绍这个代码示例。

尽管您可以从一个空目录开始，但强烈建议您从以下模板开始，并根据需要进行更改。

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

包含构建扩展并在 Docker Desktop 中运行所需的一切。
一个提供扩展信息（如名称、描述和版本）的文件。
包含所有 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 仪表板。

左侧菜单将显示一个新选项卡，其中包含您的扩展名称。

下一步是什么？

构建一个更高级的前端扩展。
了解如何测试和调试您的扩展。
了解如何为您的扩展设置 CI。
了解有关扩展架构的更多信息。