一年前公司项目迁移到了k8s上，从此不管开发测试还是线上环境的jenkins打包都需要使用tag来进行发布（提过意见，测试和开发环境能不能提交代码就打包，运维说不可以），就出现了一个问题： 开发和测试环境发布过于频繁，tag号太多了，jenkins的选择tag的组件太不友好了，需要找好久

于是想把这个样式调整一下，改成autoComplate组件，方便查找。

实现方案

毕竟不能去直接修改jenkins源码，也没有啥好的方式，采用js注入的方式进行二次处理（说白了就是谷歌商店下载油猴插件😎） 然后就是打开油猴的脚本管理界面

点击这个按钮之后就可以开始编写脚本了

接下来重点说一下开头的这些注释代码，十分重要，不能删除

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

@name:脚本的名称 @namespace：脚本的命名空间 @version：脚本的版本号 @description：脚本描述 @author：脚本作者 @match：匹配脚本运行在哪个域名下面（不是正则表达式的） @icon：图标 @grant：指定需要哪些权限 当然还有很多很多其他的注释，可以找找看

脚本代码

// ==UserScript==
// @name         jenkins 打包框大一些，好看一些，好找一些
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://39.103.151.156:8081/*
// @match        http:// 🌽你的jenkins域名🌽/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com.hk
// @grant        none
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js

// ==/UserScript==
this.$ = this.jQuery = jQuery.noConflict(true);

(function() {
    'use strict';

    // Your code here...
    var selectDom = document.getElementById('gitParameterSelect');
    selectDom.style.display = 'none';

    setTimeout(function() {
        var btn = $('button#yui-gen1-button')[0];
        const values = $('#gitParameterSelect option').map(function() {return this.value}).get();
        let str = ``;
        values.forEach(function(value) {
            str += `<li style="padding: 10px;cursor: pointer;transition: background-color 0.2s ease-in-out;" onmouseover="this.style.backgroundColor='#f8f8f8'" onmouseout="this.style.backgroundColor='#fff'">${value}</li>`
        })
        $('.setting-main').append(`
<div class="autocomplete" style="position: relative;height:550px;">
   <div class="autocomplete-input" style="display: flex;align-items: center;justify-content: center;padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);">
      <input style="width: 100%;border: none;font-size: 16px;outline: none;" type="text" id="search" placeholder="先输入关键字搜索tag号后，再点击下方确定打包版本" />
   </div>
   <div class="autocomplete-wapper" style="position: absolute;margin-top: 5px;left: 0;right: 0;background-color: #fff;border-radius: 5px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);max-height: 480px;overflow-y: auto;">
      <ul id="autocomplete-list" style="list-style: none;margin: 0;padding: 0;">${str}</ul>
   </div>
</div>`)

        const searchInput = document.getElementById("search");
        const autocompleteList = document.getElementById("autocomplete-list");

        searchInput.addEventListener("input", function () {
            const inputValue = this.value;
            autocompleteList.innerHTML = "";
            if (inputValue.length > 0) {
                const filteredFruits = values.filter(function (fruit) {
                    return fruit.toLowerCase().includes(inputValue.toLowerCase());
                });
                filteredFruits.forEach(function (fruit) {
                    $('#autocomplete-list').append(`<li style="padding: 10px;cursor: pointer;transition: background-color 0.2s ease-in-out;" onmouseover="this.style.backgroundColor='#f8f8f8'" onmouseout="this.style.backgroundColor='#fff'">${fruit}</li>`);
                });
            } else {
                $('#autocomplete-list').append(str)
            }
        });

        autocompleteList.addEventListener("click", function (event) {
            if (event.target.tagName === "LI") {
                searchInput.value = event.target.textContent;
                autocompleteList.innerHTML = "";
                selectDom.value = event.target.textContent;
            }
        });
    }, 1000);
})();

源码给出，如果你也和我一样有这样的问题可以直接获取使用，注意修改一下脚本里面的玉米哦，那么现在来看看效果如何

脚本启动！！！

效果不错的👍🏻，搜索一下

选中之后点击构建

成功运行！分享给同事，大家都说好👏🏻👏🏻

总结

做了一个简单的小功能，也第一次使用了油猴写自己的脚本，学会了一个新的小工具，可以写出很多其他小工具加快工作效率💪🏻