一年前公司项目迁移到了k8s上，从此不管开发测试还是线上环境的jenkins打包都需要使用tag来进行发布（提过意见，测试和开发环境能不能提交代码就打包，运维说不可以），就出现了一个问题： 开发和测试环境发布过于频繁，tag号太多了，jenkins的选择tag的组件太不友好了，需要找好久
于是想把这个样式调整一下，改成autoComplate组件，方便查找。
实现方案
毕竟不能去直接修改jenkins源码，也没有啥好的方式，采用js注入的方式进行二次处理（说白了就是谷歌商店下载油猴插件😎） 然后就是打开油猴的脚本管理界面
点击这个按钮之后就可以开始编写脚本了
接下来重点说一下开头的这些注释代码，十分重要，不能删除
javascript
// ==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：指定需要哪些权限
当然还有很多很多其他的注释，可以找找看
脚本代码
js
// ==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);
})();源码给出，如果你也和我一样有这样的问题可以直接获取使用，注意修改一下脚本里面的玉米哦，那么现在来看看效果如何
脚本启动！！！
效果不错的👍🏻，搜索一下
选中之后点击构建
成功运行！分享给同事，大家都说好👏🏻👏🏻
总结
做了一个简单的小功能，也第一次使用了油猴写自己的脚本，学会了一个新的小工具，可以写出很多其他小工具加快工作效率💪🏻