Básicamente, lo que quiero que haga la extensión es que, cuando abra un video de YouTube, tome el nombre del canal de YouTube y lo agregue al título de la ventana para poder bloquear videos de YouTube de solo algunos canales. Entonces, si el nombre del canal de YouTube fuera "Mark Rober" y el título del video (y por lo tanto también el título de la ventana) fuera "¿Es la NASA una pérdida de dinero?" Quiero cambiar el título de la ventana por algo como "¿Es la NASA una pérdida de dinero? - Mark Rober".
Traté de escribir una extensión de Chrome para esto, pero no puedo encontrar la manera de obtener el nombre del canal de YouTube para ponerlo en el título de la ventana. Intenté usar document.querySelector y document.getElementById y ambos devolvieron "nulo" o indefinido. Probablemente porque no sé cómo acceder específicamente al nombre del canal porque en realidad no tiene una identificación única en el HTML.
También pensé en hacer esto a través de la API de YouTube, pero eso requiere un token de OAuth. Y dado que esta extensión sería muy útil para usar junto con muchos bloqueadores web, me encantaría compartirla cuando funcione y con un token que podría ser menos accesible (creo).
Así que si alguien me puede ayudar a hacer esto, estaría muy agradecido :)
No estoy seguro de qué está pasando en su código, tal vez las ID no sean únicas o algo así, pero de todos modos, logré obtener el nombre del canal usando la expresión más fea:
document.getElementById("primary-inner").children[7].children[1].children[0].children[0].children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].innerHTML (¿Conoce el problema de que la página tarda en cargarse y si la secuencia de comandos se ejecuta antes de que la página haya terminado de cargarse, puede obtener un null ? Existen técnicas para superar este problema, en caso de que sea nuevo para usted).
Editar:
El código completo de una extensión de Chrome que funciona para mí:
displayChannelName.js :
console.log("displayChannelName started."); let nodeLoaded = setInterval(function () { let node = document.getElementById("primary-inner"); if (node != undefined) { let channelName = node.children[7].children[1].children[0].children[0].children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].innerHTML; console.log("channel name: " + channelName); document.title = document.title + " - " + channelName; clearInterval(nodeLoaded); }; }, 500); manifest.json :
{ "name": "YouTube Channel Name", "version": "1", "description": "Display YouTube Channel Name", "manifest_version": 3, "content_scripts": [ { "matches": ["https://www.youtube.com/watch*"], "js": ["displayChannelName.js"] } ] }Editar:
Con MutationObserver:
displayChannelName.js :
console.log("displayChannelName script started."); let currTitle; function updateTitle(node) { if (document.title != currTitle) { console.log("updateTitle function called."); if (node == undefined) { node = document.getElementById("primary-inner"); }; setTimeout(function () { // wait a little in case title changes before the node reloads let channelName = node.children[7].children[1].children[0].children[0].children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].innerHTML; document.title += " - " + channelName; currTitle = document.title; }, 500); }; }; let nodeLoaded = setInterval(function () { // update title on page load let node = document.getElementById("primary-inner"); if (node != undefined) { updateTitle(node); clearInterval(nodeLoaded); }; }, 500); // listen for future changes new MutationObserver(function (mutations) { updateTitle(undefined); }).observe( document.querySelector("title"), { subtree: true, characterData: true, childList: true } );