如何在Azure DevOps构建结果页添加带HTML内容的自定义标签页

算力阿峰

2026-8-12

在Azure DevOps构建结果页面添加自定义标签页的扩展点说明

要在Azure DevOps构建结果页面的Summary标签旁添加自定义标签页，核心依赖官方提供的扩展点及配套开发流程，具体说明如下：

核心扩展点

ms.vss-build-web.build-results-tab：这是官方指定的用于扩展构建结果页面标签的贡献点，需要在扩展配置文件中声明该贡献。

关键配置示例

在扩展的vss-extension.json配置文件中，需添加类似如下的贡献声明：

{
  "contributions": [
    {
      "id": "custom-build-result-tab",
      "type": "ms.vss-build-web.build-results-tab",
      "targets": [
        "ms.vss-build-web.build-results-tabs"
      ],
      "properties": {
        "name": "自定义标签",
        "uri": "./tab-content.html",
        "order": 100
      }
    }
  ]
}

name：自定义标签显示的标题文本
uri：标签页加载的内容页面路径，支持静态HTML或框架构建的页面
order：标签的排序优先级，数值越大，标签在页面上的位置越靠后

开发实现要点

使用最新版azure-devops-extension-sdk npm包替代旧示例中的依赖，确保兼容性
在标签内容页面中，通过SDK获取构建上下文信息，用于加载自定义业务数据：

import * as SDK from "azure-devops-extension-sdk";

async function initTab() {
    await SDK.init();
    const buildContext = SDK.getConfiguration().settings;
    const buildId = buildContext.buildId;
    // 根据buildId拉取并渲染自定义内容
}
initTab();