Code Plus插件开发笔记

前言

一直觉得我最大的缺点就是不能忍。打个比方，我若是生在乱世，比如秦朝，揭竿而起的那个人一定会是我。话说，从进公司到现在，我忍我们的Code平台很久了。你也许会问，Code平台怎么了，不就是个gitlab么？没错，就是个gitlab。可是每次我要切换到beta分支，至少需要点三次：CI->下拉->beta，这个过程至少需要10秒钟。虽然只是10秒，可我至少重复了100次！没错，100次！！Code的同学为什么不能在每个项目的页面上直接添加一个跳转到beta分支的链接！！吐槽没用，我决定自己来写一个插件给每个项目的页面上添加一个直达beta分支的链接。

目录结构

Dianping Code Plus-0.0.1.crx为打包好的插件。

popup.html为点在浏览器上点击插件图标时显示的页面。

manifest.json为插件的配置文件，包括插件名称、版本、权限等信息。

script文件夹存放插件主要的脚本文件，Code Plus引用了最新版本的jQuery。

image文件夹存放了插件的图标。

_locales文件夹存放了国际化相关的配置文件。

开发过程

在页面第一次被载入时，插件会被引入到页面中。插件中的js代码就如同网页本身引入的js文件一样。Code Plus只针对大众点评的Code平台，所以只对域名为code.dianpingoa.com的页面有效。

host = window.location.host;
if (host != "code.dianpingoa.com") {
    console.log("code-plus插件只在code.dianpingoa.com域名下有效");
    return false;
}

code有个比较坑爹的地方，就是页面只在第一次打开的时候加载，后面每次点击页面上的链接都会发送一个ajax请求到后端，后端返回一个新的页面文档，然后前端重新渲染。所以需要监听页面是否变化。代码中通过监听title判断页面是否变化。

var title = $('title');
title.bind('DOMNodeInserted', function(e) {
    var newUrl = window.location.href;
    console.log("newUrl:" + newUrl);
    var newUrlArray = newUrl.split("/");
    //判断是否切换到新的项目
    if( groupName == newUrlArray[3] && appName == newUrlArray[4]) {
        console.log("项目没有改变");
    } else {
        console.log("项目已改变");
        groupName = newUrlArray[3];
        appName = newUrlArray[4];
        if (initAppInfo()){
            //获取beta分支名字
            getBetaBranchName();
        }
    }

    //groupName = newUrlArray[3];
    //appName = newUrlArray[4];
    //等待新页面渲染完成
    setTimeout(function () {
        //将beta分支的链接添加在当前页面上
        updatePage();
    }, 500);

    if (newUrl == betaBranchUrl) {
        console.log("已切换到beta分支..");
        var tbody = $(".module-machine-list")[0].children[1];
        var modules = tbody.children;
        console.log("模块数量：" + modules.length);
    }
});

经过分析，Code平台上所有项目的master分支的名字都是master，所以可以拼接出master分支的地址。

//解析url拿到分组的名字和项目的名字
groupName = urlArray[3];
appName = urlArray[4];
if (groupName.length > 0 && appName.length > 0) {
    //拼接处master分支的地址
    masterBranchUrl = "http://" + host + "/" + groupName + "/" + appName + "/ci_branch/master";
    console.log(masterBranchUrl);
} else {
    console.log("解析master分支url失败");
    return false;
}

然后通过ajax请求拿到master分支页面的文档，再从中解析出beta分支的名字，然后就可以拼接处beta分支的链接了。

function getBetaBranchName() {
	if (masterBranchUrl.length <= 0) {
		return 0;
	}
	console.log(masterBranchUrl);
	//请求master分支页面
    $.ajax({
        type: "GET",
        url: masterBranchUrl,
        data: {},
		dataType: "html",
        success: function (data) {
            var doc = $.parseHTML(data);
            //console.log(doc);
            $.each(doc, function(i, el) {
                //解析网页文档中beta分析的地址
                if (i == 23) {
                    var branchNum = $(el).children()[0].children[0].children[0].children[0].children[1].children[0].children.length;
                    for (var i = branchNum - 1; i >= 0; i--) {
                        var branch = $(el).children()[0].children[0].children[0].children[0].children[1].children[0].children[i];
                        //console.log(branch + "--" + branch.text);
                        //获取beta分支名字
                        if (branch.text.indexOf("[beta]") > 0) {
                            betaBranchName = branch.value;
                            //将beta分支的链接添加在当前页面上
                            updatePage();
                            break;
                        }
                    }
                }

            });
        }
    });
}

解析出beta分支的链接之后就可以将链接加在当前页面上了

function updatePage() {
	if (betaBranchName.length <= 0) {
		return;
	}
	if (window.document.getElementsByClassName("ci")[0].children.length > 1) {
	    console.log("已添加beta分支链接");
	    return;
    }
    //分隔符
    var spanLabel = document.createElement("span");
    spanLabel.setAttribute("class", "separator");
    window.document.getElementsByClassName("ci")[0].appendChild(spanLabel);
    console.log("beta分支名称：" + betaBranchName);
    //betaBranchName = branchName;
    betaBranchUrl = "http://" + host + "/" + groupName + "/" + appName + "/ci_branch/" + betaBranchName;
    var betaLink = $("<a>Beta</a>");
    betaLink.attr("href", betaBranchUrl);
    $($(".ci")[0]).append($("<a href='" + betaBranchUrl + "'><h1 class="project_name">Beta</h1></a>"));
}

效果图

待续

后面考虑给每个项目的web模块和service模块都加上直达链接。没错，我就是这么任性。：）

Github:https://github.com/umgsai/code-plus