Smart User Scripts

1¿Qué son los Smart User Scripts?#

Los Smart User Scripts son scripts individuales con nombre, cada uno con:
🌐 patrones de URL (en qué páginas se ejecuta)
⏱ momento de ejecución (antes, durante o después de la carga)
✅ interruptor de activar/desactivar

Funcionan como Greasemonkey o Tampermonkey en los navegadores de escritorio, pero integrados directamente en tu app.

✅ Perfecto para:

• Inicio de sesión automático SOLO en la página /login
• Ocultar anuncios SOLO en las páginas de artículos (https://news.com/article/*)
• Observar cambios del DOM con MutationObserver
• Inyectar antes de que se renderice la página (document-start) para evitar destellos

Diferencia clave con la inyección rápida:
Inyección rápida = el mismo CSS/JS en TODAS las páginas
Smart User Scripts = control por script, por URL y por momento de ejecución

2Dónde encontrarlo#

Paso 4 (Permisos) → desplázate hacia abajo → tarjeta 🤖 Smart User Scripts.

Toca '+ Añadir' para crear un script nuevo. Cada script tiene:

• Nombre: se muestra en la lista del administrador
• Patrones de URL: uno por línea (admite el comodín *)
• Ejecutar en: document-end / document-start / document-idle
• Código: tu JavaScript
• Interruptor de activado

Toca cualquier fila para editar o eliminar un script.

3Ejemplos de patrones de URL#

Los patrones controlan en qué páginas se ejecuta el script. Usa * como comodín:

# Run on every page of every site
*://*/*

# Run only on example.com (any path)
https://example.com/*

# Run on ALL pages of ANY .com domain
https://*.com/*

# Run only on the /login path
https://example.com/login
https://example.com/login/*

# Run on news article pages
https://news.example.com/article/*

4Momentos de ejecución explicados#

• document-end (predeterminado)

Se ejecuta DESPUÉS de que la página termina de cargar. Es seguro y el más compatible. Úsalo para ocultar elementos, añadir botones y hacer seguimiento.

• document-start ⚡ (avanzado)

Se ejecuta ANTES de que la página se renderice. Inyecta el script en el HTML sin procesar mediante shouldInterceptRequest. Elimina los encabezados CSP. Úsalo para CSS de modo oscuro o para forzar el viewport antes de pintar el diseño.

• document-idle ⏱

Se ejecuta 1,5 segundos después de cargar la página. Es útil para captar contenido AJAX de carga tardía o ventanas modales que aparecen con retraso.

5Ejemplo 1: inicio de sesión automático solo en /login#

Coincidencia: https://myapp.com/login
Ejecutar en: document-end

// Auto-fill login form
(function() {
  var email = document.querySelector('input[type=email], input[name=email]');
  var pass  = document.querySelector('input[type=password]');
  if (email) email.value = '[email protected]';
  if (pass)  pass.value  = 'mypassword';
  // Uncomment to auto-submit:
  // var form = document.querySelector('form');
  // if (form) form.submit();
})();

6Ejemplo 2: ocultar muros de pago en páginas de artículos#

Coincidencia: https://news.site.com/article/*
Ejecutar en: document-end

// Hide paywall overlay and restore scroll
(function() {
  var overlay = document.querySelector('.paywall-overlay, .metered-content, #paywall');
  if (overlay) overlay.remove();
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
})();

7Ejemplo 3: observar contenido dinámico (MutationObserver)#

Coincidencia: *://*/*
Ejecutar en: document-end
Para elementos que aparecen DESPUÉS de cargar la página (modales y anuncios de carga diferida):

// Remove any modal/popup that appears dynamically
(function() {
  var sel = '.modal, .popup, .overlay, [class*="modal"], [class*="popup"]';
  // Remove existing ones first
  document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  // Watch for new ones
  var obs = new MutationObserver(function() {
    document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  });
  obs.observe(document.body, { childList: true, subtree: true });
  // Stop watching after 30 s to save battery
  setTimeout(function() { obs.disconnect(); }, 30000);
})();

8Ejemplo 4: forzar el modo oscuro antes de renderizar (document-start)#

Coincidencia: *://*/*
Ejecutar en: document-start
Inyecta CSS antes de que se pinte la página, sin destello blanco:

// Inject dark theme before page renders
(function() {
  var s = document.createElement('style');
  s.id = '__force_dark__';
  s.textContent = [
    'html { filter: invert(1) hue-rotate(180deg) !important; }',
    'img,video,canvas,svg { filter: invert(1) hue-rotate(180deg) !important; }'
  ].join('\
');
  (document.head || document.documentElement).appendChild(s);
})();

9Ejemplo 5: analítica / seguimiento de eventos personalizado#

Coincidencia: https://myshop.com/*
Ejecutar en: document-idle
Envía eventos personalizados cuando la página se haya estabilizado por completo:

// Track page views + button clicks
(function() {
  // Page view
  console.log('[Analytics] Page: ' + location.href);

  // Track all CTA button clicks
  document.querySelectorAll('button, .btn, a[href]').forEach(function(el) {
    el.addEventListener('click', function() {
      console.log('[Analytics] Clicked: ' + (el.textContent || el.href));
      // Replace with your own tracker call, e.g. gtag('event', ...)
    });
  });
})();

10Seguridad y limitaciones#

⚡ document-start elimina los encabezados Content-Security-Policy de la página coincidente. Úsalo solo en sitios que sean tuyos o en los que confíes plenamente.

🔒 Política del mismo origen: JS no puede acceder a iframes de otro origen (PayPal, Stripe, inicio de sesión de Google). Esto lo impone el motor del navegador y no se puede evitar.

📵 Solo HTTPS: las API como geolocalización o cámara en scripts inyectados requieren HTTPS.

✅ Protección contra doble ejecución: cada script está protegido por una marca de window para que se ejecute solo una vez por página.

✅ Funciona sin conexión: los Smart User Scripts también se ejecutan en apps sin conexión empaquetadas en ZIP.