Actualmente estoy desarrollando una extensión de Chrome en la que intento saltar a un minuto específico en Crunchyroll, dependiendo de si es de relleno o de cañón. Curiosamente, cuando inspecciono manualmente el elemento 'Player0' (el reproductor multimedia) y lo expando a través de las herramientas de desarrollo, mi código funciona según lo previsto. Sin embargo, sin inspeccionar y expandir manualmente el elemento, se produce un error.
Tengo curiosidad por saber la razón subyacente de este comportamiento. ¿Alguien podría decirme por qué inspeccionar el elemento hace que mi código funcione y, de lo contrario, falla?
Al hacerlo por consola, aunque todos los elementos se cargan en doom, si no ingresas manualmente el elemento inspeccionar y extender no funciona
consola cromada:
document.getElementById('player0').currentTime = 200
error:
VM207:1 Uncaught TypeError: Cannot set properties of null (setting 'currentTime')
at <anonymous>:1:48
(anonymous) @ VM207:1
el elemento que estoy buscando existe y lo encuentra id="player0" en el html:
<video id="player0" playsinline="" src="blob:https://static.crunchyroll.com/e6cc3673-0c06-4d6f-a8eb-b67a66445bcc" style="display: flex; height: 100%; height: 100%; height: 100%; width: 100%;"></video>
este es mi manifiesto
{
"manifest_version": 3,
"name": "AnimeNoFiller - Crunchyroll",
"version": "1.0",
"description": "With AnimeNoFiller, you'll never have to wonder again whether an episode is canon or filler.",
"icons": {
"128": "./images/Icons/logo1.png"
},
"action": {
"default_popup": "popup/popup.html"
},
"permissions": [
"activeTab",
"scripting",
"storage"
],
"background": {
"service_worker": "background/service-worker.js",
"type": "module",
"matches": ["*://*.crunchyroll.com/*", "*://*.animeflv.net/*", "*://*.9animetv.to/*"]
},
"content_scripts": [
{
"js": ["content.js"],
"matches": ["*://*.crunchyroll.com/*", "*://*.animeflv.net/*", "*://*.9animetv.to/*"]
}
],
"web_accessible_resources": [
{
"resources": ["infoAnimes.json", "background/animeDataFunctions.js"],
"matches": ["<all_urls>"]
}
]
}
Este es el mensaje de error cuando no se expande (ignore el segundo problema que resalté en rojo ya que es un error separado y lo incluí por error).
Lo más probable es que el problema no sea el elemento en sí, sino el momento en que intentas acceder a él. Crunchyroll carga gran parte de su interfaz de forma dinámica (SPA), por lo que cuando tu script se ejecuta, el elemento #player0 aún no existe en el DOM y document.getElementById('player0') devuelve null.
Al abrir DevTools e inspeccionar el elemento, introduces un retraso adicional que permite que el reproductor termine de cargarse, dando la impresión de que inspeccionarlo "hace que funcione".
En lugar de acceder al elemento inmediatamente, espera a que exista utilizando un MutationObserver, un intervalo de sondeo o ejecutando la lógica después de que el reproductor haya sido creado:
const waitForPlayer = setInterval(() => {
const player = document.getElementById('player0');
if (player) {
player.currentTime = 200;
clearInterval(waitForPlayer);
}
}, 500);
También conviene verificar si el video está dentro de un iframe o si el identificador cambia dinámicamente entre reproducciones.