Hacer permanentes los cambios de Inspect Element con Tampermonkey

¿Qué es Tampermonkey y por qué usarlo?

Tampermonkey es un gestor de userscripts —extensiones ligeras que ejecutan JavaScript sobre páginas web tras su carga— disponible para los navegadores principales (Chrome, Edge, Firefox, Opera, Safari, etc.). Un userscript te permite aplicar correcciones visuales, añadir funcionalidades, automatizar tareas repetitivas o integrar utilidades que el sitio original no ofrece.

Definición rápida: userscript = fragmento de JavaScript que se ejecuta automáticamente en páginas coincidentes para cambiar su comportamiento o apariencia.

Cuándo usar Tampermonkey:

• Para preservar localmente ajustes visuales o funcionales que haces con Inspect Element.
• Para añadir botones, atajos o automatizaciones personales en páginas públicas.
• Para prototipar mejoras rápidas sin crear una extensión completa.

Limitaciones importantes:

• Los cambios son locales al navegador donde instalaste Tampermonkey.
• No modifican el servidor ni afectan a otros usuarios.

Instalación de Tampermonkey (paso a paso)

Sigue estos pasos para instalar Tampermonkey en tu navegador:

1. Abre el navegador donde quieras usar el userscript.
2. Ve a la página oficial de Tampermonkey desde el navegador. El sitio detecta normalmente el navegador y muestra la versión adecuada.
3. En la página, localiza la sección “Download” o “Descargar”.
4. Haz clic en “Get from Store” (Obtener desde la tienda). Serás redirigido a la tienda de extensiones correspondiente (Chrome Web Store, Microsoft Edge Add-ons, AMO para Firefox, etc.).
5. Pulsa “Install” (Instalar) y sigue las instrucciones del navegador para añadir la extensión.

Nota: si usas un navegador basado en Chromium que no aparece en la lista, puedes instalar la extensión desde la Chrome Web Store en la mayoría de los casos.

Primeros pasos: crear un userscript

Después de instalar Tampermonkey, abrirás su editor para crear scripts nuevos:

• Haz clic en el icono de Extensiones en la barra del navegador y selecciona “Tampermonkey”.
• Elige “Create a new script” (Crear un nuevo script). Se abrirá el editor integrado.

El encabezado (metadata) por defecto de un userscript luce así:

// ==UserScript==
// @name        New Userscript
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description try to take over the world!
// @author      You
// @match       http://example.com/*
// @grant       none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
})();

Explicación rápida de los campos más relevantes:

• @name: nombre del script.
• @match / @include: expresiones que definen en qué URLs se ejecuta el script.
• @grant: permisos especiales que solicita el script (por ejemplo, GM_xmlhttpRequest). Si no los necesitas, usa none.

Consejo: limita siempre el alcance con @match para que el script solo se ejecute donde tenga sentido.

Ejemplo práctico: añadir un botón de compartir en WhatsApp

Vamos a crear un userscript que inserte un botón de “Compartir por WhatsApp” en el widget de compartir al final de los artículos (ejemplo genérico). Este ejemplo reproduce el patrón de usar Inspect Element para localizar la posición y luego inyectar el DOM y el comportamiento.

1) Crear el botón y estilo básico

// Crear botón de WhatsApp
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

// Estilos básicos
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';
Whatsapp_btn.style.cursor = 'pointer';

2) Localizar el contenedor de compartir (usando Inspect Element)

En la página, presiona Ctrl + Shift + C y selecciona el widget de compartir. Identifica la etiqueta y clases que lo contienen. En nuestro ejemplo la caja es:

 ... 

Puedes seleccionar ese elemento desde el userscript con querySelector:

const sharingDiv = document.querySelector('div.sharing.bottom');
if (sharingDiv) {
    sharingDiv.appendChild(Whatsapp_btn);
}

3) Generar el enlace de WhatsApp y adjuntar comportamiento

function generateWALink() {
    const pageURL = encodeURIComponent(window.location.href);
    return `https://api.whatsapp.com/send?text=${pageURL}`;
}

Whatsapp_btn.addEventListener('click', () => {
    const whatsappURL = generateWALink();
    window.open(whatsappURL, '_blank');
});

Al guardar el userscript (Ctrl + S) y recargar la página objetivo verás el botón. Si WhatsApp Desktop está instalado, el enlace abrirá la aplicación; en móvil abrirá la app o web dependiendo del UA.

4) Mejoras opcionales del botón

• Añadir icono SVG de WhatsApp dentro del botón.
• Usar aria-label y roles para accesibilidad.
• Detectar si el usuario está en móvil y usar https://wa.me/?text= según convenga.
• Insertar después de un elemento con insertAfter() para mantener el orden visual en el widget.

Buenas prácticas y consideraciones antes de modificar elementos

• Respeta las políticas del sitio: no inyectes código en páginas con información sensible (banking, cuentas privadas) sin entender los riesgos.
• Evita operar en páginas donde tu script pueda filtrarse a terceros o realizar acciones en segundo plano que afecten a otros usuarios.
• Firma o versiona tus scripts para poder revertir cambios.
• Mantén @match lo más específico posible y evita comodines innecesarios.

Important: un userscript malicioso o de origen desconocido puede robar datos o ejecutar acciones no deseadas. Instala únicamente scripts en los que confíes.

Alternativas a Tampermonkey

• Bookmarklets: fragmentos JavaScript guardados como marcadores. Simples y sin instalación de extensiones, pero limitados y sin persistencia automática.
• Crear una extensión del navegador: más compleja, pero adecuada para distribuir funciones a múltiples usuarios y acceder a APIs específicas del navegador.
• Greasemonkey (Firefox): otro gestor de userscripts con características similares.
• DevTools Snippets: fragmentos en la consola del navegador para tareas repetidas, pero requieren ejecución manual.
• Automatización con Puppeteer/Playwright: para cambios repetidos en entornos de testing o scraping.

Playbook: crear, probar y desplegar un userscript (SOP breve)

1. Definir objetivo claro y alcance (URLs exactas).
2. Crear repositorio/gestor de versiones para el script (Git).
3. Escribir el userscript con encabezado metadata (@name, @version, @match, @grant).
4. Incluir comentarios y un changelog mínimo dentro del script.
5. Probar en local: activar Tampermonkey en modo desarrollo y recargar páginas objetivo.
6. Validación:
   • Comprobación de UI: inserción y estilos.
   • Funcionalidad: acciones, navegación, prompts.
   • Accesibilidad: etiquetas aria, comportamiento con teclado.
7. Revisión de seguridad: analizar dependencias externas; no incluir librerías de orígenes no confiables.
8. Publicación: compartir el script en un repositorio propio o en la librería de Tampermonkey con instrucciones claras.
9. Mantenimiento: versionado, seguimiento de issues y actualizaciones.

Criterios de aceptación (Критерии приёмки)

• El botón aparece en la página objetivo sin romper otros elementos.
• El enlace generado apunta a la URL actual y codifica correctamente caracteres especiales.
• El comportamiento es consistente en escritorio y móvil (si procede).
• El script solo se ejecuta en las URLs incluídas con @match.
• No hay errores visibles en la consola causados por el script.

Pruebas y casos de aceptación

Casos de prueba básicos:

• Carga de página con widget: el botón aparece y abre WhatsApp al hacer clic.
• Página sin widget: el script no lanza errores y no añade elementos en lugares no deseados.
• URLs con query params y anclas: la URL compartida debe incluir la versión completa (window.location.href) correctamente codificada.
• Navegación SPA: si la web es una aplicación de página única (SPA), usar observers (MutationObserver) para detectar cambios en el DOM en lugar de solo ejecutar en DOMContentLoaded.

Ejemplo de patrón para SPAs:

const observer = new MutationObserver((mutations) => {
    // lógica para reinsertar el botón si el widget se renderiza después
});
observer.observe(document.body, { childList: true, subtree: true });

Seguridad, privacidad y notas de cumplimiento (GDPR/privacidad)

• Un userscript ejecutado localmente no comparte datos con terceros a menos que el propio script realice peticiones externas.
• Evita enviar datos sensibles (cookies, tokens, información personal) a servicios externos desde scripts caseros.
• Si el script recoge o transmite datos personales, documenta la finalidad y, si aplicable, obtén consentimiento.
• Para entornos corporativos, somete cualquier userscript a revisión por el equipo de seguridad antes de su uso amplio.

Important: nunca pegues ni ejecutes un userscript que no comprendas o que provenga de fuentes no confiables.

Mantenimiento y rollback (runbook)

• Para desactivar rápidamente un script: abre el panel de Tampermonkey y desactiva el script o usa el interruptor global para desactivar todos.
• Para revertir a una versión anterior: usar el control de versiones (Git) y volver a una etiqueta/versión, actualizar el script en Tampermonkey.
• Si un script causa errores en producción local: desactívalo, vacía la caché si es necesario y documenta el fallo con pasos reproducibles.

Compatibilidad y notas de migración

• Chrome / Edge / Opera: buena compatibilidad; los userscripts funcionan de manera similar.
• Firefox: Greasemonkey y Tampermonkey están disponibles, pero el comportamiento de @grant y ciertas API puede diferir.
• Safari: la extensión puede tener limitaciones y requerir pasos adicionales en versiones modernas de macOS.
• Móviles: Tampermonkey en navegadores móviles tiene soporte limitado; para experiencias móviles considera enlaces wa.me o bookmarklets.

Heurística rápida (mental model) para decidir entre userscript y extensión

• Si es una mejora personal y rápida → userscript.
• Si vas a distribuir a muchos usuarios y necesitas permisos especializados → extensión.
• Si la función interactúa con APIs del navegador o requiere persistencia segura → extensión.

Ejemplos de edge cases y cuándo falla

• SPA que recrea el nodo del widget constantemente: el botón puede desaparecer; solución: usar MutationObserver y reinsertar.
• Contenedores con estilos muy restrictivos: puede ser necesario añadir reglas CSS con !important o inyectar un stylesheet.
• Políticas CSP estrictas que bloqueen la ejecución de scripts inyectados: no hay solución simple desde Tampermonkey si el sitio impone CSP en modo que rechace ejecuciones externas.

Snippets útiles (cheat sheet)

Insertar estilo global desde userscript:

const style = document.createElement('style');
style.textContent = `
.custom-wa-btn { background: #075E54; color: white; border-radius:5px; padding: 8px 12px; }
`;
document.head.appendChild(style);

Insertar después de un nodo (insertAfter):

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Detectar si estamos en móvil:

function isMobile() {
    return /Mobi|Android/i.test(navigator.userAgent);
}

Role-based checklist (desarrollador / QA / responsable de privacidad)

Desarrollador:

• Definir @match exacto
• Añadir versionado
• Documentar dependencias

QA:

• Probar en navegadores objetivo
• Validar en móviles y escritorio
• Revisar consola en busca de errores

Responsable de privacidad:

• Revisar transmisión de datos
• Confirmar cumplimiento con políticas internas

Diagrama de decisión (uso de Tampermonkey vs alternativas)

flowchart TD
    A[Necesitas cambiar una página web?] --> B{Es personal o para muchos usuarios?}
    B -- Personal --> C[Userscript 'Tampermonkey / Greasemonkey']
    B -- Muchos usuarios --> D{Necesitas permisos del navegador o distribución?}
    D -- Sí --> E[Crear extensión del navegador]
    D -- No --> F[Distribuir userscript desde repo o librería]
    C --> G{La página es SPA?}
    G -- Sí --> H[Usar MutationObserver]
    G -- No --> I[DOMContentLoaded / carga simple]

Mantenimiento a largo plazo y buenas prácticas de comunidad

• Publica el script en un repositorio público si piensas compartirlo. Incluye instrucciones, changelog y un mecanismo para reportar bugs.
• Revisa periódicamente la compatibilidad con nuevas versiones de los navegadores.
• Evita dependencia de endpoints externos no confiables.

Resumen

Tampermonkey convierte cambios efímeros de Inspect Element en modificaciones persistentes en tu navegador instalando y ejecutando userscripts personalizados. Para pequeñas mejoras personales es una solución rápida; para distribución y funciones críticas, considera una extensión oficial. Mantén siempre buenas prácticas de seguridad, test y control de versiones.

Important: antes de instalar o ejecutar cualquier userscript, revisa su código y asegúrate de comprender qué datos maneja y dónde los envía.

Si quieres, puedo:

• Proporcionar la versión completa del userscript listo para pegar en Tampermonkey, con icono SVG y detección móvil.
• Crear una checklist imprimible para auditoría de scripts.