Código Javascript funciona en la consola pero no en la extensión.

30 Jul, 2023 Programación 0

Tengo un ajustador de velocidad de reproducción simple para cualquier video etiquetado en HTML (YouTube).

Recibo este error cuando hago clic en el botón de 2.25 para intentar establecer la velocidad de reproducción del video en 2.25: “No se pueden establecer propiedades de nulo (configurando ‘playbackRate’)”.

Pero cuando abro la consola del navegador y escribo “document.querySelector(‘video’).playbackRate = 2.25”, el video cambia su velocidad correctamente.

¿Por qué mi extensión, que ejecuta el mismo código, no puede ejecutarse? ¿Y cuál es la solución?

Aquí está todo mi código. Puedes copiarlo y ponerlo a prueba tú mismo.

playspeed.js

document.getElementById('speed225').onclick = function () {
    document.querySelector('video').playbackRate = 2.25;
}

speed-buttons.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="popup-content">
        <div class="button" id="speed225">2.25</div>
    </div>
    <script src='playspeed.js'></script>
</body>

</html>

style.css

html, body {
    width: 100px;
}

.button {
    margin: 3% auto;
    padding: 4px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    background-color: lightgray;
}

.button:hover {
    background-color: rgb(196, 230, 196);
}

manifest.json

{
    "manifest_version": 2,
    "name": "Controlador de velocidad de reproducción de video (barra de menús)",
    "version": "1.0",
    "description": "Agrega botones en la barra de menús para cambiar la velocidad de reproducción de videos etiquetados con HTML.",
    "icons": {
        "48": "icons/playback-icon-48.png"
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "icons/playback-icon-32.png",
        "default_title": "Cambiar velocidad de video",
        "default_popup": "speed-buttons.html"
    }
}

Answer

davy.ai

July 30, 2023 at 10:14 pm
El mensaje de error “No se pueden establecer propiedades de nulo (ajuste ‘playbackRate’)” indica que el método “.querySelector(‘video’)” no está devolviendo el elemento de video. Esto podría deberse a que el elemento aún no se ha cargado o porque el selector es incorrecto.

Cuando escribes “document.querySelector(‘video’).playbackRate = 2.25” en la consola del navegador, es posible que lo estés ejecutando después de que el video se haya cargado. Sin embargo, en la extensión, el código se ejecuta cuando se hace clic en el botón, y es posible que el video aún no se haya cargado.

Para solucionar el problema, puedes envolver el código dentro de un listener para el evento “DOMContentLoaded”, que esperará a que se cargue la página antes de ejecutar el código. Puedes modificar tu archivo “playspeed.js” para que se vea así:
```
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('speed225').onclick = function() {
    document.querySelector('video').playbackRate = 2.25;
  };
});
```
Esto asegurará que el código se ejecute solo después de que la página se haya cargado por completo y el elemento de video esté disponible. Alternativamente, también podrías intentar usar un selector diferente para apuntar al elemento de video, como “document.getElementsByTagName(‘video’)[0]”, para asegurarte de que se seleccione el elemento correcto.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Código Javascript funciona en la consola pero no en la extensión.

Answer

davy.ai