Avete mai visitato un sito web e pensato: «Perché quel pulsante non è dove dovrebbe essere?», «Chi ha scelto questo sfondo verde tossico?», «Dov'è la dark mode, sviluppatori?!». E poi avete aperto DevTools e avete iniziato a modificare i CSS direttamente nell'inspector, solo per vedere come sarebbe potuto apparire.

Io lo faccio di continuo. In anni di lavoro con i siti web, ho messo insieme un arsenale di cinque strumenti che mi permettono di rimodellare quasi ogni sito a mio piacimento. Non si tratta di hacking, le modifiche sono visibili solo a voi, sulla vostra macchina. In sostanza, è modding, come nei videogiochi: cambi un modello, ridipingi l'interfaccia, rimuovi elementi fastidiosi. Il sito resta uguale per tutti gli altri, ma per te diventa esattamente ciò che vuoi vedere.

💡 Panoramica rapida:

• Installa Stylish e scegli un tema già pronto su Userstyles.org, il sito cambierà prima ancora di caricarsi
• Padroneggia Blocca elemento in uBlock Origin, rimuovi qualsiasi elemento fastidioso da un sito in due clic
• Aggiungi uno user script tramite Tampermonkey, automatizza le azioni sulle tue piattaforme preferite
• Apri DevTools (F12) e modifica il sito come fosse testo, tutte le modifiche spariscono dopo il ricaricamento
• Configura Burp Suite come proxy HTTP, intercetta e sostituisci i dati al volo

1. Stylish, cambio d'aspetto istantaneo del sito

Stylish, la mia estensione browser cosmetica preferita. Applica stili personalizzati a una pagina prima che venga renderizzata. Nessun lampo del design originale che si verifica con gli user script: apri YouTube e vedi subito la tua Hello Kitty rosa, non il tema standard bianco e rosso.

L'estensione ha oltre dieci anni, attualmente è di proprietà di Similarweb e conta 2 milioni di utenti. La libreria di Userstyles.org contiene oltre mezzo milione di temi già pronti, dalle dark mode per Google Docs al retro-wave per YouTube.

Perché Stylish è sostanzialmente migliore delle modifiche manuali in DevTools? Perché gli stili sono persistenti: chiudi il browser, lo riapri domani, il tema è ancora lì. Inoltre è comodo passare da un tema all'altro con un clic se un sito ha più temi.

Cosa puoi fare:

• Attivare la dark mode su qualsiasi sito che ne sia sprovvisto
• Ripristinare il vecchio design del sito dopo un restyling (sì, probabilmente qualcuno ha già scritto uno stile del genere)
• Aumentare la dimensione del carattere o il contrasto per la leggibilità
• Nascondere elementi di distrazione come header fissi o pop-up di iscrizione

Creare il proprio stile richiede CSS. La sintassi di base è semplice: selettore, proprietà, valore. Per stili complessi, consiglio un'alternativa, Stylus, un gestore di stili open source senza telemetria.

2. UBlock Origin, blocco chirurgico degli elementi

uBlock Origin è principalmente un blocco annunci, ma la sua funzione «Blocca elemento» merita un posto a parte in questa lista. Ti permette di rimuovere qualsiasi cosa da un sito: un banner fastidioso, l'avatar di un utente che ti irrita, un contatore «3 posti rimasti in offerta», un widget meteo che occupa mezza pagina.

Ogni volta che vedo internet senza un blocco, per esempio sul computer di qualcun altro, non riesco a credere a quanta spazzatura ci sia. La gente guarda davvero YouTube con cinque inserzioni pubblicitarie in un video di dieci minuti?

Come funziona Blocca elemento: clic destro su un elemento → «Blocca elemento» → uBlock evidenzia il target e suggerisce un selettore CSS. Puoi risalire l'albero DOM ed espandere i criteri, per esempio bloccare non un banner specifico ma l'intero contenitore con l'iframe pubblicitario. Il filtro viene salvato in modo permanente.

Tecnica avanzata, la scheda «I miei filtri» nelle impostazioni. Qui puoi inserire filtri URL con caratteri jolly per vietare il caricamento di intere categorie di risorse. L'ho usato per disabilitare file JS problematici di plugin e temi WordPress durante la ricerca di conflitti di compatibilità sui siti dei clienti.

3. Tampermonkey, script per ogni occasione

Tampermonkey, lo strumento più potente di questa lista. È un gestore di userscript con 12 milioni di installazioni che ti permette di eseguire il tuo JavaScript su qualsiasi sito. Se Stylish modifica l'aspetto e uBlock rimuove il superfluo, Tampermonkey aggiunge nuovi comportamenti.

Il mio scenario numero uno: la guerra contro i pop-up anti-adblock. Conoscete il copione: visitate un sito, il blocker rimuove gli annunci e il sito lo rileva mostrando un banner «Disattiva il tuo blocker». uBlock a volte lo gestisce, ma se il sito usa classi e ID randomizzati (per aggirare i filtri), entra in gioco Tampermonkey. Scrivo uno script che cerca un elemento con un testo specifico o un'immagine e rimuove l'intero contenitore padre. Rozzo, ma funziona.

Scenari più pacifici:

• Aggiungere un pulsante «Scarica tutto» a una pagina di file
• Compilare automaticamente i form con dati standard
• Abilitare la qualità HD su YouTube di default (anche se ora esistono estensioni dedicate per questo)
• Estendere le funzionalità di amministrazione del sito aggiungendo scorciatoie da tastiera o un pannello di azioni rapide

Trovate script già pronti su Greasy Fork e OpenUserJS. Ci sono migliaia di script per ogni occasione, dal download di video ai miglioramenti dell'interfaccia di GitHub. Per operazioni sensibili (password, pagamenti) consiglio di disabilitare Tampermonkey o di aggiungere i siti alla blacklist nelle impostazioni dell'estensione.

4. Strumenti per sviluppatori, un parco giochi per esperimenti

Passo più tempo nei Chrome DevTools che in qualsiasi IDE. Sviluppare plugin per WordPress è in gran parte un processo per tentativi ed errori: immaginato → sistemato nell'inspector → mi piace → codificato. Senza DevTools sarei molto più lento.

Per i non sviluppatori, gli strumenti per sviluppatori sono un sandbox dove puoi modificare temporaneamente un sito e vedere il risultato all'istante. Apri DevTools (F12), vai alla scheda Elements, seleziona Inspect (la freccia nell'angolo del pannello) e clicca su qualsiasi parte della pagina. Modifica il testo, cambia i colori, sposta i blocchi, elimina gli elementi. Dopo il ricaricamento della pagina tutto torna alla normalità.

Lo scenario più comune per chi non programma: preparare uno screenshot o una versione per la stampa. Prima di catturare, rimuovi tutto il superfluo dalla pagina: blocchi pubblicitari, pop-up, widget di chat, colonne extra. Esporta con il pulsante Print Screen, otterrai un'immagine pulita e concisa, come se il sito fosse stato progettato così fin dall'inizio.

Nella scheda Network c'è un'altra funzione interessante: clic destro su qualsiasi richiesta → «Block request URL» o «Block request domain». La uso quando devo verificare come funziona un sito senza uno script o un font specifico, per esempio per localizzare l'origine di un conflitto su un progetto cliente.

5. Burp Suite Community Edition, intercettazione del traffico

Il metodo più hardcore dei cinque. Burp Suite è un proxy HTTP interattivo: si posiziona tra il browser e il server e può intercettare, bloccare e modificare qualsiasi richiesta o risposta. La Community Edition, la versione gratuita di PortSwigger, è più che sufficiente per fare "modding" di un sito.

Perché serve? Ci sono situazioni in cui né i CSS né il JavaScript lato client riescono a dare il risultato desiderato perché i dati arrivano dal server già nella forma "sbagliata". Burp intercetta la risposta del server prima che il browser la elabori e permette di sostituire JSON, HTML o header al volo. Il sito renderizza come se il server avesse inviato esattamente ciò che hai sostituito.

Caso reale: in un progetto, l'API restituiva una lista prodotti con il campo "available": false per le posizioni non in stock. Dovevo verificare il layout della scheda prodotto per diversi stati. Invece di intervenire sul database o chiedere allo sviluppatore backend di generare dati di test, ho intercettato la risposta in Burp, cambiato un paio di false in true e in un secondo ho visto il layout del prodotto "disponibile".

La cosa più complessa in Burp è la configurazione iniziale. Devi specificare l'indirizzo del proxy (localhost:8080) nelle impostazioni del browser e installare il certificato SSL di Burp per lavorare con i siti HTTPS. Senza il certificato, il browser segnalerà una "connessione non sicura". Nella documentazione ufficiale di PortSwigger, questo processo è descritto passo dopo passo.

⁉️🤔 Domande frequenti

È legale modificare i siti in questo modo?

Sì, perché le modifiche avvengono esclusivamente sul tuo dispositivo. Non stai violando il server, non stai rubando dati, non stai aggirando un paywall. È come cambiare la carta da parati in un appartamento: i muri sono gli stessi, l'aspetto è diverso. L'unica eccezione sono gli script automatici che generano un carico eccessivo sul server (ad esempio, parsing in loop senza ritardo). Usa buon senso.

Quale strumento scegliere se non sono affatto un programmatore?

Inizia con Stylish: installa l'estensione, vai su Userstyles.org, scegli un tema, fatto. Per bloccare elementi fastidiosi, uBlock Origin con la funzione Blocca elemento, non richiede codice. Tampermonkey e Burp Suite sono per chi è pronto a scrivere o almeno leggere codice.

Si può rompere un sito con queste modifiche?

Per te stesso, sì, può succedere. Una parte della pagina potrebbe smettere di funzionare se hai cancellato l'elemento sbagliato o coperto un pulsante importante con il tuo stile. Ma si risolve disabilitando l'estensione o resettando i filtri. Per gli altri utenti il sito rimarrà intatto, le tue modifiche sono locali.

Cosa fare se un sito rileva Tampermonkey e blocca i contenuti?

Alcuni siti verificano la presenza di estensioni via JavaScript. Prova un gestore alternativo, Violentmonkey, è meno conosciuto e viene rilevato meno spesso. Oppure esegui lo script tramite uno snippet nei DevTools (scheda Sources → Snippets), è una funzione integrata di Chrome che non viene tracciata dal sito.

C'è il rischio che l'estensione stessa mi stia spiando?

La domanda è sensata. Stylish fino al 2017 apparteneva a un diverso proprietario e in effetti raccoglieva dati. Ora l'estensione è di proprietà di Similarweb con una privacy policy pubblicata, la raccolta è anonimizzata e può essere disattivata nelle impostazioni. Se vuoi uno strumento completamente aperto senza telemetria, installa Stylus (alternativa open-source). Stesso discorso per gli script: Tampermonkey raccoglie statistiche anonime (versione, lingua, sistema operativo), disattivabili nelle impostazioni con la casella "Statistiche anonime".

Come funzionano questi strumenti su dispositivi mobili?

Su Android in Firefox puoi installare uBlock Origin e Tampermonkey come componenti aggiuntivi, è un metodo legittimo. Su iOS la situazione è peggiore: Apple limita le estensioni. Alternativa parziale, il browser Orion, che supporta le estensioni di Chrome e Firefox su iOS. Stylish su mobile funziona tramite una app separata.

Vale la pena modificare i siti per adattarli a sé?

Se sei arrivato a leggere fin qui, la risposta è probabilmente "sì". Il web non è un prodotto finito, ma materia prima. Qualcuno ha progettato l'interfaccia per un utente medio, e tu non sei medio. Hai le tue abitudini, il tuo gusto, i tuoi fattori scatenanti di fastidio.

La mia classifica personale per rapporto impegno-risultato: inizia con uBlock Origin (5 minuti su Blocca elemento, e il sito è già pulito), aggiungi Stylish per le tue piattaforme preferite (altri 10 minuti, e hai un tema scuro dove non è mai esistito), e quando vuoi automazione, apri Greasy Fork e cerca uno script già pronto per il tuo compito. DevTools e Burp sono per i casi in cui i primi tre strumenti non bastano.

Puoi iniziare in cinque minuti con una sola estensione, e in un mese non riconoscerai più il tuo browser, dopo aver messo insieme una collezione di temi, script e filtri per due dozzine di siti. È un hobby con una soglia d'ingresso bassa e un soffitto infinito. Come la personalizzazione del desktop di Windows negli anni 2000, solo che scala su tutto internet.