Chrome插件：gitlab activity dashboard background-color

背景

我一般都是在activity dashboard页看同事的提交记录，这样只要我有权限的项目有人提交了我就能够知道，虽然提交的具体代码压根不看.......但至少能够了解各个项目的开发情况（如果大家都认真写了commit message的话）。不过有个比较悲剧的情况是有一个我有权限的项目我只是看看并不参与开发，在activity dashboard我能看到同事对此项目的提交记录，而此项目的迭代速度比较快，所以看起来就像有一些commit狂魔在刷屏，经常出现对我并不是很重要的信息占据了大片屏幕位置，我要在N多的activity信息中寻找我真正关心的信息，这就比较扯了，所以我就在想，有没有什么办法能够在我打开activity dashboard页面的时候自动对信息做一个分级，让我一眼能够看到哪些是重要信息，哪些是次要的呢？想了一下，认为通过写一个Chrome插件能够解决这个问题，当打开activity dashboard页面的时候根据不同的项目名字对对应的activity项赋予不同的背景色，比如我不太关心的，就将背景色置为灰色，比较关心的，就置为比较醒目的颜色，这样能够满足所有的信息都能够获取到，并且能够优先处理关心度高的信息，此方案看上去可行。

实现

实现比较简单，通过content_scripts实现即可：

 

manifest.json：

{
    "manifest_version": 2,
    "name": "gitlab-activity-bg-color",
    "version": "0.0.1",
    "description": "gitlab-activity-bg-color.js",
    "content_scripts": 
    [
        {
            "matches": ["*://xxx.xxx.xxx.xxxx/dashboard/activity"],
            "js": ["./gitlab-activity-bg-color.js"],
            "css": [],
            "run_at": "document_end"
        }
    ]
}

gitlab-activity-bg-color.js:

function giveActivityBgColor() {
	const activityBgColor = {
		"foo": "#DDDDDD",
		"bar": "#66FF66"
	};
	const activityBoxes = document.getElementsByClassName("event-item");
	for (let i = 0; i < activityBoxes.length; i++) {
		try {
			const projectName = activityBoxes[i].getElementsByClassName("project-name")[0].textContent;
			if (projectName in activityBgColor) {
				activityBoxes[i].style += "; background-color: " + activityBgColor[projectName];
			}
		} catch(e) {
			console.error(e);
		}
	}
};
setInterval(giveActivityBgColor, 1000)

要设置为定时运行是因为gitlab的dashboard是滚动到页面底部加载新内容，有新内容到来时也需要能够处理到，简单起见就设置为一秒运行一次了。

然后在Chrome中选择插件所在目录打包安装即可。

.