Tengo un configurador de velocidad de reproducción simple para cualquier video etiquetado con HTML (YouTube).
Recibo este error cuando hago clic en el botón 2.25 para intentar establecer la velocidad de reproducción del video en 2.25: "No se pueden establecer las propiedades de nulo (configurando 'playbackRate')".
Pero cuando abro la consola del navegador y escribo "document.querySelector('video').playbackRate = 2.25", el video cambia bien su velocidad.
¿Por qué mi extensión, que ejecuta el mismo código, no falla al ejecutarse? ¿Y cuál es la solución?
Todo mi código está debajo. Puedes copiarlo y probarte a ti mismo.
velocidad de juego.js
document.getElementById('speed225').onclick = function () { document.querySelector('video').playbackRate = 2.25; }botones-de-velocidad.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>estilo.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); }manifiesto.json
{ "manifest_version": 2, "name": "Video Playback Speed Controller (Menu Bar)", "version": "1.0", "description": "Adds buttons in the menu bar to change playback speed for HTML video tagged videos.", "icons": { "48": "icons/playback-icon-48.png" }, "permissions": [ "activeTab" ], "browser_action": { "default_icon": "icons/playback-icon-32.png", "default_title": "Change Video Speed", "default_popup": "speed-buttons.html" } }Tu archivo JavaScript, playspeed.js, no se está ejecutando en la ventana de contenido. Se está ejecutando en su HTML emergente.
Le recomiendo que actualice a manifest V3 y use chrome.scripting . Luego, intenta algo como esto:
const tabId = getTabId(); chrome.scripting.executeScript( { target: {tabId: tabId}, files: ['playspeed.js'], }, () => { ... } );Consulte también: https://developer.chrome.com/docs/extensions/reference/scripting/