开发 Web 扩展

  • 项目

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019 | TFS 2018

使用扩展通过新的 Web 体验、仪表板小组件、生成任务等来增强 Azure DevOps。 可以使用标准技术（如 HTML、JavaScript 和 CSS）开发扩展。 本教程指导你为 Azure DevOps 创建 Web 扩展。

提示

浏览有关使用 Azure DevOps 扩展 SDK 进行扩展开发的扩展示例和最新文档。

先决条件

必须具有以下权限和安装。

  • 必须是组织所有者。 如果没有组织，可以 免费创建一个组织。
  • 安装 Node.js。
  • (TFX) 安装扩展打包工具。 从命令提示符运行 npm install -g tfx-cli ，稍后将使用该命令提示符 打包扩展 。

创建目录和清单

扩展由一组文件组成，其中包含所需的清单文件。 将其打包到 .vsix 文件中，并发布到 Visual Studio Marketplace。

  1. 创建一个目录，用于保存扩展所需的文件：

    mkdir my-first-extension

  2. 从此目录中初始化新的 npm 包清单：

    npm init -y

    此文件描述扩展所需的库。

  3. 安装 Microsoft VSS Web 扩展 SDK 包并将其保存到 npm 包清单：

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

    此 SDK 包含一个 JavaScript 库，该库提供与嵌入扩展的页面通信所需的 API。

  4. 在扩展目录的根目录中创建名为 vss-extension.json 的扩展清单文件，其中包含以下内容：

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Visual Studio Services 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"
        }
    ]
}

    注意

    属性 public 控制扩展是否对 Visual Studio Marketplace 上的每个人都可见。 在开发过程中，使扩展保持私有。

  5. 在扩展目录的根目录中创建一个名为 my-hub.html 的文件，其中包含以下内容，该文件用于视图 (也称为中心) 参与 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) {
            if (typeof SDK !== 'undefined') {
                console.log("SDK is defined. Trying to initialize...");
                SDK.init();
                SDK.ready(function() {
                    console.log("SDK is ready");
                    document.getElementById("name").innerText = SDK.getUser().name;
                });
            } else {
                console.log('SDK is not defined');
            }
        });
    </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>

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

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

后续步骤

打包并发布扩展