項目效果:

image.png

項目地址: 下載地址

相比于第一版修改了 js注入的方式, 從code的方式, 改為文件方式

old:

    chrome.tabs.executeScript(tabId, {code: code});

new:

  getCurrentTabId((tabId) =>
  {
    chrome.tabs.executeScript(tabId,{file:'js/find_script.js'});

  });

js/find_script.js :

function executeScriptToCurrentTab()
{

    var job_map = {};// job列
    var stage_map = {} // stage列
    var name_map ={} // name列
    var color_map = {}; // 用于保存想要的顏色

    //定義分支名字相同用于顯示的背景色庫
    var color_arr = ["red","purple","Yellow ","Violet","Teal","SlateGray","Sienna","RoyalBlue","Pink","Orange","Navy","MediumOrchid","Lime","Lime","Lime"]
    let color_num = 0;

    // 獲取
    let build_commit = document.getElementsByClassName("build commit");

    Array.prototype.forEach.call(build_commit, function (element) {

            // alert(name.innerText)
            let branch_commit_cgray = element.getElementsByClassName("branch-commit cgray")[0];
            let ref_name_obj = branch_commit_cgray.getElementsByClassName("ref-name")[0];
            let ref_name_str = ref_name_obj.innerText;
            // 從job重復(fù)map里取值, 有值證明有同名分支
            ref_name_repeat = job_map[ref_name_str];
            // 獲取當(dāng)前stage名字
            let stage = element.getElementsByTagName("td")[3];
                // 獲取當(dāng)前name名字
            let name = element.getElementsByTagName("td")[4]; 
            // 有值證明有同名分支
            if (ref_name_repeat) {  

                // 獲取重復(fù)的 stage
                let stage_repeat = stage_map[ref_name_str];
                // 獲取重復(fù)的 name
                let name_repeat = name_map[ref_name_str];

                // 如果 stage 相等 并且 name也想等
                if ((stage.innerText == stage_repeat.innerText) &&(name.innerText == name_repeat.innerText)) {
                    // 查看當(dāng)前ref_name_str key下的顏色是什么
                    color = color_map[ref_name_str]
                    // 如果沒有有這個顏色 , 就從color數(shù)組里面選一個出來保存起來
                    if (!color) {
                        color_map[ref_name_str] = color_arr[color_num];
                        // 下標(biāo)增加, 換個顏色
                        color_num+=1; 
                    }
                    // 從map里取出之前存儲的ref_name對象(也就是重復(fù)的)改變顏色
                    // 再改變當(dāng)前的顏色
                    ref_name_repeat.style.background=color_map[ref_name_str];
                    ref_name_obj.style.background=color_map[ref_name_str];

                    stage_repeat.style.background = color_map[ref_name_str];
                    stage.style.background = color_map[ref_name_str];

                    name_repeat.style.background = color_map[ref_name_str];
                    name.style.background = color_map[ref_name_str];
                }
                

            };
            // 把當(dāng)前的對象保存 , key用的就是ref_name對象的.innerText , 也就是分支名作為key
            job_map[ref_name_str] = ref_name_obj;
            stage_map[ref_name_str] = stage;
            name_map[ref_name_str] = name;  
    });
}


executeScriptToCurrentTab()

Chrome插件-pipeline查找相同分支名(一)