如何为所有Job页面新增Run按钮并实现Blue Ocean式弹窗效果

实现路径分为两种，可按需选择： #

• 轻量配置实现：依赖现有插件注入自定义脚本，不需要开发插件，适合快速上线
• 插件开发实现：自定义程度更高，适配性更强，适合大规模生产环境使用

轻量配置实现步骤 #

1. 安装两个必备插件：Build With Parameters 插件、Simple Theme 插件
2. 进入Jenkins全局配置页，找到Simple Theme的自定义脚本配置项，注入自定义JS和CSS
3. JS逻辑核心是：判断当前页面为Job详情页时，在操作栏插入Run按钮，点击按钮后请求当前Job的构建表单页内容，解析出参数表单后插入到模态框中展示，表单提交后自动关闭弹窗即可
4. 无参数Job可以跳过表单加载步骤，点击按钮直接调用构建接口触发构建

插件开发实现步骤 #

1. 新建Jenkins插件项目，选择 hudson.model.PageDecorator 作为扩展点，实现全局资源注入能力
2. 前端部分直接复用Jenkins自带的 jenkins-js-modals 模块实现模态框，不需要额外引入第三方组件
3. 表单渲染直接调用Jenkins原生的 /job/{任务名}/build 接口获取表单HTML，解析后插入模态框，无需自己实现参数解析、校验逻辑
4. 适配新旧版Jenkins的页面DOM结构，确保按钮在所有Job页都能正常展示

核心参考代码 #

以下是注入JS的核心片段，适配Jenkins 2.300+版本：

// 仅在Job详情页执行逻辑
if (location.pathname.match(/^\/job\/[^\/]+\/$/) || document.querySelector('.job-details')) {
  // 定位操作栏容器
  const actionContainer = document.querySelector('.page-head__actions') || document.querySelector('#tasks');
  if (!actionContainer) return;

  // 生成Run按钮
  const runBtn = document.createElement('button');
  runBtn.classList.add('jenkins-button', 'jenkins-button--primary');
  runBtn.textContent = 'Run';
  runBtn.style.marginLeft = '8px';

  runBtn.addEventListener('click', async () => {
    const jobBasePath = location.pathname.replace(/\/$/, '');
    const crumb = document.querySelector('meta[name="jenkins-crumb"]')?.content;

    // 请求构建页内容
    const formRes = await fetch(`${jobBasePath}/build?delay=0sec`, {
      headers: { 'Accept': 'text/html' }
    });
    const formHtml = await formRes.text();
    const tempDom = document.createElement('div');
    tempDom.innerHTML = formHtml;
    const buildForm = tempDom.querySelector('form[name="parameterizedForm"]');

    // 无参数Job直接触发构建
    if (!buildForm) {
      await fetch(`${jobBasePath}/build?delay=0sec`, {
        method: 'POST',
        headers: { 'Jenkins-Crumb': crumb }
      });
      alert('构建已成功触发');
      return;
    }

    // 调用Jenkins内置模态框加载表单
    window.jenkins.modal.open({
      title: 'Build with Parameters',
      content: buildForm,
      onClose: () => alert('构建已提交')
    });
  });

  actionContainer.appendChild(runBtn);
}

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