YouTube Reaction Overview 1
function queryAndWriteData(ids, elements) { | |
console.log("Fetching yt api data"); | |
const urlToRequest = BASE_URL + ids.join("&id="); | |
GM_xmlhttpRequest({ | |
method: "GET", | |
url: urlToRequest, | |
responseType: "json", | |
onload: function(response) { | |
handleApiResponse(response.response); | |
for(let el of elements) { | |
const id = getVideoIdFromUrl(el.href); | |
if(ID_STATS_MAP[id]) { | |
writeLikesAndDislikesToDom(el, ID_STATS_MAP[id].likes, ID_STATS_MAP[id].dislikes); | |
} | |
} | |
} | |
}); | |
} | |
function handleApiResponse(response) { | |
if(response.items.length > 0) { | |
for(var item of response.items) { | |
const id = item.id; | |
const stats = item.statistics; | |
const likes = stats.likeCount; | |
const dislikes = stats.dislikeCount; | |
ID_STATS_MAP[id] = {"likes": likes, "dislikes": dislikes}; | |
} | |
} | |
} |
const API_KEY = "YourYtApiKey"; | |
const BASE_URL = "https://www.googleapis.com/youtube/v3/videos?part=statistics&key=" + API_KEY + "&id="; | |
const ID_STATS_MAP = {}; | |
(function() { | |
window.addEventListener("load", function(event) { | |
const elements = getElementsForVideos(); | |
getIdsAndQueryData(elements); | |
}); | |
})(); | |
function getElementsForVideos() { | |
const root = document.querySelector("#content #page-manager"); | |
if(!root) { | |
window.setTimeout(getElementsForVideos, 500); | |
return; | |
} | |
const elements = root.querySelectorAll("ytd-grid-video-renderer #video-title"); | |
return elements; | |
} |
// ==UserScript== | |
// @name YouTube Reaction Overview Basic | |
// @namespace https://cmon.dev | |
// @version 0.1 | |
// @description Shows the amount of likes and dislikes of a YouTube video before clicking it | |
// @author Simon Hofer | |
// @include https://www.youtube.com/* | |
// @grant GM_xmlhttpRequest | |
// @connect googleapis.com | |
// ==/UserScript== |
function getIdsAndQueryData(elements) { | |
if(elements.length > 0) { | |
const ids = Array.from(elements).map(e => getVideoIdFromUrl(e.href)); | |
const slices = 50; | |
const sliced_ids = new Array(Math.ceil(ids.length / slices)) | |
.fill().map(_ => ids.splice(0, slices)); | |
for(let id_slice of sliced_ids) { | |
queryAndWriteData(id_slice, elements); | |
} | |
} | |
else { | |
console.log("No elements found"); | |
} | |
} | |
function getVideoIdFromUrl(url) { | |
return url.split("&t=")[0].split("watch?v=")[1]; | |
} |
function writeLikesAndDislikesToDom(element, likes, dislikes) { | |
let likesElements = element.parentElement.getElementsByClassName("likes"); | |
if(likesElements.length !== 0) { | |
element.parentElement.removeChild(likesElements[0]); | |
} | |
let likesElement = createDiv("likes", likes, "green"); | |
element.parentElement.appendChild(likesElement); | |
let dislikesElements = element.parentElement.getElementsByClassName("dislikes"); | |
if(dislikesElements.length !== 0) { | |
element.parentElement.removeChild(dislikesElements[0]); | |
} | |
let dislikesElement = createDiv("dislikes", dislikes, "red"); | |
element.parentElement.appendChild(dislikesElement); | |
} | |
function createDiv(className, text, color) { | |
let el = document.createElement("div"); | |
el.setAttribute("style", "color: " + color); | |
el.setAttribute("class", className); | |
el.innerText = text; | |
return el; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment