Perché l'ho costruito
Quando lavori davanti a un browser, alcune distrazioni diventano automatiche.
Apri una nuova scheda, fai una pausa di qualche secondo e ti ritrovi su YouTube, Reddit, Instagram o un altro sito che non avevi intenzione di aprire.
Volevo interrompere questo automatismo senza usare un servizio esterno, senza creare un sistema di monitoraggio delle mie abitudini e senza trasformare il blocker in un altro strumento da gestire continuamente.
Da qui è nato Site Blocker.
Cosa volevo ottenere
L'obiettivo non era semplicemente costruire una lista di siti da bloccare.
Volevo un'estensione che fosse in grado di:
- bloccare i siti che scelgo
- attivare rapidamente una modalità più restrittiva quando devo concentrarmi
- bloccare anche specifiche forme di contenuto, come Shorts e Reels, senza necessariamente impedire l'accesso all'intera piattaforma
- interrompere la navigazione con una piccola pausa invece di mostrare un semplice errore
- permettere un accesso temporaneo quando il blocco non è appropriato
- mantenere configurazione e funzionamento locali, senza dipendere da un account o da un backend
Il principio alla base è semplice: rendere la distrazione meno automatica, senza togliere all'utente il controllo.
Come funziona
Site Blocker combina diversi livelli di blocco che possono essere utilizzati separatamente.
Blocklist personalizzata
Puoi aggiungere i domini che vuoi evitare e modificarli direttamente dalla popup dell'estensione.
Quando un dominio viene bloccato, Site Blocker intercetta la navigazione e la sostituisce con una pagina locale dell'estensione.
Distraction-Free
La modalità Distraction-Free permette di attivare con un solo comando un insieme più ampio di blocchi, utile quando vuoi eliminare rapidamente le principali fonti di distrazione senza configurarle una per una.
Shorts, Reels e contenuti simili
Non sempre vuoi bloccare un'intera piattaforma.
Per questo Site Blocker gestisce separatamente alcuni contenuti short-form, come YouTube Shorts e Instagram Reels, intervenendo direttamente sulla pagina invece di impedire completamente l'accesso al sito.
Una pausa prima del bypass
Quando una navigazione viene bloccata, viene mostrata una pagina locale con una breve pausa guidata e un countdown.
L'obiettivo non è rendere il blocco impossibile da aggirare, ma inserire un momento di interruzione tra l'impulso e l'azione.
Quando serve, è disponibile anche un bypass temporaneo.
Quanto tempo passiamo davvero online?
Durante una giornata di lavoro è facile avere la sensazione di essere stati produttivi senza sapere realmente dove sia finito il tempo.
Volevo quindi costruire uno strumento capace di rispondere a una domanda semplice: quanto tempo passo davvero online e quali siti stanno occupando la maggior parte della mia giornata?
Per me questo rendeva la privacy una parte fondamentale del progetto, non una caratteristica aggiunta in un secondo momento.
Il Time Tracker lavora in background e registra il tempo associato alla scheda attiva.
Quando cambi scheda o finestra, il sistema aggiorna la sessione corrente. Quando il browser rileva che non sei più attivo, il conteggio viene sospeso.
Monitoraggio in tempo reale
La popup dell'estensione mostra il tempo trascorso sulla scheda attiva e il totale della giornata.
Timeline delle 24 ore
La dashboard visualizza come si distribuisce il tempo durante la giornata, permettendo di individuare rapidamente periodi di intensa attività o lunghe sessioni su determinati siti.
Categorie di produttività
I domini possono essere classificati come Productive, Neutral o Distracting per ottenere una lettura più generale delle proprie abitudini di navigazione.
Trend e riepiloghi
Lo storico degli ultimi sette giorni permette di confrontare le giornate, calcolare medie e individuare i principali siti responsabili del tempo trascorso online.
Esportazione e backup
I dati possono essere esportati in JSON o CSV e utilizzati per creare un backup locale. È inoltre possibile ripristinare i dati in un secondo momento.
1. Solo dominio, non URL completo
Il monitoraggio non ha bisogno di sapere esattamente quale pagina hai visitato.
Per questo conserva il dominio registrabile, come youtube.com o github.com, evitando di memorizzare URL completi o contenuti sensibili.
4. Export come forma di controllo
La privacy non significa soltanto "non inviare i dati a un server".
Significa anche permettere all'utente di recuperarli, esportarli e cancellarli quando vuole.
Per questo l'esportazione JSON e CSV e il backup locale fanno parte direttamente del progetto.
I dati vengono salvati in IndexedDB, utilizzato come database locale dell'estensione. La dashboard legge questi dati e li aggrega per costruire statistiche, timeline e riepiloghi senza dover comunicare con un backend remoto.
Browser → monitoraggio → IndexedDB → dashboard
Non c'è un passaggio attraverso un server centrale per raccogliere o analizzare i dati. Il repository dichiara inoltre l'assenza di analytics, telemetria e richieste di rete esterne.
Come funziona sotto il cofano
Il cuore dell'estensione è costruito attorno alle API WebExtensions e a Manifest V3.
Il blocco dei domini utilizza declarativeNetRequest, che permette al browser di gestire direttamente le regole di filtraggio.
La configurazione dell'estensione viene mantenuta nello storage del browser, mentre il service worker coordina aggiornamento delle regole, stato dell'estensione e interazione con le schede.
Per le funzionalità che richiedono di intervenire direttamente sulla pagina vengono utilizzati content script dedicati.
In questo modo Site Blocker può utilizzare due approcci diversi a seconda del problema:
- blocco a livello di rete quando deve essere impedita la navigazione
- intervento sulla pagina quando deve essere bloccata soltanto una parte del contenuto
Le parti più difficili
1. Bloccare un dominio senza fare un semplice confronto di testo
Una regola per youtube.com deve poter coprire i relativi sottodomini senza affidarsi a un semplice includes() sull'URL.
Questo richiede una normalizzazione dei domini e una gestione coerente delle regole prima che vengano trasformate nei filtri utilizzati dal browser.
2. Bloccare un contenuto senza bloccare il sito
Il caso Shorts/Reels cambia completamente il problema.
Non vuoi impedire l'accesso a YouTube o Instagram: vuoi intervenire soltanto su una determinata parte dell'esperienza.
Per questo il progetto utilizza content script e logiche specifiche per interagire con il DOM e con la navigazione interna delle piattaforme.
3. Gestire applicazioni web dinamiche
Le piattaforme moderne non ricaricano necessariamente una nuova pagina quando l'utente naviga.
URL, contenuti e struttura del DOM possono cambiare mentre la stessa applicazione rimane aperta.
Il sistema deve quindi continuare a riconoscere la navigazione e mantenere attivo il comportamento di blocco anche quando non avviene un normale page reload.
Perché l'ho costruito in questo modo
1. Niente backend
Il progetto non ha bisogno di un servizio remoto per gestire la blocklist o far funzionare il blocco.
Le impostazioni vengono mantenute localmente nel browser e il repository non implementa analytics o telemetria.
2. declarativeNetRequest
Per il blocco dei domini ho preferito delegare il filtraggio al browser invece di mantenere una logica JavaScript attiva per intercettare continuamente le richieste.
3. Nessun framework
Per un'estensione di queste dimensioni non volevo introdurre un ulteriore livello di build e dipendenze.
JavaScript, HTML e CSS sono sufficienti per gestire popup, pagina di blocco e interazioni dell'estensione.
4. Bypass temporaneo
Un sistema di blocco completamente rigido sarebbe poco pratico.
Il bypass temporaneo permette di mantenere il comportamento del blocker senza trasformarlo in un ostacolo quando l'accesso a un sito è realmente necessario.
Un blocker progettato per interrompere l'automatismo
Site Blocker è partito da un problema molto piccolo: evitare di aprire automaticamente determinati siti quando dovrei essere concentrato.
La soluzione finale è diventata qualcosa di più completo: un'estensione che combina blocco a livello di rete, interventi sulla pagina, modalità di concentrazione e una piccola interazione pensata per interrompere la navigazione impulsiva.
Il progetto rimane locale, open source e volutamente semplice nella sua architettura, ma ha richiesto di lavorare su aspetti diversi dello sviluppo browser: Manifest V3, regole dinamiche, service worker, content script, storage e applicazioni web dinamiche.
Oltre il progetto
Site Blocker mi ha costretto a lavorare su un tipo di problema diverso dal normale sviluppo di una pagina o di un'applicazione.
Ho dovuto ragionare contemporaneamente su:
- comportamento del browser
- network filtering
- applicazioni web dinamiche
- manipolazione del DOM
- persistenza locale
- esperienza utente
- compromesso tra controllo e rigidità
Il risultato non è soltanto un'estensione per bloccare siti, ma un progetto in cui UX, browser internals e architettura software devono funzionare insieme.