如何通过用户脚本修改Bitbucket Pipelines的提交信息换行规则

问题1 如何修改脚本使其可以自动在Bitbucket Pipelines页面生效 #

你当前脚本失效的核心原因是硬编码了.gZYlAg这个动态哈希类名：Bitbucket前端构建后会自动生成哈希类名，会不定期更新，且不同页面的同类元素类名不通用，同时你注入的样式优先级低于原页面默认样式，被直接覆盖。
修改方案和你已实现的commits页逻辑保持一致，动态获取Pipelines页面提交信息元素的类名，同时给样式加!important提权，增加路径判断减少无意义执行，核心代码如下：

function changeCssStyleInPipelinesHistoryTable_OnceOnly() {
  try {
    // 仅在Pipelines页面执行
    if (!window.location.href.includes("/addon/pipelines/home")) {
      return setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 3000);
    }
    // 用稳定的data-testid定位Pipelines表格
    let pipelineFirstRow = document.querySelector('table[data-testid="pipelines-table"] tr');
    if (!pipelineFirstRow) {
      return setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 1000);
    }
    // 按结构定位提交消息列的文本元素，可根据实际DOM结构调整层级
    let msgElement = pipelineFirstRow.children[2].querySelector('span, a');
    if (msgElement?.classList.length) {
      let cssTag = msgElement.classList[0];
      // 样式加!important提权，补充overflow:hidden避免内容溢出
      addGlobalStyle(`.${cssTag} { white-space: normal !important; line-height: normal !important; max-height: 37px !important; overflow: hidden; }`);
      GIT_COMMIT_TABLE_STYLE_CHANGED = true;
    }
  } catch (error) {
    console.log(`changeCssStyleInPipelinesHistoryTable_OnceOnly() ERROR: ${error}`);
    setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 6000);
  }
  if (!GIT_COMMIT_TABLE_STYLE_CHANGED) {
    setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 5000);
  }
}

问题2 搭配延时的addGlobalStyle()方案存在什么问题 #

• 延时时长不可靠：受网络速度、设备性能影响，固定延时可能出现元素未加载完提前执行，或加载完成后很久才生效的问题
• 不兼容单页应用路由切换：Bitbucket是SPA单页应用，用户从其他页面切换到Pipelines/commits页时，脚本不会重新触发执行
• 冗余执行问题：多次重试会重复向页面注入相同的style标签，造成DOM冗余
• 无法覆盖懒加载内容：页面滚动加载的新列表行，不会自动应用样式

问题3 更优的实现方案 #

• 用MutationObserver替代定时重试：监听页面根节点的DOM变化，只要有新元素插入就自动匹配并应用样式，不需要固定延时，适配动态加载、懒加载、路由切换的所有场景
• 不依赖哈希类名定位：优先用data-testid、结构选择器等稳定的定位方式，完全避免类名变更导致脚本失效
• 样式统一提权：注入的样式统一添加!important，避免被原页面样式覆盖
• 路由变化监听：通过监听popstate事件或劫持pushState/replaceState感知单页应用路由切换，触发样式重新注入
• 整合多页面逻辑：不需要拆分两个脚本，同一份脚本根据当前页面路径执行对应逻辑即可

内容的提问来源于stack exchange，提问作者Mr-IDE