[Extensión para navegadores] – Cambia la velocidad de los videos de Youtube con esta extensión para tu navegador

Si utilizamos YouTube con frecuencia, es bastante habitual querer modificar la velocidad de reproducción. El reproductor ya incorpora esta opción, pero podemos simplificar el proceso creando una pequeña extensión para Chrome que añada un botón directamente a los controles del vídeo.

En este artículo vamos a crear una extensión sencilla utilizando JavaScript y Manifest V3. El objetivo será añadir un botón al reproductor de YouTube que permita cambiar la velocidad de reproducción con un solo clic.

La extensión irá alternando entre varias velocidades predefinidas: 1x, 1.25x, 1.5x, 2x y 0.75x.

---

La estructura de la extensión

Para este ejemplo no necesitamos una extensión especialmente compleja. Bastará con dos archivos:

• manifest.json: contiene la configuración de la extensión.
• content.js: contiene el código que se ejecutará dentro de YouTube.

No necesitamos un background.js ni una interfaz emergente (popup.html), ya que toda la funcionalidad estará integrada directamente en el reproductor de YouTube.

La estructura final será, por tanto:

youtube-speed-control/
├── manifest.json
└── content.js

---

Crear el archivo manifest.json

El archivo manifest.json es el encargado de definir nuestra extensión y establecer dónde puede ejecutarse.

En este caso utilizaremos Manifest V3, que es el formato actual utilizado por Chrome para las extensiones.

{
    "manifest_version": 3,
    "name": "Control de velocidad en YouTube",
    "version": "1.0",
    "description": "Añade un botón para controlar la velocidad de reproducción en YouTube.",
    "content_scripts": [
        {
            "matches": ["https://www.youtube.com/*"],
            "js": ["content.js"]
        }
    ],
    "host_permissions": [
        "https://www.youtube.com/*"
    ]
}

No necesitamos declarar permisos adicionales para este ejemplo. El content.js se cargará automáticamente cuando visitemos una página de YouTube.

---

Crear el archivo content.js

Ahora viene la parte interesante.

El script buscará los controles del reproductor de YouTube y añadirá nuestro propio botón. Cuando pulsemos sobre él, obtendremos el elemento <video> y modificaremos su propiedad playbackRate.

(function () {

    function addSpeedControl() {

        const container = document.querySelector('.ytp-right-controls');

        if (!container) {
            return;
        }

        // Evitamos crear el botón más de una vez.
        if (document.querySelector('#custom-speed-control')) {
            return;
        }

        const button = document.createElement('button');

        button.id = 'custom-speed-control';
        button.type = 'button';
        button.textContent = '1x';

        button.style.marginLeft = '10px';
        button.style.padding = '5px 10px';
        button.style.cursor = 'pointer';
        button.style.backgroundColor = '#ff0000';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.fontSize = '14px';
        button.style.height = '30px';

        button.addEventListener('click', function () {

            const video = document.querySelector('video');

            if (!video) {
                return;
            }

            const speeds = [1, 1.25, 1.5, 2, 0.75];

            const currentIndex = speeds.indexOf(video.playbackRate);
            const nextIndex = (currentIndex + 1) % speeds.length;
            const nextSpeed = speeds[nextIndex];

            video.playbackRate = nextSpeed;
            button.textContent = `${nextSpeed}x`;

        });

        container.appendChild(button);
    }

    const observer = new MutationObserver(function () {
        addSpeedControl();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    addSpeedControl();

})();

¿Qué está haciendo el código?

La función addSpeedControl() busca el contenedor de controles del reproductor mediante el selector:

document.querySelector('.ytp-right-controls');

Si el reproductor todavía no está disponible, simplemente termina su ejecución.

También comprobamos si nuestro botón ya existe:

if (document.querySelector('#custom-speed-control')) {
    return;
}

Esto es importante porque YouTube utiliza una interfaz dinámica y puede reconstruir partes del reproductor mientras navegamos por la página.

Cuando el usuario pulsa el botón, buscamos el elemento de vídeo:

const video = document.querySelector('video');

Y modificamos su velocidad utilizando la propiedad playbackRate:

video.playbackRate = nextSpeed;

El MutationObserver se encarga de volver a ejecutar la búsqueda cuando YouTube modifica dinámicamente el DOM.

---

Instalar la extensión en Chrome

Una vez creados los dos archivos, podemos instalar la extensión directamente desde el sistema de extensiones de Chrome.

1. Abre Chrome y escribe en la barra de direcciones:

   chrome://extensions/

2. Activa Modo de desarrollador.

3. Pulsa Cargar descomprimida.

4. Selecciona la carpeta que contiene manifest.json y content.js.

Chrome cargará la extensión y podremos verla en el listado de extensiones instaladas.

---

Probar la extensión

Ahora solamente tenemos que abrir cualquier vídeo de YouTube.

1. Abre un vídeo.
2. Localiza los controles del reproductor.
3. Debería aparecer nuestro botón con el texto 1x.
4. Cada pulsación cambiará la velocidad de reproducción.

Las velocidades utilizadas en este ejemplo son:

1x → 1.25x → 1.5x → 2x → 0.75x → 1x

El texto del botón se actualizará automáticamente para mostrar la velocidad que está utilizando actualmente el vídeo.

---

Algunas consideraciones

Hay que tener en cuenta que estamos modificando una interfaz que pertenece a YouTube. Los selectores utilizados por la extensión, como .ytp-right-controls, forman parte de la implementación actual del reproductor y podrían cambiar en futuras versiones.

Si YouTube modifica la estructura de sus controles, probablemente será necesario actualizar el selector utilizado por el script.

También es importante recordar que las extensiones cargadas mediante Modo de desarrollador están pensadas principalmente para desarrollo y pruebas. Para distribuir una extensión públicamente habría que preparar el proyecto adecuadamente y seguir los requisitos de publicación de Chrome Web Store.

---

Conclusión

Con apenas dos archivos hemos creado una extensión capaz de modificar el comportamiento del reproductor de YouTube y añadir una función propia directamente a su interfaz.

Lo interesante de este ejemplo no es únicamente el control de velocidad. También nos sirve para ver cómo una extensión de Chrome puede:

• Inyectar JavaScript en una página concreta.
• Detectar elementos creados dinámicamente.
• Modificar elementos del DOM.
• Interactuar con elementos HTML existentes.
• Modificar propiedades de un elemento <video>.

A partir de aquí podemos utilizar la misma idea para experimentar con otras funcionalidades del reproductor o incluso convertir este pequeño ejemplo en una extensión bastante más completa.

Visitas: 1