Tengo un configurador de velocidad de reproducción simple para cualquier video etiquetado con HTML (YouTube).
Cuando hago clic en el botón 2,25 que se supone que cambia la velocidad a 2,25, no pasa nada. No recibo un mensaje de error.
Pero cuando abro la consola del navegador y escribo "document.querySelector('video').playbackRate = 2.25", el video cambia bien su velocidad.
¿Qué está mal?
velocidad de juego.js
browser.tabs.executeScript( { code: `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" } }El botón speed225 está dentro de la ventana emergente, por lo que su oyente no puede estar dentro de executeScript, que inyecta el código dentro de la página web como un script de contenido.
Utilizar este:
document.getElementById('speed225').onclick = function () { browser.tabs.executeScript({ code: "document.querySelector('video').playbackRate = 2.25;" }); };Consulte también ¿Cómo abrir la consola de devtools correcta para ver el resultado de un script de extensión?