CSS / JS Quick Injection

1¿Qué es CSS/JS Quick Injection?#

Quick Injection añade el MISMO CSS y JavaScript a CADA página que carga tu app, sin condiciones ni reglas por sitio.

Piénsalo como una hoja de estilos global y un script de inicio global que siempre se ejecutan, sin importar en qué página esté el usuario.

✅ Perfecto para:

• Ajustes de marca (colores, fuentes, logotipo)
• Ocultar elementos globales (encabezado, pie de página, banner de cookies)
• Pequeños ajustes de diseño o tamaño de fuente para todas las páginas
• Añadir un botón flotante global (WhatsApp, chat, volver arriba)

❌ NO está diseñado para:

• Ejecutar código solo en URLs específicas → usa Smart User Scripts en su lugar
• Automatizaciones complejas con temporización → usa Smart User Scripts

2Dónde encontrarlo en el generador#

Paso 4 (Permisos) → desplázate hacia abajo → tarjeta 🎨 CSS / JS Quick Injection.

Dos cuadros de texto:

• 🎨 Custom CSS: pega reglas CSS sin procesar
• ⚡ Custom JavaScript: pega JS sin procesar (no hace falta envolverlo)

Ambos son opcionales. Déjalos vacíos para omitirlos.

3Ejemplo 1: ocultar el banner de cookies y el encabezado#

Elimina globalmente un encabezado fijo y la ventana emergente de cookies en todas las páginas:

/* ── Hide header & nav ── */
header, nav, .navbar, #top-bar, .site-header {
  display: none !important;
}

/* ── Remove cookie/GDPR banners ── */
.cookie-banner, #cookie-notice, .gdpr-popup,
[id*="cookie"], [class*="cookie"] {
  display: none !important;
}

4Ejemplo 2: modo oscuro completo (solo CSS)#

Convierte cualquier sitio web a modo oscuro con un solo filtro CSS; las imágenes se mantienen naturales:

/* ── Dark Mode via CSS filter ── */
html {
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Keep images & media in original colors */
img, video, canvas, svg, picture {
  filter: invert(1) hue-rotate(180deg) !important;
}

5Ejemplo 3: corrección de escala / zoom#

¿Tu sitio web se ve diminuto o demasiado grande en el móvil? Corrige el nivel de zoom:

/* 85% scale — adjust to your needs */
body {
  zoom: 0.85;
}

/* Force readable font size */
body, p, li, td {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

6Ejemplo 4: botón flotante de WhatsApp (JS)#

Añade un botón flotante de contacto de WhatsApp en todas las páginas (reemplaza el número de teléfono):

// Floating WhatsApp button
(function() {
  if (document.getElementById('__wa_fab__')) return;
  var btn = document.createElement('a');
  btn.id = '__wa_fab__';
  btn.href = 'https://wa.me/1234567890?text=Hello';
  btn.style.cssText = [
    'position:fixed','bottom:24px','right:20px',
    'width:56px','height:56px','border-radius:50%',
    'background:#25D366','color:#fff','font-size:26px',
    'display:flex','align-items:center','justify-content:center',
    'text-decoration:none','z-index:999999',
    'box-shadow:0 4px 12px rgba(0,0,0,.35)'
  ].join(';');
  btn.textContent = '💬';
  document.body.appendChild(btn);
})();

7Ejemplo 5: aceptar cookies automáticamente (JS)#

Haz clic automáticamente en 'Aceptar' en los diálogos de consentimiento de cookies:

// Auto-accept cookie banners
(function() {
  var selectors = [
    '.accept-cookies','#accept-btn','#cookie-accept',
    'button[id*="accept"]','button[class*="accept"]',
    '[aria-label*="Accept"]'
  ];
  selectors.forEach(function(sel) {
    var el = document.querySelector(sel);
    if (el) el.click();
  });
})();

8Cómo funciona por dentro#

• El CSS se inserta como una etiqueta <style id=\'__userscript_css__\'> en el <head> de la página después de la carga.
• El JS se inserta como una etiqueta <script id=\'__userscript_js__\'> después de la carga.
• Ambos se ejecutan en CADA página después de onPageFinished, incluida la navegación hacia atrás.
• La doble inyección se bloquea comprobando primero el ID del elemento.
• También funciona en apps ZIP sin conexión.

⚠️ Limitación: se ejecuta DESPUÉS de cargar la página. Los scripts de ejecución temprana de la página pueden haberse ejecutado ya. Para inyectar antes de la carga usa Smart User Scripts (document-start).