创建高级前端扩展

要开始创建扩展，您首先需要一个目录，其中包含从扩展的源代码到所需的扩展特定文件的文件。此页面提供有关如何使用更高级的前端设置扩展的信息。

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

扩展文件夹结构

创建新扩展的最快方法是docker extension init my-extension按照快速入门中的方式运行。这将创建一个my-extension包含功能齐全的扩展的新目录。

提示
生成docker extension init一个基于 React 的扩展。但您仍然可以使用它作为您自己的扩展的起点，并使用任何其他前端框架，如 Vue、Angular、Svelte 等，甚至继续使用普通 Javascript。

尽管您可以从空目录或react-extension 示例文件夹开始，但强烈建议您从命令开始docker extension init并更改它以满足您的需要。

.
├── Dockerfile # (1)
├── ui # (2)
│   ├── public # (3)
│   │   └── index.html
│   ├── src # (4)
│   │   ├── App.tsx
│   │   ├── index.tsx
│   ├── package.json
│   └── package-lock.lock
│   ├── tsconfig.json
├── docker.svg # (5)
└── metadata.json # (6)

包含构建扩展并在 Docker Desktop 中运行它所需的一切。
包含前端应用程序源代码的高级文件夹。
未编译或动态生成的资源存储在此处。这些可以是静态资源，例如徽标或 robots.txt 文件。
src 或源文件夹包含所有 React 组件、外部 CSS 文件以及引入组件文件的动态资源。
Docker 桌面仪表板左侧菜单中显示的图标。
提供有关扩展的信息（例如名称、描述和版本）的文件。

调整 Dockerfile

笔记
当使用时docker extension init，它会创建一个Dockerfile已经包含 React 扩展所需内容的。

创建扩展程序后，您需要配置Dockerfile以构建扩展程序并配置用于填充市场中扩展程序卡的标签。以下是DockerfileReact 扩展的示例：

# syntax=docker/dockerfile:1
FROM --platform=$BUILDPLATFORM node:18.9-alpine3.15 AS client-builder
WORKDIR /ui
# cache packages in layer
COPY ui/package.json /ui/package.json
COPY ui/package-lock.json /ui/package-lock.json
RUN --mount=type=cache,target=/usr/src/app/.npm \
    npm set cache /usr/src/app/.npm && \
    npm ci
# install
COPY ui /ui
RUN npm run build

FROM alpine
LABEL org.opencontainers.image.title="My extension" \
    org.opencontainers.image.description="Your Desktop Extension Description" \
    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" \
    com.docker.extension.screenshots="" \
    com.docker.extension.detailed-description="" \
    com.docker.extension.publisher-url="" \
    com.docker.extension.additional-urls="" \
    com.docker.extension.changelog=""

COPY metadata.json .
COPY docker.svg .
COPY --from=client-builder /ui/build ui

笔记
在示例 Dockerfile 中，您可以看到图像标签com.docker.desktop.extension.icon设置为图标 URL。扩展市场会在不安装扩展的情况下显示此图标。 Dockerfile 还包括COPY docker.svg .在图像中复制图标文件。安装扩展后，第二个图标文件用于在仪表板中显示扩展 UI。

重要的
我们还没有适用于 Vue 的可用 Dockerfile。填写表格并告知我们您是否需要 Vue 的 Dockerfile。

重要的
我们还没有适用于 Angular 的可用 Dockerfile。填写表格并告知我们您是否需要 Angular 的 Dockerfile。

重要的
我们还没有适用于 Svelte 的可用 Dockerfile。填写表格并告知我们您是否需要 Svelte 的 Dockerfile。

配置元数据文件

为了在 Docker Desktop 中为您的扩展添加选项卡，您必须在metadata.json 扩展目录的根文件中配置它。

{
  "icon": "docker.svg",
  "ui": {
    "dashboard-tab": {
      "title": "UI Extension",
      "root": "/ui",
      "src": "index.html"
    }
  }
}

该title属性是显示在 Docker 桌面仪表板左侧菜单中的扩展的名称。该root属性是扩展容器文件系统中前端应用程序的路径，系统使用该路径将其部署在主机上。该src属性是文件夹内前端应用程序的 HTML 入口点的路径root。

有关该ui部分的更多信息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 桌面仪表板中。

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

使用扩展 API 客户端

要使用扩展 API 并通过 Docker Desktop 执行操作，扩展必须首先导入 @docker/extension-api-client库。要安装它，请运行以下命令：

npm install @docker/extension-api-client

然后调用该createDockerDesktopClient函数创建客户端对象来调用扩展API。

import { createDockerDesktopClient } from '@docker/extension-api-client';

const ddClient = createDockerDesktopClient();

使用 Typescript 时，您还可以安装@docker/extension-api-client-types为开发依赖项。这将为您提供扩展 API 的类型定义以及 IDE 中的自动完成功能。

npm install @docker/extension-api-client-types --save-dev

例如，您可以使用该docker.cli.exec函数通过命令获取所有容器的列表docker ps --all ，并将结果显示在表格中。

将文件替换ui/src/App.tsx为以下代码：


// ui/src/App.tsx
import React, { useEffect } from 'react';
import {
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
} from "@mui/material";
import { createDockerDesktopClient } from "@docker/extension-api-client";

//obtain docker destkop extension client
const ddClient = createDockerDesktopClient();

export function App() {
  const [containers, setContainers] = React.useState<any[]>([]);

  useEffect(() => {
    // List all containers
    ddClient.docker.cli.exec('ps', ['--all', '--format', '"{{json .}}"']).then((result) => {
      // result.parseJsonLines() parses the output of the command into an array of objects
      setContainers(result.parseJsonLines());
    });
  }, []);

  return (
    <Stack>
      <Typography data-testid="heading" variant="h3" role="title">
        Container list
      </Typography>
      <Typography
      data-testid="subheading"
      variant="body1"
      color="text.secondary"
      sx={{ mt: 2 }}
    >
      Simple list of containers using Docker Extensions SDK.
      </Typography>
      <TableContainer sx={{mt:2}}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Container id</TableCell>
              <TableCell>Image</TableCell>
              <TableCell>Command</TableCell>
              <TableCell>Created</TableCell>
              <TableCell>Status</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {containers.map((container) => (
              <TableRow
                key={container.ID}
                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
              >
                <TableCell>{container.ID}</TableCell>
                <TableCell>{container.Image}</TableCell>
                <TableCell>{container.Command}</TableCell>
                <TableCell>{container.CreatedAt}</TableCell>
                <TableCell>{container.Status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Stack>
  );
}

重要的
我们还没有 Vue 的示例。填写表格并告知我们您是否需要 Vue 示例。

重要的
我们还没有 Angular 的示例。填写表格并告知我们您是否需要 Angular 示例。

重要的
我们还没有 Svelte 的示例。如果您想要 Svelte 样品，请填写表格并告诉我们。

针对前端代码强制执行的策略

扩展 UI 代码在单独的 Electron 会话中呈现，没有初始化 Node.js 环境，也没有直接访问 Electron API。

这是为了限制对整个 Docker 仪表板可能出现的意外副作用。

扩展 UI 代码无法执行特权任务，例如对系统进行更改或生成子进程，除非使用扩展框架提供的 SDK API。扩展 UI 代码还可以仅通过扩展 SDK API 执行与 Docker Desktop 的交互，例如导航到仪表板中的各个位置。

扩展 UI 部分彼此隔离，并且扩展 UI 代码在每个扩展自己的会话中运行。扩展程序无法访问其他扩展程序的会话数据。

localStorage是浏览器网络存储的机制之一。它允许用户将数据作为键值对保存在浏览器中以供以后使用。localStorage当浏览器（扩展窗格）关闭时不会清除数据。这使得它非常适合在从扩展导航到 Docker Desktop 的其他部分时持久保存数据。

如果您的扩展程序用于localStorage存储数据，则 Docker Desktop 中运行的其他扩展程序无法访问您的扩展程序的本地存储。即使 Docker Desktop 停止或重新启动后，扩展的本地存储也会保留。升级扩展时，其本地存储将被保留，而卸载扩展时，其本地存储将被完全删除。

重新构建扩展并更新它

由于您修改了扩展的代码，因此必须重新构建扩展。

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

构建后，您需要更新它。

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

现在，您可以在 Docker 桌面仪表板的容器选项卡中看到正在运行的后端服务，并在需要调试时查看日志。

提示
您可以打开热重载，以避免每次进行更改时都需要重建扩展。

下一步是什么？

向您的扩展添加后端。
了解如何测试和调试您的扩展。
了解如何为您的扩展设置 CI。
了解有关扩展架构的更多信息。
有关构建 UI 的更多信息和指南，请参阅设计和 UI 样式部分。
如果您想为扩展程序设置用户身份验证，请参阅身份验证。