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.
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.