(YCCVR) Youtube clickable channel in video-recommendation list (Greasemonkey / Tampermonkey)

yccvr.user.js

// ==UserScript==
// @name         (YCCVR) Youtube clickable channel in video-recommendation list
// @namespace    https://www.leonbrandt.com
// @version      1.0
// @description  Make channel-names clickable in video-recommentation list
// @author       Leon Brandt
// @homepage     https://www.leonbrandt.com
// @match        https://www.youtube.com/watch?*
// @grant        none
// @run-at		 document-idle
// ==/UserScript==

// CONFIG
// Place your API-Key here:
	var API_KEY = "<your-api-key>";
// Time in milliseconds to wait until injection
// (You should wait at least 1 second to ensure the recommendation list is loaded)
	var INJECTION_TIMEOUT = 2000;
// --------------------------------------------------
// You don't need to change anything after here, unless you want to modify the behaviour.

var apiUrl = "https://www.googleapis.com/youtube/v3/videos?key=" + API_KEY + "&part=snippet&id=";
var channelUrl = "https://www.youtube.com/channel/";

function getChannelId(req, videoId) {
	req.open('GET', apiUrl + videoId, false);
	req.send();
	if(req.status != 200) return false;

	var res = JSON.parse(req.responseText);
	var item = res.items[0];
	if(item == undefined || item == null) return false;
	var snippet = item.snippet;
	if(snippet == undefined || snippet == null) return false;
	var channelId = snippet.channelId;

	return channelId;
}

function inject() {
	var req = new XMLHttpRequest();
	var videos = document.querySelectorAll("#related #items > *");

	videos.forEach(v => {
		var a = v.querySelectorAll("a.yt-simple-endpoint")[1];
		var href = a.getAttribute("href");

		var urlRegex = /watch\?v=(\w+)/g;
		var match = urlRegex.exec(href);
		var videoId = match[1];

		var channelId = getChannelId(req, videoId);
		if(!channelId) return;

		a.removeAttribute("href");

		var title = a.querySelector("#video-title");
		var titleA = document.createElement("a");
		titleA.setAttribute("class", "yt-simple-endpoint");
		titleA.setAttribute("href", href);

		var metadata = a.querySelector("#metadata");
		var metadataA = document.createElement("a");
		metadataA.setAttribute("style", "text-decoration: none !important;");
		metadataA.setAttribute("href", channelUrl + channelId);

		title.parentNode.insertBefore(titleA, title);
		titleA.appendChild(title);

		metadata.parentNode.insertBefore(metadataA, metadata);
		metadataA.appendChild(metadata);
	});
}

(function() {
	'use strict';
	setTimeout(function(){
		console.log("[YCCVR] loading...");
		inject();
		console.log("[YCCVR] injected");
	}, INJECTION_TIMEOUT);

})();