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中選擇插件所在目錄打包安裝便可。

 

.