通过

开发 Web 扩展

Azure DevOps Services |Azure DevOps Server |Azure DevOps Server 2022

使用扩展插件通过新的网页体验、仪表板工具、构建任务等扩展 Azure DevOps 功能。 本教程介绍如何创建和打包简单的 Web 扩展。

小窍门

如需完整参考，请参阅 azure-devops-extension-sample 代码库。

先决条件

类别 要求
权限 组织所有者或项目集合管理员组的成员。
工具 - Node.js （建议使用 LTS 版本）
- 扩展打包工具：运行 npm install -g tfx-cli 以安装 TFX CLI。

创建目录和清单

扩展是一组文件，其中包括一个必需的清单文件。 将扩展名打包到 .vsix 文件中，并将其发布到 Visual Studio Marketplace。

  1. 为扩展创建目录：

    mkdir my-first-extension && cd my-first-extension

  2. 初始化 npm 包清单：

    npm init -y

  3. 安装 Azure DevOps 扩展 SDK：

    npm install azure-devops-extension-sdk --save

    此 SDK 提供用于与 Azure DevOps 主机帧通信的 API。

  4. 使用以下内容在扩展目录的根目录中创建一个名为 vss-extension.json 的扩展清单文件：

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Azure DevOps extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    重要

    将 publisher 字段设置为 市场发布者 ID。 该 public 属性控制扩展是否对 Visual Studio Marketplace 上的每个人可见。 在开发期间确保扩展保持私密。

  5. 使用以下内容在扩展目录的根目录中创建一个名为 my-hub.html 的文件。 此 HTML 页面是集成到 Azure DevOps Web 体验中的视图和中心。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            SDK.init();
            SDK.ready().then(function () {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

    注释

    此示例使用 RequireJS 加载 SDK，无需生成步骤即可运行。 对于生产扩展，请将捆绑程序（如 Webpack ）与 ES 模块导入（import * as SDK from "azure-devops-extension-sdk"）配合使用，以提高性能。 请参阅使用 Webpack 设置的扩展示例。

  6. 扩展目录应如以下示例所示。

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    需要帮助？ 将问题发布到 Azure DevOps Services 开发人员社区。

后续步骤

打包并发布扩展

相关内容

  • Last updated on