0.最終效果
相同分支都會(huì)被同樣的顏色給標(biāo)記上
image.png
開(kāi)發(fā)背景:
1.項(xiàng)目->CI/CD -> Pipeline -> running中的個(gè)數(shù)有時(shí)候會(huì)很多
2.而且Job欄的寬度有限, 也不能完全顯示出分支名
3.就算能完全顯示分支名, 想在眾多的分支中,找到一樣的也要一個(gè)一個(gè)搜索
4.那能不能有什么工具一鍵自動(dòng)幫我把重復(fù)的標(biāo)記出來(lái)呢, 找到重復(fù)的就可以關(guān)掉舊的, 解放資源
圖例:
image.png
開(kāi)發(fā)流程
1.寫manifest.json ,用于圖標(biāo), 描述, 界面顯示等
{
"manifest_version": 2,
"name": "查找pipeline running 相同分支",
"description": "查看xxx 相同分支",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "find_repeat.html",
"default_title": "點(diǎn)擊她!"
},
"permissions": [
"activeTab",
"storage"
],
"icons":
{
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
2.創(chuàng)建插件界面顯示文件,我叫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.與界面對(duì)應(yīng)的js文件, find_repeat.js
注釋里面的代碼是js要注入的代碼的展開(kāi)
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.更多工具->擴(kuò)展程序->加載已解壓的擴(kuò)展程序
image.png
