Iniezione rapida CSS / JS

1Che cos'è l'iniezione rapida CSS/JS?#

L'iniezione rapida aggiunge lo STESSO CSS e JavaScript a OGNI pagina che la tua app carica: nessuna condizione, nessuna regola per singolo sito.

Pensalo come un foglio di stile globale e uno script di avvio globale che girano sempre, qualunque sia la pagina in cui si trova l'utente.

✅ Perfetto per:

• Ritocchi al marchio (colori, caratteri, logo)
• Nascondere elementi globali (intestazione, piè di pagina, banner dei cookie)
• Piccole correzioni di layout o di dimensione dei caratteri per tutte le pagine
• Aggiungere un pulsante mobile globale (WhatsApp, chat, torna su)

❌ NON pensato per:

• Eseguire codice solo su URL specifici → usa invece gli Smart User Scripts
• Automazioni complesse con tempistiche → usa gli Smart User Scripts

2Dove trovarlo nel generatore#

Passaggio 4 (Autorizzazioni) → scorri verso il basso → scheda 🎨 Iniezione rapida CSS / JS.

Due caselle di testo:

• 🎨 CSS personalizzato: incolla regole CSS pure
• ⚡ JavaScript personalizzato: incolla JS puro (non serve racchiuderlo in nulla)

Entrambe sono facoltative. Lasciale vuote per saltarle.

3Esempio 1: nascondi banner dei cookie e intestazione#

Rimuovi ovunque un'intestazione fissa e il popup del consenso ai cookie su ogni pagina:

/* ── 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;
}

4Esempio 2: modalità scura completa (solo CSS)#

Rendi scuro qualsiasi sito con un solo filtro CSS: le immagini restano naturali:

/* ── 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;
}

5Esempio 3: correzione di scala / zoom#

Il sito sembra minuscolo o troppo grande su mobile? Correggi il livello di 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;
}

6Esempio 4: pulsante WhatsApp mobile (JS)#

Aggiunge un pulsante mobile di contatto WhatsApp su ogni pagina (sostituisci il numero di telefono):

// 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);
})();

7Esempio 5: accetta automaticamente i cookie (JS)#

Fai clic automaticamente su 'Accetta' nelle finestre di consenso ai cookie:

// 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();
  });
})();

8Come funziona internamente#

• Il CSS viene inserito come tag <style id=\'__userscript_css__\'> nell'<head> della pagina dopo il caricamento.
• Il JS viene inserito come tag <script id=\'__userscript_js__\'> dopo il caricamento.
• Entrambi vengono eseguiti su OGNI pagina dopo onPageFinished, anche nella navigazione all'indietro.
• La doppia iniezione viene evitata controllando prima l'ID dell'elemento.
• Funziona anche nelle app ZIP offline.

⚠️ Limitazione: viene eseguito DOPO il caricamento della pagina. Gli script della pagina che si eseguono per primi potrebbero essere già partiti. Per l'iniezione prima del caricamento usa gli Smart User Scripts (document-start).