前言
一直觉得我最大的缺点就是不能忍。打个比方，我若是生在乱世，比如秦朝，揭竿而起的那个人一定会是我。话说，从进公司到现在，我忍我们的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模块都加上直达链接。没错，我就是这么任性。：）
