切换语言

创建一个简单扩展

目录

要开始创建您的扩展程序，您首先需要一个包含相关文件的目录，这些文件从扩展程序的源代码到必需的扩展程序专用文件不等。本页面提供了如何基于纯 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 样式部分。

创建 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 Dashboard。

左侧菜单显示一个以您的扩展名为名称的新选项卡。

Minimal frontend extension

接下来是什么？