Tampermonkey: rendere permanenti le modifiche di Inspect Element

Persona che tiene un laptop e lo guarda

Introduzione

Inspect Element (o Strumenti per sviluppatori) è essenziale per sperimentare interfacce e testare modifiche al front-end di un sito web. Tuttavia, queste modifiche sono temporanee. Se vuoi mantenere una modifica solo sulla tua macchina — ad esempio aggiungere pulsanti, nascondere elementi o correggere piccoli difetti di stile — gli userscript sono la soluzione più pratica.

Tampermonkey è un’estensione per browser che gestisce userscript: piccoli script JavaScript che vengono eseguiti automaticamente sulle pagine corrispondenti. Ti permette di rendere «permanenti» le modifiche a livello locale, senza alterare il server né distribuire codice alla pagina originale.

Questa guida copre:

installazione di Tampermonkey
struttura di un userscript e direttive importanti
un esempio pratico: aggiungere un pulsante WhatsApp di condivisione
alternative, rischi e mitigazioni
checklist per sviluppatori e utenti avanzati

Cosa è Tampermonkey e come installarlo

Tampermonkey è un gestore di userscript compatibile con i principali browser: Chrome, Edge, Firefox, Opera e Safari. Ti permette di creare, modificare e abilitare/disabilitare userscript che intervengono sulle pagine caricate.

Vantaggi principali:

esecuzione automatica degli script all’apertura della pagina
editor integrato con salvataggio e versioning locale
supporto per direttive metadata (@match, @grant, @include, ecc.)

Pagina di download di Tampermonkey nel browser

Passaggi di installazione rapidi:

Apri la pagina ufficiale di Tampermonkey o cerca l’estensione nello store del tuo browser. Il sito rileverà automaticamente il browser. Se non lo fa, seleziona manualmente Chrome, Edge, Firefox, Safari o Opera.
Vai alla sezione Download e scegli “Get from Store” o il link corrispondente al tuo store.
Installa l’estensione e concedi le autorizzazioni richieste dal browser.
Al termine, l’icona di Tampermonkey apparirà nella barra delle estensioni.

Nota tecnica: se usi un browser basato su Chromium non elencato esplicitamente, dovresti comunque poter installare Tampermonkey dallo store di Chrome.

Considerazioni prima di modificare elementi di un sito

Importante: rispetta sempre i termini di uso, le policy sul contenuto e la privacy del sito. Evita di eseguire userscript su pagine che gestiscono dati sensibili (home banking, pagine mediche, pagine amministrative aziendali) a meno che tu non sia assolutamente certo del codice che stai eseguendo.

Punti chiave:

Gli userscript agiscono solo nel tuo browser e non modificano il sito per altri utenti.
Non eseguire script provenienti da fonti non affidabili.
Limita l’ambito di esecuzione con direttive come @match o @include per ridurre i rischi.

Avviare Tampermonkey e creare un nuovo script

Dopo l’installazione, puoi creare un nuovo userscript dall’icona dell’estensione o dal cruscotto di Tampermonkey:

Clicca sull’icona dell’estensione nel browser e scegli Tampermonkey.
Seleziona “Create a new script” per aprire l’editor.
Tampermonkey fornisce un header metadata di default che descrive lo script e le sue regole di esecuzione.

Esempio di header metadata pulito e funzionante:

// ==UserScript==
// @name        Nuovo Userscript
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description Esempio: aggiunge funzionalità locali
// @author      Tu
// @match       https://example.com/*
// @grant       none
// ==/UserScript==

(function() {
    'use strict';
    // Il codice va qui
})();

Spiegazione in una linea: il blocco metadata dice a Tampermonkey quando e come eseguire il tuo script (pagina, permessi, ecc.).

La direttiva @match e l’ambito dello script

@match definisce su quali URL lo script deve essere eseguito. Usa pattern precisi per limitare l’esecuzione solo alle pagine desiderate. Ad esempio:

https://example.com/* -> tutte le pagine sotto example.com
https://*.mysite.it/* -> tutte le sottodomain di mysite.it

Selezionare l’ambito corretto è una delle migliori pratiche per sicurezza e stabilità: meno pagine tocchi, minori probabilità di effetti collaterali.

Esempio pratico: aggiungere un pulsante di condivisione WhatsApp

Obiettivo: mostrare come trasformare in permanente una modifica che normalmente faresti via Inspect Element. Aggiungeremo un pulsante “Share” che apre WhatsApp Web o l’app desktop per condividere l’URL della pagina.

Scenario: il sito ha un widget di condivisione alla fine degli articoli ma non include WhatsApp. Lavoreremo su quell’area per inserire il nuovo pulsante.

Widget di condivisione di MakeUseOf senza pulsante WhatsApp

Individuare il contenitore della condivisione

Apri la pagina target e attiva Inspect Element (di solito Ctrl+Shift+C). Individua il contenitore che racchiude i bottoni di condivisione. Nell’esempio il contenitore è un div con class “sharing bottom”.

Inspect Element che evidenzia il widget di condivisione

Codice per selezionare il contenitore nell’userscript:

const sharingDiv = document.querySelector('div.sharing.bottom');

Se il sito usa un markup diverso, adatta il selettore (id, classi, attributi data-*, ecc.).

Creare e stilare il pulsante

Ecco un esempio completo, pronto per essere incollato nell’editor Tampermonkey. Salva lo script e ricarica la pagina target per vedere il pulsante.

// ==UserScript==
// @name        WhatsApp Share Button
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description Aggiunge un pulsante di condivisione WhatsApp al widget di condivisione
// @author      Tu
// @match       https://example.com/*
// @grant       none
// ==/UserScript==

(function() {
    'use strict';

    function generateWALink() {
        const pageURL = encodeURIComponent(window.location.href);
        const pageTitle = encodeURIComponent(document.title || '');
        // Aggiunge titolo e URL nel messaggio condiviso
        return `https://api.whatsapp.com/send?text=${pageTitle}%20-%20${pageURL}`;
    }

    const Whatsapp_btn = document.createElement('button');
    Whatsapp_btn.textContent = 'Share';
    Whatsapp_btn.setAttribute('aria-label', 'Condividi su WhatsApp');

    // Styling minimale; modifica come preferisci
    Object.assign(Whatsapp_btn.style, {
        backgroundColor: '#075E54',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        padding: '8px 12px',
        cursor: 'pointer',
        marginLeft: '8px'
    });

    Whatsapp_btn.addEventListener('click', () => {
        const whatsappURL = generateWALink();
        window.open(whatsappURL, '_blank');
    });

    const sharingDiv = document.querySelector('div.sharing.bottom');
    if (sharingDiv) {
        sharingDiv.appendChild(Whatsapp_btn);
    }

})();

Dopo il salvataggio e il reload della pagina, il pulsante apparirà nella posizione scelta. Se il sito usa caricamenti dinamici (AJAX), potresti dover attendere che il contenitore sia presente o usare un MutationObserver per inserire il pulsante quando l’elemento viene creato.

Esempio rapido con MutationObserver:

// Esempio semplificato: inserimento quando il contenitore appare
const observer = new MutationObserver(() => {
    const div = document.querySelector('div.sharing.bottom');
    if (div && !div.querySelector('button[aria-label="Condividi su WhatsApp"]')) {
        div.appendChild(Whatsapp_btn);
    }
});
observer.observe(document.body, { childList: true, subtree: true });

Pulsante Share di WhatsApp aggiunto alla pagina

Esempio di pulsante Share di WhatsApp nella pagina

Testare e mantenere gli userscript

Salva (Ctrl+S) nello script editor di Tampermonkey.
Controlla la console JavaScript (F12) per errori.
Usa versioning nel metadata (@version) e commenti per documentare le modifiche.
Se lo script smette di funzionare dopo aggiornamenti del sito, ispeziona il DOM e aggiorna i selettori.

Quando gli userscript falliscono e come affrontarlo

Controesempi comuni:

Il sito cambia struttura HTML: aggiorna i selettori o usa selettori più resilienti (es. data-attributes).
Contenuti caricati dinamicamente: usa MutationObserver o ritardi controllati.
Script in conflitto con altri plugin: isola il tuo codice in IIFE e usa nomi di variabili unici.

Alternative quando Tampermonkey non è adatto:

Estensioni native o plugin specifici (se disponibile una feature ufficiale)
User CSS con Stylus/Stylish per solo styling
Creare una estensione browser personalizzata per funzionalità complesse e distribuite

Buone pratiche di sicurezza

Non incollare script da fonti sconosciute. Verifica il codice riga per riga.
Limitare l’ambito con @match e @exclude per ridurre l’attacco della superfice.
Evitare @grant e permessi inutili. Se possibile usa @grant none.
Logica lato client non deve trattare dati sensibili né memorizzarli in chiaro.
Per gli script che raccolgono dati, valuta requisiti di conformità (GDPR) e privacy.

Privacy e note GDPR

Gli userscript eseguono codice nel tuo browser. Se uno script manda dati a server terzi, potresti inviare informazioni personali o URL di sessione. Prima di installare script che comunicano con server esterni:

Controlla a quale host vengono inviati i dati.
Evita script che inviano token di autenticazione o cookie.
In ambito professionale, consulta il team legale o di sicurezza prima di distribuire uno script su macchine aziendali.

Alternative e comparazione rapida

Tampermonkey: flessibile, semplice per utenti avanzati, gestisce JavaScript completo.
Greasemonkey: soluzione simile per Firefox, differenze minime nell’API.
Stylus/Stylish: ottimo per modificare solo CSS.
Estensione personalizzata: meglio per funzionalità distribuite e controllate centralmente.

Esempi di casi d’uso concreti

Aggiungere shortcut o pulsanti di condivisione
Rimuovere pubblicità client-side per test visivi locali
Forzare temi scuri personalizzati tramite CSS
Aggiungere promemoria o banner informativi per uso personale

Checklist rapida prima di eseguire uno userscript

Per l’utente avanzato:

Ho verificato il codice dello script.
@match limita l’esecuzione solo alle pagine desiderate.
Non ci sono chiamate a server esterni sospetti.
Uso @grant none se possibile.
Ho un backup o una versione precedente del mio script.

Per l’amministratore IT:

Valutata la policy aziendale sulle estensioni.
Test in ambiente sicuro prima della distribuzione.
Controllo di eventuali leak di dati attraverso lo script.

Modelli mentali e heuristics per userscript resilienti

Preferire selettori semantici (data-*) anziché classi generate automaticamente.
Trattare il DOM come volatile: usare osservatori per elementi dinamici.
Impostare timeout e retries limitati per evitare loop infiniti.
Isolare il codice in funzioni pure quando possibile.

Maturità e piano di mantenimento

Livelli:

Prototype: singolo script locale, sviluppatore singolo.
Stabilizzato: script con versioning e commenti, aggiornato regolarmente.
Distribuito: pack sotto controllo versione, testing e policy aziendali.

Piano di mantenimento consigliato:

Verifica trimestrale dopo aggiornamenti importanti del sito.
Aggiornamento del metadata @version per ogni modifica significativa.
Documentazione interna su scopi e rischi.

Suggerimenti per il design dello script

Fornisci un’opzione per abilitare/disabilitare feature (puoi usare localStorage per salvare preferenze locali).
Usa attributi ARIA e testo alternativo per accessibilità.
Implementa logging discreto per debug (con possibilità di disabilitarlo).

Esempi di test e criteri di accettazione

Test manuali principali:

Lo script appare solo sull’URL previsto.
Il pulsante si visualizza correttamente su desktop e mobile.
Cliccando si apre WhatsApp Web o la finestra corretta senza errori.
Nessuna eccezione significativa nella console JS.

Criteri di accettazione:

Il pulsante deve comparire entro 5 secondi dal caricamento o dopo la comparsa del widget.
L’URL condiviso deve essere quello della pagina corrente.
Lo script non deve leggere cookie o token di sessione.

Ruoli e responsabilità

Sviluppatore personale:

Scrive e testa lo script sul proprio ambiente.
Manutenzione minima.

Power user:

Adatta script esistenti alle proprie esigenze.
Controlla gli aggiornamenti del sito e mantiene i selettori.

IT/Amministratore:

Valuta rischi di sicurezza prima di approvare lo script in azienda.
Gestisce policy di estensioni e whitelist.

Decisione rapida per scegliere la soluzione giusta (Mermaid)

flowchart TD
  A[Vuoi modificare solo CSS?] -->|Sì| B[Usa Stylus/Stylish]
  A -->|No| C[Serve logica JS?]
  C -->|Sì| D[Usa Tampermonkey/Greasemonkey]
  C -->|No| B
  D --> E{Condividere o distribuire?}
  E -->|Sì| F[Considera estensione personalizzata]
  E -->|No| G[Mantieni userscript locale]

Conclusione

Tampermonkey è uno strumento potente per trasformare le modifiche fatte con Inspect Element in cambi persistenti a livello locale. È ideale per personalizzazioni personali, prototipi e miglioramenti di esperienza utente. Tuttavia va usato con cautela: limita l’ambito di esecuzione, verifica il codice e rispetta sempre la privacy dei dati.

Riassunto pratico:

Installa Tampermonkey dal tuo store.
Crea un nuovo script con header metadata adeguato (@match).
Ispeziona il DOM, crea gli elementi e gestisci i caricamenti dinamici.
Testa, versiona e mantieni lo script.

Important: non installare o eseguire userscript di cui non hai esaminato il codice; un singolo script malevolo può compromettere la tua privacy o sicurezza.

Riferimenti rapidi

Tampermonkey: pagina ufficiale di download (usa lo store del tuo browser)
Documentazione userscript: direttive metadata e API di Tampermonkey

Rendere permanenti le modifiche di Inspect Element con Tampermonkey