¿Cansado de las interrupciones publicitarias mientras disfrutas de YouTube? Crear tu propia extensión de Chrome puede ser la solución, y es más sencillo de lo que piensas. Todo comenzó durante una fiesta con amigos, cuando la música de YouTube se veía constantemente interrumpida por anuncios. Esa necesidad me llevó a desarrollar esta extensión, y hoy quiero compartir contigo cómo puedes crear la tuya.
En un artículo anterior, te expliqué cómo ver YouTube sin anuncios. Hoy vamos un paso más allá: crearemos una extensión que automatiza todo ese proceso. Con esta extensión, conseguirás el mismo resultado con solo un click.
En esta guía paso a paso, aprenderás a desarrollar desde cero una extensión para Chrome que transformará tu experiencia en YouTube. No solo conseguirás un navegador libre de interrupciones, sino que dominarás los fundamentos para crear extensiones en Chrome y navegadores basados en Chromium. Te mostraré cada paso con ejemplos prácticos y código real, perfecto tanto si eres principiante como si ya tienes experiencia en desarrollo.
Requisitos previos
- Conocimientos básicos de HTML, CSS y JavaScript (solo si quieres modificar algo, sino con hacer un copy-paste de lo que te explique tendrás suficiente)
- Un editor de código (como Visual Studio Code)
- Google Chrome instalado en tu ordenador
¿Cómo funciona nuestra extensión?
Antes de sumergirnos en el código, vamos a entender qué hace exactamente nuestra extensión y cómo interactúa con YouTube. La he llamado «AdBlock & Roll» (sí, puedes intuir la música que sonaba en la fiesta), aunque tú puedes personalizarla con el nombre que prefieras.
Características principales
- Activación con un click: Cuando estés viendo un vídeo en YouTube, bastará con pulsar el icono de la extensión para disfrutar del contenido sin interrupciones.
- Indicadores visuales intuitivos: El icono de la extensión cambia de color para mantenerte informado de su estado:
- 🔴 Rojo: Estás en YouTube y la extensión está lista para usarse
- 🟢 Verde: La extensión está funcionando en ese momento
- ⚪ Gris: Estás en otra página web donde la extensión no es necesaria
Página de opciones
Hemos incluido una página de opciones que te ofrece:
- Activar la redirección automática para mayor comodidad
- Consultar estadísticas de uso de la extensión
- Guía con una explicación sencilla del funcionamiento
- Información sobre los diferentes estados de la extensión
La extensión está diseñada para ser simple pero efectiva, centrándose en hacer una cosa y hacerla bien. Aunque en futuras actualizaciones podríamos añadir más funcionalidades, esta versión inicial cumple perfectamente su objetivo: permitirte disfrutar de YouTube sin anuncios de la manera más sencilla posible.
Estructura del proyecto
Antes de empezar a ver código, necesitamos organizar nuestro proyecto de manera adecuada. Vamos a crear una estructura de archivos que nos permitirá mantener nuestro código ordenado y fácil de mantener.
Organización de archivos
Crea una nueva carpeta para tu proyecto y organiza los archivos de la siguiente manera:
mi-extension-youtube/
│
├── icons/ # Carpeta para los iconos de la extensión
│ ├── icon16.png # Icono rojo (16x16 píxeles)
│ ├── icon48.png # Icono rojo (48x48 píxeles)
│ ├── icon128.png # Icono rojo (128x128 píxeles)
│ ├── icon16_green.png # Variante verde
│ ├── icon48_green.png # Variante verde
│ ├── icon128_green.png # Variante verde
│ ├── icon16_disabled.png # Variante gris
│ ├── icon48_disabled.png # Variante gris
│ └── icon128_disabled.png # Variante gris
│
├── manifest.json # Configuración principal de la extensión
├── background.js # Script en segundo plano
├── content.js # Script que interactúa con las páginas web
├── options.html # Página de configuración
├── options.js # Lógica de la página de configuración
└── options.css # Estilos de la página de configuración
Sobre los iconos
Los iconos son una parte importante de tu extensión, proporcionan feedback visual al usuario:
- Necesitarás tres variantes de cada icono (rojo, verde y gris)
- Cada variante debe estar disponible en tres tamaños: 16×16, 48×48 y 128×128 píxeles
- Los diferentes tamaños aseguran que tu extensión se vea bien en distintas resoluciones y contextos
- Aquí te dejo los míos, pero crea los tuyos a tu gusto siguiendo los puntos anteriores
En las siguientes secciones, explicaremos detalladamente la función de cada archivo y el código que debe contener. Empezaremos con el manifest.json
, que es el archivo que define las características básicas de nuestra extensión.
Configuración del manifest
El archivo manifest.json
es el corazón de tu extensión y es crucial para cualquier extensión de Chrome, ya que define los permisos, recursos y comportamiento general.
{
"manifest_version": 3,
"name": "AdBlock & Roll",
"version": "1.0",
"description": "Redirige de YouTube a yout-ube para ver videos sin anuncios",
"permissions": ["activeTab", "storage"],
"host_permissions": ["*://*.youtube.com/*", "*://*.yout-ube.com/*", "*://*.youtube-nocookie.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*.youtube.com/*", "*://*.yout-ube.com/*", "*://*.youtube-nocookie.com/*"],
"js": ["content.js"]
}
],
"action": {
"default_icon": {
"16": "icons/icon16_disabled.png",
"48": "icons/icon48_disabled.png",
"128": "icons/icon128_disabled.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html"
}
Explicación del manifest.json
manifest_version
: Usamos la versión 3, que es el estándar actualpermissions
: Solicitamos acceso al almacenamiento y la pestaña activahost_permissions
: Definimos los dominios con los que interactuará la extensiónbackground
: Especificamos nuestro script en segundo planocontent_scripts
: Configuramos los scripts que se ejecutarán en las páginas webaction
: Definimos los iconos para diferentes estados de la extensiónoptions_page
: Indicamos la página de configuración de la extensión
Script en segundo plano
Seguimos con background.js
, es el cerebro de nuestra extensión. Funciona en segundo plano y se encarga de:
- Mantener la cuenta de las redirecciones realizadas
- Gestionar el estado de la extensión
- Cambiar el icono según la página donde estemos
- Detectar cuando estamos en YouTube
- Manejar la configuración de la redirección automática
let redirectCount = 0;
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ autoRedirect: false, redirectCount: 0 });
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete' && tab && tab.url) {
if (tab.url.includes("youtube.com")) {
chrome.action.setIcon({
path: {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
tabId: tabId
});
chrome.storage.sync.get("autoRedirect", ({ autoRedirect }) => {
if (autoRedirect) {
chrome.tabs.sendMessage(tabId, { action: "redirect" });
}
});
} else if (tab.url.includes("yout-ube.com") || tab.url.includes("youtube-nocookie.com")) {
chrome.action.setIcon({
path: {
"16": "icons/icon16_green.png",
"48": "icons/icon48_green.png",
"128": "icons/icon128_green.png"
},
tabId: tabId
});
} else {
chrome.action.setIcon({
path: {
"16": "icons/icon16_disabled.png",
"48": "icons/icon48_disabled.png",
"128": "icons/icon128_disabled.png"
},
tabId: tabId
});
}
}
});
chrome.action.onClicked.addListener((tab) => {
if (tab && tab.url && tab.url.includes("youtube.com")) {
chrome.tabs.sendMessage(tab.id, { action: "redirect" });
}
});
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "incrementRedirectCount") {
chrome.storage.sync.get("redirectCount", ({ redirectCount }) => {
chrome.storage.sync.set({ redirectCount: redirectCount + 1 });
});
}
});
Script de contenido
El siguiente es content.js
, nuestro agente en el terreno. Se ejecuta directamente en las páginas web que visitamos y tiene tres funciones principales:
- Escuchar las órdenes del background.js
- Realizar la redirección cuando se le solicita
- Informar al background.js cuando realiza una redirección
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "redirect") {
const currentUrl = window.location.href;
const newUrl = currentUrl.replace("youtube.com", "yout-ube.com");
window.location.href = newUrl;
chrome.runtime.sendMessage({ action: "incrementRedirectCount" });
}
});
Página de opciones
Nuestra página de opciones consta de tres archivos que trabajan juntos para crear una interfaz de usuario amigable:
options.html
- Define la estructura de la página de opciones
- Muestra los apartados disponibles
- Presenta las estadísticas de uso de la extensión
- Incluye información sobre los diferentes estados que ofrece
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opciones de AdBlock & Roll</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="icons/icon128.png" alt="AdBlock & Roll Logo" class="logo">
<h1>AdBlock & Roll</h1>
</div>
<div class="option">
<label class="switch">
<input type="checkbox" id="autoRedirect">
<span class="slider round"></span>
</label>
<span class="option-text">Redirección automática</span>
</div>
<div class="stats">
<h2>Estadísticas</h2>
<p>Número de redirecciones realizadas: <span id="redirectCount">0</span></p>
</div>
<div class="info">
<h2>Información</h2>
<p>Esta extensión te permite ver videos de YouTube sin anuncios redirigiendo a yout-ube.com.</p>
<p>El icono de la extensión cambiará de color según el sitio:</p>
<ul>
<li><img src="icons/icon16_disabled.png" alt="Icono desactivado"> Gris: No estás en YouTube</li>
<li><img src="icons/icon16.png" alt="Icono activado"> Rojo: Estás en YouTube</li>
<li><img src="icons/icon16_green.png" alt="Icono verde"> Verde: Estás en youtube-nocookie.com</li>
</ul>
</div>
<div class="disclaimer">
<h2>Aviso Importante</h2>
<p>Entendemos que los anuncios son una parte fundamental para que los creadores de contenido puedan seguir produciendo el contenido que disfrutas. Si deseas apoyar a tus creadores favoritos, te recomendamos considerar la suscripción a YouTube Premium como la mejor manera de ver contenido sin anuncios mientras apoyas directamente a los creadores.</p>
</div>
</div>
<script src="options.js"></script>
</body>
</html>
options.js
- Maneja la lógica de la página de opciones
- Guarda y carga las preferencias del usuario
- Actualiza las estadísticas en tiempo real
- Gestiona los cambios en la configuración
document.addEventListener('DOMContentLoaded', () => {
const autoRedirectCheckbox = document.getElementById('autoRedirect');
const redirectCountSpan = document.getElementById('redirectCount');
chrome.storage.sync.get(['autoRedirect', 'redirectCount'], (result) => {
autoRedirectCheckbox.checked = result.autoRedirect;
redirectCountSpan.textContent = result.redirectCount;
});
autoRedirectCheckbox.addEventListener('change', (event) => {
chrome.storage.sync.set({ autoRedirect: event.target.checked });
});
// Actualizar el contador cada segundo
setInterval(() => {
chrome.storage.sync.get('redirectCount', (result) => {
redirectCountSpan.textContent = result.redirectCount;
});
}, 1000);
});
options.css
- Define el aspecto visual de la página de opciones
- Estiliza los botones y controles
- Crea un diseño responsive y moderno
- Mejora la experiencia de usuario con animaciones y transiciones
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header {
display: flex;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.logo {
width: 64px;
height: 64px;
margin-right: 15px;
}
h1 {
color: #FF3D00;
margin: 0;
font-size: 2em;
}
h2 {
color: #FF3D00;
margin-top: 25px;
margin-bottom: 15px;
}
.option {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.option-text {
margin-left: 10px;
font-size: 1.1em;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #FF3D00;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.stats, .info, .disclaimer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
li img {
margin-right: 10px;
}
.disclaimer {
background-color: #fff8e1;
padding: 20px;
border-radius: 8px;
margin-top: 30px;
}
.disclaimer h2 {
color: #FF3D00;
margin-top: 0;
}
.disclaimer p {
line-height: 1.6;
margin-bottom: 0;
}
Y hasta aquí todos los archivos que vamos a necesitar. Con el código de todos los archivos que vas a necesitar, comentado y explicado para que puedas basarte en él y crear tu propia extensión. De este modo podrás decir que has podido crear con tus propias manos la extensión para Chrome que te ayudará a disfrutar de YouTube sin anuncios en tu ordenador.


Cómo usar nuestra extensión en Chrome
- Abre Chrome y ves a
chrome://extensions/
o desdeConfiguración > Extensiones
- Activa el «Modo desarrollador» en la esquina superior derecha
- Haz clic en «Cargar descomprimida» y selecciona la carpeta de tu proyecto
- Ahora la extensión aparecerá en tu barra de herramientas
- Ve a YouTube y empieza a disfrutar de tus vídeos sin anuncios 🎉
Últimos pasos y recomendaciones
Si has llegado hasta aquí, ¡felicidades! Ya tienes tu primera extensión funcionando. Pero hay algunos aspectos y buenas prácticas que son importantes y debes tener en cuenta:
Seguridad antes que nada
El desarrollo de extensiones es emocionante, pero recuerda:
- Solicita solo los permisos que realmente necesitas
- Valida siempre las URLs antes de realizar redirecciones
Mejora tu proceso de desarrollo
Después de crear varias extensiones, he aprendido algunos trucos que quiero compartir contigo:
- El depurador de Chrome para extensiones será tu mejor amigo
- Prueba en diferentes versiones de Chrome, especialmente en la versión Canary
- Organiza tu código en módulos desde el principio
- Documenta mientras desarrollas, no lo dejes para el final y lo agradecerás en un futuro
Resumiendo
Crear una extensión de Chrome para YouTube es un excelente proyecto para aprender sobre el desarrollo de extensiones. Es importante recordar que este es solo un ejemplo educativo donde hemos visto cómo se pueden utilizar las API de Chrome para crear una extensión útil que mejora la experiencia de navegación.
Saltarse los anuncios puede afectar a los creadores de contenido que dependen de los ingresos por publicidad. Por eso, animamos a considerar alternativas como YouTube Premium para apoyar a tus creadores favoritos.
Para seguir aprendiendo
El desarrollo de extensiones es un campo en constante evolución. Te dejo algunos recursos que me han sido muy útiles:
- La documentación oficial de Chrome Extensions es tu mejor referencia
- Mantente al día con las actualizaciones de Manifest V3
- Las mejores prácticas de seguridad de la mano de Google
Y si todo esto te ha servido para motivarte y crear tu propia extensión de Chrome, o simplemente para disfrutar de tus vídeos en YouTube sin anuncios, estaremos encantados que nos contactes y nos expliques qué has hecho tú.