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

项目效果:

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重复map里取值, 有值证明有同名分支
            ref_name_repeat = job_map[ref_name_str];
            // 获取当前stage名字
            let stage = element.getElementsByTagName("td")[3];
                // 获取当前name名字
            let name = element.getElementsByTagName("td")[4]; 
            // 有值证明有同名分支
            if (ref_name_repeat) {  

                // 获取重复的 stage
                let stage_repeat = stage_map[ref_name_str];
                // 获取重复的 name
                let name_repeat = name_map[ref_name_str];

                // 如果 stage 相等 并且 name也想等
                if ((stage.innerText == stage_repeat.innerText) &&(name.innerText == name_repeat.innerText)) {
                    // 查看当前ref_name_str key下的颜色是什么
                    color = color_map[ref_name_str]
                    // 如果没有有这个颜色 , 就从color数组里面选一个出来保存起来
                    if (!color) {
                        color_map[ref_name_str] = color_arr[color_num];
                        // 下标增加, 换个颜色
                        color_num+=1; 
                    }
                    // 从map里取出之前存储的ref_name对象(也就是重复的)改变颜色
                    // 再改变当前的颜色
                    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];
                }
                

            };
            // 把当前的对象保存 , 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查找相同分支名(一)