Smart User Scripts

1Cosa sono gli Smart User Scripts?#

Gli Smart User Scripts sono script singoli con un nome, ciascuno con:
🌐 pattern di corrispondenza URL (su quali pagine eseguirlo)
⏱ momento di esecuzione (prima, durante o dopo il caricamento)
✅ interruttore Attiva/Disattiva

Funzionano come Greasemonkey o Tampermonkey nei browser desktop, ma sono integrati direttamente nella tua app.

✅ Perfetto per:

• Accesso automatico SOLO nella pagina /login
• Nascondi gli annunci SOLO nelle pagine degli articoli (https://news.com/article/*)
• Osserva le modifiche al DOM con MutationObserver
• Inietta prima del rendering della pagina (document-start) per evitare lampi

Differenza chiave rispetto a Quick Injection:
Quick Injection = stesso CSS/JS su TUTTE le pagine
Smart User Scripts = controllo per script, per URL e per momento di esecuzione

2Dove trovarlo#

Passaggio 4 (Autorizzazioni) → scorri in basso → scheda 🤖 Smart User Scripts.

Tocca '+ Aggiungi' per creare un nuovo script. Ogni script ha:

• Nome: mostrato nell'elenco del gestore
• Pattern di corrispondenza URL: uno per riga (supporta il carattere jolly *)
• Esegui a: document-end / document-start / document-idle
• Codice: il tuo JavaScript
• Interruttore di attivazione

Tocca una riga qualsiasi per modificare o eliminare uno script.

3Esempi di pattern di corrispondenza URL#

I pattern stabiliscono su quali pagine viene eseguito lo script. Usa * come carattere jolly:

# 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/*

4Il momento di esecuzione spiegato#

• document-end (predefinito)

Viene eseguito DOPO il termine del caricamento della pagina. È la modalità più sicura e compatibile. Usalo per nascondere elementi, aggiungere pulsanti, tracciare.

• document-start ⚡ (avanzato)

Viene eseguito PRIMA del rendering della pagina. Inietta lo script nell'HTML grezzo tramite shouldInterceptRequest. Rimuove gli header CSP. Usalo per il CSS della modalità scura o per forzare il viewport prima del layout.

• document-idle ⏱

Viene eseguito 1,5 secondi dopo il caricamento della pagina. Utile per intercettare contenuti AJAX caricati in ritardo o finestre modali che compaiono dopo un po'.

5Esempio 1: accesso automatico solo su /login#

Corrispondenza: https://myapp.com/login
Esecuzione: 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();
})();

6Esempio 2: nascondi i paywall nelle pagine degli articoli#

Corrispondenza: https://news.site.com/article/*
Esecuzione: 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';
})();

7Esempio 3: osservare i contenuti dinamici (MutationObserver)#

Corrispondenza: *://*/*
Esecuzione: document-end
Per gli elementi che compaiono DOPO il caricamento della pagina (modali a caricamento ritardato, annunci):

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

8Esempio 4: forzare la modalità scura prima del rendering (document-start)#

Corrispondenza: *://*/*
Esecuzione: document-start
Inietta il CSS prima che la pagina venga disegnata, senza lampi bianchi:

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

9Esempio 5: analytics ed eventi personalizzati#

Corrispondenza: https://myshop.com/*
Esecuzione: document-idle
Invia eventi personalizzati quando la pagina si è completamente stabilizzata:

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

10Sicurezza e limitazioni#

⚡ document-start rimuove gli header Content-Security-Policy per la pagina corrispondente. Usalo solo su siti tuoi o di cui ti fidi esplicitamente.

🔒 Same-Origin Policy: il JS non può accedere agli iframe cross-origin (PayPal, Stripe, login Google). Lo impone il motore del browser e non si può aggirare.

📵 Solo HTTPS: API come la geolocalizzazione o la fotocamera negli script iniettati richiedono HTTPS.

✅ Protezione contro la doppia esecuzione: ogni script è protetto da un flag della finestra, così viene eseguito una sola volta per pagina.

✅ Funziona offline: gli Smart User Scripts vengono eseguiti anche nelle app offline in bundle ZIP.