Tampermonkey script to display GitHub labels in search results and Notifications page

script.js

// ==UserScript==
// @name         Show labels on GH
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function() {
	function createLabel(url, txt, color) {
		var elem = document.createElement("a");
		elem.classList.add("label", "v-align-text-top");
		elem.style.backgroundColor = "#" + color;
		elem.style.color = "#" + findContrastingColor(color, 0.23);
		elem.setAttribute("href", url);
		elem.appendChild(document.createTextNode(txt));
		return elem;
	}

	function findContrastingColor(color, sentitivity) {
		//https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
		var R = parseInt(color.substr(0, 2), 16);
		var G = parseInt(color.substr(2, 2), 16);
		var B = parseInt(color.substr(4, 2), 16);
		var C = [R / 255, G / 255, B / 255];
		for (var i = 0; i < C.length; ++i) {
			if (C[i] <= 0.03928) {
				C[i] = C[i] / 12.92
			} else {
				C[i] = Math.pow((C[i] + 0.055) / 1.055, 2.4);
			}
		}
		L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2];

		if (!sentitivity) {
			sentitivity = 0.179;
		}

		if (L > sentitivity) {
			return "000000";
		} else {
			return "ffffff";
		}
	}



	function init(ev) {
		var token = "xxxxxxxx";
		var searchResultsDiv = document.querySelector("#issue_search_results, #notification-center");

		if (!searchResultsDiv) {
			return;
		}

		var searchItems = searchResultsDiv.querySelectorAll(".issue-list-item, .js-notification");
		Array.prototype.forEach.call(searchItems, function(item) {
			var labels = item.querySelector(".labels");
			if (!labels) {
				var span = document.createElement("span");
				span.classList.add("labels");
				var searchRowText = item.querySelector("div.d-inline-block");
				if (searchRowText) {
					searchRowText.appendChild(span);
				} else {
					item.appendChild(span);
				}
				span.style.display = "none";

				var issueUrl = item.querySelector("a").href;
				var issueUrlRelative = issueUrl.replace(/https\:\/\/github\.com/g, "");
				var urlSplit = issueUrlRelative.split("/");
				var id = parseInt(urlSplit[4], 10);

				if (isNaN(id)) {
					return;
				}

				var labelsApiUrl = `https://api.github.com/repos/${urlSplit[1]}/${urlSplit[2]}/issues/${id}/labels`;
				console.log(labelsApiUrl);
				//from https://github.com/StarcounterApps/KitchenSink/pull/163
				//to   https://api.github.com/repos/StarcounterApps/KitchenSink/pull/163/labels

				fetch(labelsApiUrl, {
					method: 'get',
					headers: new Headers({
						"Authorization": "token " + token
					})
				}).then(function(response) {
					return response.json();
				}).then(function(labelsInfo) {
					if (labelsInfo.length) {
						span.style.display = "";
					}
					labelsInfo.forEach(function(labelInfo) {
						span.appendChild(createLabel(labelInfo.url, labelInfo.name, labelInfo.color));
						span.appendChild(document.createTextNode(" "));
					});
				});
			}
		});
	}

	var target = document.querySelector("div[role='main']");
	if (target) {
		var observer = new MutationObserver(function(mutations) {
			init();
		});
		var config = {
			childList: true,
			subtree: true
		};
		observer.observe(target, config);
		init();

	}
	init();


})();