如何在Bitbucket的Pull Request页面添加自定义静态链接

嘿，这个需求我刚好折腾过，分Bitbucket的两个主流版本给你说具体实现方法，都是实操可行的：

这个版本支持后台自定义UI脚本，是最方便的团队级解决方案：

• 第一步：登录Bitbucket的管理后台，找到「外观」（Appearance）或者「自定义脚本」（Custom Scripts）模块（不同小版本位置可能略有差异，找不到的话搜一下后台的搜索框）
• 第二步：添加自定义JavaScript脚本，用来在PR页面插入你的静态链接。参考脚本如下：

// 处理页面初始加载和动态更新（Bitbucket很多内容是AJAX加载的）
function injectStaticLink() {
  // 定位PR页面的目标容器，比如标题栏下方的操作区
  const targetContainer = document.querySelector('.pull-request-header .pull-request-actions');
  if (targetContainer) {
    // 避免重复添加
    if (document.getElementById('custom-pr-link')) return;
    
    // 创建链接元素，用Bitbucket自带样式保持视觉统一
    const staticLink = document.createElement('a');
    staticLink.id = 'custom-pr-link';
    staticLink.href = '你的静态链接地址';
    staticLink.textContent = '自定义静态链接';
    staticLink.className = 'aui-button aui-button-primary';
    
    // 插入到目标位置
    targetContainer.appendChild(staticLink);
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', injectStaticLink);
// 监听DOM变化，处理切换PR等动态场景
const observer = new MutationObserver(injectStaticLink);
observer.observe(document.body, { childList: true, subtree: true });

• 第三步：保存脚本后，刷新任意PR页面，就能看到你添加的静态链接了。如果后续Bitbucket更新导致元素选择器失效，只需要调整querySelector里的参数即可。

Cloud版不支持后台自定义脚本，只能通过浏览器扩展实现，适合个人或团队内部分发：

• 第一步：创建一个简单的浏览器扩展（以Chrome/Edge为例），核心是content script，用来在PR页面注入链接。
• 第二步：编写扩展的manifest.json配置文件：

{
  "manifest_version": 3,
  "name": "Bitbucket PR 静态链接工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://bitbucket.org/*/pull-requests/*"],
      "js": ["content.js"]
    }
  ]
}

• 第三步：编写content.js脚本，逻辑和Server版类似，适配Cloud版的DOM结构：

function addStaticLink() {
  // 定位PR页面的操作栏容器
  const targetContainer = document.querySelector('.pull-request-actions-container');
  if (targetContainer && !document.getElementById('custom-cloud-pr-link')) {
    const link = document.createElement('a');
    link.id = 'custom-cloud-pr-link';
    link.href = '你的静态链接地址';
    link.textContent = '我的静态链接';
    // 匹配Cloud版的按钮样式，避免违和感
    link.className = 'css-19uc56f';
    link.style.marginLeft = '8px';
    
    targetContainer.appendChild(link);
  }
}

// 初始加载执行
addStaticLink();
// 监听DOM变化，处理动态加载的PR内容
const observer = new MutationObserver(addStaticLink);
observer.observe(document.body, { childList: true, subtree: true });

• 第四步：把扩展文件夹打包（或者直接用浏览器的「加载已解压的扩展程序」功能）安装到浏览器，打开任意Bitbucket Cloud的PR页面，就能看到静态链接了。如果是团队使用，可以把扩展打包成crx文件分发给成员。

小提示 #

• 元素选择器可能会随着Bitbucket的版本更新而变化，遇到链接不显示的情况，打开浏览器开发者工具定位最新的容器元素即可。
• 如果需要链接的文案或样式更贴合你的需求，直接修改脚本里的textContent和className/style参数就行。

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