0.最终效果
相同分支都会被同样的颜色给标记上
image.png
开发背景:
1.项目->CI/CD -> Pipeline -> running中的个数有时候会很多
2.而且Job栏的宽度有限, 也不能完全显示出分支名
3.就算能完全显示分支名, 想在众多的分支中,找到一样的也要一个一个搜索
4.那能不能有什么工具一键自动帮我把重复的标记出来呢, 找到重复的就可以关掉旧的, 解放资源
图例:
image.png
开发流程
1.写manifest.json ,用于图标, 描述, 界面显示等
{
"manifest_version": 2,
"name": "查找pipeline running 相同分支",
"description": "查看xxx 相同分支",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "find_repeat.html",
"default_title": "点击她!"
},
"permissions": [
"activeTab",
"storage"
],
"icons":
{
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
2.创建插件界面显示文件,我叫find_repeat.html
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css">
-->
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 10px;
white-space: nowrap;
}
h1 {
font-size: 15px;
}
#container {
align-items: center;
display: flex;
justify-content: space-between;
}
</style>
<script src="find_repeat.js"></script>
</head>
<body>
<h1>查找相同分支名</h1>
<div id="container">
</div>
</body>
</html>
3.与界面对应的js文件, find_repeat.js
注释里面的代码是js要注入的代码的展开
function getCurrentTabId(callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
}
function executeScriptToCurrentTab(code)
{
getCurrentTabId((tabId) =>
{
chrome.tabs.executeScript(tabId, {code: code});
});
}
window.onload = function(){
executeScriptToCurrentTab('var map = {};')
executeScriptToCurrentTab('var color_arr = ["red","purple","Yellow ","Violet","Teal","SlateGray","Sienna","RoyalBlue","Pink","Orange","Navy","MediumOrchid","Lime","Lime","Lime"]')
executeScriptToCurrentTab('var color_map = {};let color_num = 0')
executeScriptToCurrentTab('let build_commit = document.getElementsByClassName("build commit");')
executeScriptToCurrentTab('Array.prototype.forEach.call(build_commit, function (element) {let branch_commit_cgray = element.getElementsByClassName("branch-commit cgray")[0];let ref_name = branch_commit_cgray.getElementsByClassName("ref-name")[0];ref_name_value = map[ref_name.innerText];if (ref_name_value) { color = color_map[ref_name.innerText];if (!color) {color_map[ref_name.innerText] = color_arr[color_num];color_num+=1;}ref_name_value.style.background=color_map[ref_name.innerText];ref_name.style.background=color_map[ref_name.innerText];};map[ref_name.innerText] = ref_name;});')
// var color_arr = ["red","purple","Yellow ","Violet","Teal","SlateGray","Sienna","RoyalBlue","Pink","Orange","Navy","MediumOrchid","Lime","Lime","Lime"]
// let color_num = 0
// var map = {};
// var color_map = {}
// for ref_name in arr
// {
// ref_name_value = map[ref_name.innerText];if (ref_name_value) { color = color_map[ref_name.innerText];if (!color) {color_map[ref_name.innerText] = color_arr[color_num];color_num+=1;}ref_name_value.style.background=color_map[ref_name.innerText];};map[ref_name.innerText] = ref_name;
// }
// var map = {};
// var color_map = {}
// for ref_name in arr
// {
// ref_name_value = map[ref_name.innerText];
// if (ref_name_value) {
// color = color_map[ref_name.innerText]
// if (!color) {
// color_map[ref_name.innerText] = color_arr[color_num];
// color_num+=1;
// }
// ref_name_value.style.background=color_map[ref_name.innerText];
// ref_name.style.background=color_map[ref_name.innerText];
// }
// map[ref_name.innerText] = ref_name
// }
}
4.更多工具->扩展程序->加载已解压的扩展程序
image.png
网友评论