油猴开发谷歌插件非常方便，如果用传统方式开发谷歌插件则比较麻烦，今天我们来开发一款用于jenkins快速选择项目以及相关表单的插件 快速发布

油猴

谷歌商店里面 tampermonkey 安装

界面

代码

// ==UserScript==
// @name         一键发布面板
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://jks-dev.xxx/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_setClipboard
// @grant        GM_notification
// ==/UserScript==

;(function() {
  'use strict'
  // 环境
  const ENV = {
    Modal: {
      MainId: 'quick-release-pop-modal',
      ProjectCheckboxClass: 'quick-release-project-checkbox'
    },
    Queue: {
      Main: 'quick-release-queue'
    },
    Projects: [
      {
        buildpath: 'web-console',
        server: 'dev-001',
        branch: 'dev'
      },
      {
        buildpath: 'web-console',
        server: 'test-001',
        branch: 'release/test'
      },
      {
        buildpath: 'web-merchant',
        server: 'dev-001',
        branch: 'dev'
      },
      {
        buildpath: 'web-merchant',
        server: 'test-001',
        branch: 'release/test'
      },
      {
        buildpath: 'web-guanwang',
        server: 'dev-001',
        branch: 'dev'
      },
      {
        buildpath: 'web-guanwang',
        server: 'test-001',
        branch: 'release/test'
      },
      {
        buildpath: 'web-download',
        server: 'dev-001',
        branch: 'dev'
      },
      {
        buildpath: 'web-download',
        server: 'test-001',
        branch: 'release/test'
      }
    ]
  }
  // 工具方法
  const Utils = {
    log(name, value) {
      console.info(`%c ${name}`, 'color: #23f10a', value)
    },
    notification(text, timeout = 3000) {
      GM_notification({
        text,
        title: '一键填写通知',
        timeout
      })
    },
    set(name, value) {
      GM_setValue(
        name,
        typeof value == 'string' ? value : JSON.stringify(value)
      )
    },
    get(name, value) {
      return GM_getValue(name, value)
    },
    async wait(time = 1000) {
      await new Promise(resolve => setTimeout(resolve, time))
    },
    debounce(fn, timestamp = 1000) {
      let go = true
      return () => {
        if (!go) return
        go = false
        fn()
        go = true
      }
    }
  }
  // UI库
  const ReactDOM = {
    render(element, container, callback = null) {
      let { tag, children = [], ...props } = element
      props = props || {}
      const thisNode =
        props['id'] && document.getElementById(props['id'])
          ? document.getElementById(props['id'])
          : document.createElement(tag)
      const EventType = {
        onClick: 'onclick'
      }
      for (const prop in props) {
        if (EventType[prop]) {
          thisNode[EventType[prop]] = props[prop]
        } else {
          thisNode[prop] = props[prop]
          thisNode.setAttribute(prop, props[prop])
        }
      }
      children.forEach(child => {
        ReactDOM.render(child, thisNode)
      })
      container.appendChild(thisNode)
    }
  }
  // 页面
  const DashPage = {
    start() {
      this.appendGlobalStyle()
      this.appendPanel()
      this.resumerLoop()
    },
    appendPanel() {
      ReactDOM.render(
        {
          tag: 'div',
          id: ENV.Modal.MainId,
          children: [
            {
              tag: 'div',
              class: 'main-input-modal',
              children: ENV.Projects.map((project, idx) => {
                return {
                  tag: 'div',
                  children: [
                    {
                      tag: 'input',
                      type: 'checkbox',
                      idx: idx,
                      class: ENV.Modal.ProjectCheckboxClass
                    },
                    {
                      tag: 'input',
                      value: project.buildpath
                    },
                    {
                      tag: 'input',
                      value: project.server
                    },
                    {
                      tag: 'input',
                      value: project.branch
                    }
                  ]
                }
              })
            },
            {
              tag: 'div',
              class: 'main-footer-modal',
              children: [
                {
                  tag: 'input',
                  type: 'button',
                  value: '启动',
                  onClick() {
                    DashPage.provider()
                  }
                },
                {
                  tag: 'input',
                  type: 'button',
                  value: '折叠/展开',
                  onClick() {
                    DashPage.openHide()
                  }
                },
                {
                  tag: 'input',
                  type: 'button',
                  value: '去Gitlab',
                  onClick() {
                    DashPage.goGitlab()
                  }
                }
              ]
            }
          ]
        },
        document.body
      )
    },
    appendGlobalStyle() {
      let style = document.createElement('style')
      document.head.appendChild(style)
      style.type = 'text/css'
      style.appendChild(
        document.createTextNode(`
                #quick-release-pop-modal{
                    position:fixed;
                    right:20px;
                    top:100px;
                    background:#e9e9e9;
                    padding:5px;
                    z-index:99999999;
                    box-shadow:-2px 2px 2px #c0c4cc;
                }
                .main-input-modal-hide{
                  display:none;
                }
                .main-footer-modal{
                  display: flex;
                  justify-content: space-between;
                }
                `)
      )
    },
    openHide() {
      document
        .querySelector('.main-input-modal')
        .classList.toggle('main-input-modal-hide')
    },
    goGitlab() {
      window.location.href = 'https://git.xxx/'
    },
    // 生产者
    provider: Utils.debounce(() => {
      const idxs = [
        ...document.getElementsByClassName(ENV.Modal.ProjectCheckboxClass)
      ]
        .filter(item => item.checked)
        .map(item => item.idx)
      Utils.set(
        ENV.Queue.Main,
        ENV.Projects.filter((_, idx) => {
          return idxs.includes(idx)
        })
      )
    }),
    // 消费者
    async resumerLoop() {
      var project = null,
        projects = []
      while (true) {
        await Utils.wait(1000)
        projects = JSON.parse(Utils.get(ENV.Queue.Main, '[]'))
        if (projects.length > 0) {
          project = projects.splice(0, 1)[0]
          break
        }
      }
      const href = `https://jks-dev.xxx/user/darnell/my-views/view/all/job/${project.buildpath}/build?delay=0sec`
      if (location.href != href) {
        window.location.href = href
      } else {
        Utils.set(ENV.Queue.Main, projects)
        // 等页面加载数据
        while (!document.querySelector('#gitParameterSelect option')) {
          await Utils.wait(1000)
        }
        await Utils.wait(2000)
        const serverCheckbox = document.querySelector(
          `input[type=radio][value=${project.server}]`
        )
        serverCheckbox.checked = true
        const gitParameterSelect = document.getElementById('gitParameterSelect')
        gitParameterSelect.value = project.branch
        await Utils.wait(1000)
        document.getElementById('yui-gen1-button').click()
      }
    }
  }
  DashPage.start()
})()