Cambia la velocidad de los videos de Youtube con esta extensión para Chrome

Tiempo de lectura estimado: 2 minutos

📌 Introducción

Si alguna vez has querido cambiar la velocidad de los videos de YouTube de una manera más cómoda, sin ir al menú de configuración, ¡esta solución es para ti! Hoy te mostraré cómo crear una extensión de Chrome que añade un botón personalizado para cambiar la velocidad de reproducción de los videos en YouTube.

🛠️ Paso 1: Crear los Archivos de la Extensión

Primero, necesitas tres archivos básicos para tu extensión:

manifest.json (define la extensión)
content.js (el código que se ejecutará en YouTube)
background.js (opcional en este caso, no lo necesitamos)

Vamos a crear y configurar estos archivos.

📌 Archivo `manifest.json`

Este archivo describe la extensión y le da permisos para ejecutarse en YouTube.

{
"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.",
"permissions": ["scripting", "activeTab"],
"host_permissions": ["https://www.youtube.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
}

📌 Archivo `content.js`

Este es el código que inyectará el botón en YouTube y permitirá controlar la velocidad.

(function() {
function addSpeedControl() {
const container = document.querySelector('.ytp-right-controls');
if (!container) return;

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

const button = document.createElement('button');
button.textContent = '1x';
button.id = 'custom-speed-control';
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.style.display = 'flex';
button.style.alignItems = 'center';
button.style.justifyContent = 'center';

container.style.display = 'flex';
container.style.alignItems = 'center';

button.addEventListener('click', function() {
const video = document.querySelector('video');
if (video) {
const speeds = [1, 1.25, 1.5, 2, 0.75];
const nextSpeed = speeds[(speeds.indexOf(video.playbackRate) + 1) % speeds.length];
video.playbackRate = nextSpeed;
button.textContent = `${nextSpeed}x`;
}
});

container.appendChild(button);
}

const observer = new MutationObserver(() => {
const container = document.querySelector('.ytp-right-controls');
if (container && container.offsetHeight > 0) {
addSpeedControl();
observer.disconnect();
}
});

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

setTimeout(() => {
addSpeedControl();
}, 5000);
})();

🔥 Paso 2: Instalar la Extensión en Chrome

Ahora que tienes los archivos listos, sigue estos pasos para instalar la extensión en tu navegador:

Abre Google Chrome y ve a chrome://extensions/.
Activa el «Modo de Desarrollador» en la esquina superior derecha.
Haz clic en «Cargar Descomprimida» y selecciona la carpeta donde guardaste los archivos.
La extensión se instalará y estará lista para usarse en YouTube.

🎉 Paso 3: ¡Prueba tu Extensión!

Ve a cualquier video de YouTube.
En la barra de controles, verás un botón con «1x».
Haz clic para cambiar la velocidad entre 1x, 1.25x, 1.5x, 2x y 0.75x.
Disfruta de tu nueva funcionalidad personalizada. 🚀

Conclusión

Ahora tienes tu propia extensión para YouTube que te permite ajustar la velocidad con un solo clic. Puedes compartirla con amigos, mejorarla con nuevas funciones o incluso publicarla en la Chrome Web Store.

¿Te ha sido útil?

¡Déjame un comentario! 🙌