如何在Azure DevOps的拉取请求中添加新标签页

针对GitHub平台（公有/私有仓库） #

GitHub原生没有提供直接添加PR自定义标签页的功能，但可以通过两种方式实现类似需求：

• 浏览器扩展/前端脚本注入
  你可以写一个简单的浏览器用户脚本（比如用Tampermonkey），通过DOM操作给PR页面的标签栏添加新标签，点击后加载自定义内容。举个简单的实现示例：

  // 找到PR标签栏元素
  const tabBar = document.querySelector('.js-pull-request-tabs');
  if (!tabBar) return;
  
  // 创建新标签
  const customTab = document.createElement('a');
  customTab.className = 'tabnav-tab';
  customTab.textContent = '自定义标签';
  customTab.href = '#custom-pr-tab';
  tabBar.appendChild(customTab);
  
  // 创建对应内容区域
  const contentContainer = document.querySelector('.js-pull-request-details');
  const customContent = document.createElement('div');
  customContent.id = 'custom-pr-tab';
  customContent.style.display = 'none';
  customContent.innerHTML = `
    <h3>自定义内容区</h3>
    <p>这里可以展示PR相关的自定义数据，比如测试报告、代码覆盖率统计等</p>
  `;
  contentContainer.appendChild(customContent);
  
  // 标签切换逻辑
  customTab.addEventListener('click', (e) => {
    e.preventDefault();
    // 切换标签选中状态
    document.querySelectorAll('.tabnav-tab').forEach(tab => tab.classList.remove('selected'));
    customTab.classList.add('selected');
    // 切换内容显示
    document.querySelectorAll('.js-pull-request-details > div').forEach(div => div.style.display = 'none');
    customContent.style.display = 'block';
  });
  

  这种方案只在你自己的浏览器生效，如果要团队成员都能看到，可以开发一个GitHub App，通过GitHub的API获取PR数据并注入UI。
• 外部页面链接模拟
  不需要在PR页面内嵌入的话，可以在PR的Overview标签里添加一个醒目的链接，指向你自己搭建的页面（比如GitHub Pages），用来展示PR的自定义分析内容，效果上类似额外的标签页跳转。

针对自建Git平台（GitLab/Gitea/Bitbucket Server等） #

如果是自己部署的代码托管平台，通常支持通过插件或二次开发扩展PR/MR页面：

• GitLab：开发GitLab Marketplace的扩展插件，利用GitLab提供的前端扩展点，在Merge Request页面添加自定义标签页，需要熟悉GitLab的插件开发规范。
• Gitea：作为开源平台，你可以直接修改前端代码（基于Vue），或者开发自定义主题/插件来扩展MR页面的标签栏。
• Bitbucket Server：使用Atlassian的插件SDK，注册PR页面的扩展点，开发对应的插件来添加自定义标签。

注意点 #

• GitHub的脚本注入方案属于本地临时方案，无法全局生效；团队级别的需求优先考虑GitHub App。
• 自建平台的扩展需要对应平台的开发权限，并且要注意版本兼容性，避免平台更新后失效。

内容的提问来源于stack exchange，提问作者Mandar Sadye