¿Alguna vez visitó un sitio web y pensó: «¿Por qué ese botón no está donde debería?», «¿Quién eligió este fondo verde tóxico?», «¿Dónde está el tema oscuro, desarrolladores?»? Y entonces abrió DevTools y empezó a editar CSS directamente en el inspector, solo para ver cómo podría verse.

Yo lo hago constantemente. A lo largo de los años trabajando con sitios web, he reunido un arsenal de cinco herramientas que me permiten remodelar casi cualquier sitio a mi gusto. Esto no es hackeo, los cambios solo son visibles para usted, en su equipo. Esencialmente, es modding, como en los videojuegos: cambia un modelo, repinta la interfaz, elimina elementos molestos. El sitio sigue igual para todos los demás, pero para usted se convierte exactamente en lo que quiere ver.

💡 Resumen rápido:

• Instale Stylish y elija un tema ya creado en Userstyles.org, el sitio cambiará antes de cargarse
• Domine Bloquear elemento en uBlock Origin, elimine cualquier elemento molesto de un sitio en dos clics
• Añada un script de usuario mediante Tampermonkey, automatice acciones en sus plataformas favoritas
• Abra DevTools (F12) y edite el sitio como si fuera texto, todos los cambios desaparecen al recargar
• Configure Burp Suite como proxy HTTP, intercepte y reemplace datos sobre la marcha

1. Stylish, cambio instantáneo de la apariencia del sitio

Stylish, mi extensión cosmética favorita para el navegador. Aplica estilos personalizados a una página antes de que se renderice. Sin el destello del diseño original que ocurre con los scripts de usuario: abre YouTube e inmediatamente ve su Hello Kitty rosa, no el tema blanco y rojo estándar.

La extensión tiene más de diez años, actualmente es propiedad de Similarweb y cuenta con 2 millones de usuarios. La biblioteca de Userstyles.org contiene más de medio millón de temas ya creados, desde modos oscuros para Google Docs hasta estilo retro-wave para YouTube.

¿Por qué Stylish es fundamentalmente mejor que las ediciones manuales en DevTools? Porque los estilos son persistentes: cierra el navegador, lo abre mañana, el tema sigue ahí. Además, es conveniente cambiar entre temas con un clic si un sitio tiene varios.

Lo que puede hacer:

• Activar el tema oscuro en cualquier sitio que no lo tenga
• Restaurar el diseño antiguo del sitio después de un rediseño (sí, probablemente alguien ya haya escrito ese estilo)
• Aumentar el tamaño de fuente o el contraste para mejorar la legibilidad
• Ocultar elementos distractores como cabeceras fijas o ventanas emergentes de suscripción

Crear su propio estilo requiere CSS. La sintaxis básica es simple: selector, propiedad, valor. Para estilos complejos, recomiendo una alternativa, Stylus, un gestor de estilos de código abierto sin telemetría.

2. UBlock Origin, bloqueo quirúrgico de elementos

uBlock Origin es principalmente un bloqueador de anuncios, pero su función «Bloquear elemento» merece un lugar aparte en esta lista. Le permite eliminar cualquier cosa de un sitio: un banner molesto, un avatar de usuario que le irrite, un contador de «quedan 3 plazas», un widget del tiempo que ocupe media página.

Cada vez que veo internet sin un bloqueador, por ejemplo en el ordenador de otra persona, no puedo creer la cantidad de basura que hay. ¿De verdad ve la gente YouTube con cinco inserciones publicitarias en un vídeo de diez minutos?

Cómo funciona Bloquear elemento: clic derecho sobre un elemento → «Bloquear elemento» → uBlock resalta el objetivo y sugiere un selector CSS. Puede subir por el árbol DOM y ampliar los criterios, por ejemplo, bloquear no un banner específico sino todo el contenedor con el iframe publicitario. El filtro se guarda de forma permanente.

Técnica avanzada: la pestaña «Mis filtros» en la configuración. Allí puede introducir filtros de URL con comodines para prohibir la carga de categorías enteras de recursos. Yo usé esto para desactivar archivos JS problemáticos de plugins y temas de WordPress al buscar conflictos de compatibilidad en sitios de clientes.

3. Tampermonkey, scripts para cualquier ocasión

Tampermonkey, la herramienta más potente de esta lista. Es un gestor de scripts de usuario con 12 millones de instalaciones que le permite ejecutar su propio JavaScript en cualquier sitio. Si Stylish cambia la apariencia y uBlock elimina lo que sobra, Tampermonkey añade comportamientos nuevos.

Mi escenario número uno: la guerra contra los pop-ups anti-adblock. Conoce el esquema: usted visita un sitio, el bloqueador elimina los anuncios y el sitio lo detecta y despliega un banner de «Por favor, desactive su bloqueador». uBlock a veces lo maneja, pero si el sitio usa clases e IDs aleatorios (para esquivar los filtros), Tampermonkey entra en juego. Escribo un script que busca un elemento con un texto o una imagen específicos y elimina todo el contenedor padre. Rudimentario, pero funciona.

Escenarios más pacíficos:

• Añadir un botón «Descargar todo» a una página de archivos
• Rellenar formularios automáticamente con datos estándar
• Activar la calidad HD en YouTube por defecto (aunque ya existen extensiones dedicadas para esto)
• Ampliar la funcionalidad de administración de un sitio añadiendo atajos de teclado o un panel de acciones rápidas

Encuentre scripts ya hechos en Greasy Fork y OpenUserJS. Hay miles de scripts para toda ocasión, desde descargar vídeos hasta mejorar la interfaz de GitHub. Para operaciones sensibles (contraseñas, pagos) recomiendo desactivar Tampermonkey o añadir los sitios a la lista negra en la configuración de la extensión.

4. Herramientas de desarrollo, campo de pruebas para experimentos

Paso más tiempo en las Chrome DevTools que en cualquier IDE. Al desarrollar plugins para WordPress, esto es en gran medida ensayo y error: lo imagino, lo ajusto en el inspector, si me gusta, lo codifico. Sin DevTools sería mucho más lento.

Para quienes no desarrollan, las herramientas de desarrollo son un entorno de pruebas donde puede modificar temporalmente un sitio y ver el resultado al instante. Abra DevTools (F12), vaya a la pestaña Elements, seleccione Inspect (la flecha en la esquina del panel) y haga clic en cualquier parte de la página. Edite texto, cambie colores, mueva bloques, elimine elementos. Al recargar la página todo vuelve a la normalidad.

El escenario más común para no programadores: preparar una captura de pantalla o una versión para imprimir. Antes de capturar, elimine de la página todo lo innecesario: bloques de anuncios, pop-ups, widgets de chat, columnas extra. Exporte con el botón Imprimir pantalla y obtendrá una imagen limpia y concisa, como si el sitio se hubiera diseñado originalmente así.

En la pestaña Network hay otra función interesante: haga clic derecho en cualquier solicitud y seleccione «Block request URL» o «Block request domain». Uso esto cuando necesito comprobar cómo funciona un sitio sin un script o una fuente específicos, por ejemplo, para localizar el origen de un conflicto en un proyecto de cliente.

5. Burp Suite Community Edition, intercepción de tráfico

El método más radical de los cinco. Burp Suite, esto es un proxy HTTP interactivo: se sitúa entre su navegador y el servidor y puede interceptar, detener y modificar cualquier solicitud o respuesta. La Community Edition, la versión gratuita de PortSwigger, es más que suficiente para el «modding» de sitios.

¿Por qué es necesario? Hay situaciones en las que ni el CSS ni el JavaScript del lado del cliente pueden dar el resultado deseado porque los datos llegan del servidor ya en la forma «incorrecta». Burp intercepta la respuesta del servidor antes de que el navegador la procese y le permite sustituir JSON, HTML o cabeceras sobre la marcha. El sitio se renderiza como si el servidor hubiera enviado exactamente lo que usted sustituyó.

Caso real: en un proyecto, la API devolvía una lista de productos con el campo "available": false para las posiciones que no estaban en stock. Necesitaba comprobar la maquetación de la ficha de producto para diferentes estados. En lugar de meterme en la base de datos o pedirle al desarrollador backend que generara datos de prueba, intercepté la respuesta en Burp, cambié un par de false por true y en un segundo vi la maquetación del producto «disponible».

Lo más complicado de Burp es la configuración inicial. Usted necesita especificar la dirección del proxy (localhost:8080) en los ajustes del navegador e instalar el certificado SSL de Burp para trabajar con sitios HTTPS. Sin el certificado, el navegador se quejará de una «conexión insegura». En la documentación oficial de PortSwigger, este proceso se describe paso a paso.

⁉️🤔 Preguntas frecuentes

¿Es legal modificar sitios de esta manera?

Sí, porque los cambios ocurren exclusivamente en su dispositivo. Usted no está hackeando el servidor, no está robando datos, no está eludiendo un muro de pago. Es equivalente a cambiar el papel tapiz de un apartamento: las paredes son las mismas, solo se ve diferente. La única excepción son los scripts automatizados que generan una carga excesiva en el servidor (por ejemplo, analizar en bucle sin pausa). Sea razonable.

¿Qué herramienta debería elegir si no soy programador?

Empiece con Stylish: instale la extensión, vaya a Userstyles.org, elija un tema y listo. Para bloquear elementos molestos, uBlock Origin con la función Bloquear elemento, no requiere código. Tampermonkey y Burp Suite son para quienes están listos para escribir o al menos leer código.

¿Se puede romper un sitio con estas modificaciones?

Para usted mismo, sí, puede. Parte de la página podría dejar de funcionar si eliminó el elemento equivocado o cubrió un botón importante con su estilo. Pero esto se soluciona desactivando la extensión o restableciendo los filtros. Para otros usuarios, el sitio permanecerá intacto, sus cambios son locales.

¿Qué hacer si un sitio detecta Tampermonkey y bloquea el contenido?

Algunos sitios verifican las extensiones mediante JavaScript. Pruebe un gestor alternativo, Violentmonkey, es menos conocido y se detecta con menos frecuencia. O ejecute el script a través de un fragmento en DevTools (pestaña Sources → Snippets), esta es una función integrada de Chrome que el sitio no rastrea.

¿Existe el riesgo de que la propia extensión me esté espiando?

La pregunta es razonable. Stylish hasta 2017 pertenecía a un dueño diferente y efectivamente recolectaba datos. Ahora la extensión es propiedad de Similarweb, con una política de privacidad publicada; la recolección es anónima y se puede desactivar en la configuración. Si quiere una herramienta completamente abierta sin telemetría, instale Stylus (alternativa de código abierto). De manera similar para los scripts: Tampermonkey recolecta estadísticas anónimas (versión, idioma, SO), que se desactivan en la configuración con la casilla «Estadísticas anónimas».

¿Cómo funcionan estas herramientas en dispositivos móviles?

En Android, en Firefox puede instalar uBlock Origin y Tampermonkey como complementos, este es un método legítimo. En iOS la situación es peor: Apple restringe las extensiones. Una alternativa parcial es el navegador Orion, que admite extensiones de Chrome y Firefox en iOS. Stylish en móviles funciona a través de una aplicación independiente.

¿Vale la pena modificar los sitios a su gusto?

Si ha leído hasta aquí, la respuesta probablemente es «sí». La web no es un producto terminado, sino materia prima. Alguien diseñó la interfaz para un usuario promedio, y usted no es promedio. Usted tiene sus propios hábitos, su propio gusto, sus propios detonantes de molestia.

Mi top personal por relación esfuerzo-resultado: empiece con uBlock Origin (5 minutos en Bloquear elemento y el sitio ya está limpio), agregue Stylish para sus plataformas favoritas (otros 10 minutos y tendrá un tema oscuro donde nunca lo hubo), y cuando quiera automatización, abra Greasy Fork y busque un script ya hecho para su tarea. DevTools y Burp son para esos casos en que las tres primeras herramientas no son suficientes.

Puede empezar en cinco minutos con una extensión, y en un mes no reconocerá su navegador, tras haber reunido una colección de temas, scripts y filtros para dos docenas de sitios. Este es un pasatiempo con un umbral de entrada bajo y un techo infinito. Como la personalización del escritorio de Windows en los años 2000, solo que se escala a todo internet.