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.
Tra schede aperte, pause, ricerche e distrazioni, il browser diventa una parte importante della giornata ma raramente offre una visione chiara delle nostre abitudini.
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?
Il problema era che per ottenere questo tipo di informazioni un software deve necessariamente osservare ciò che facciamo durante la navigazione.
Per me questo rendeva la privacy una parte fondamentale del progetto, non una caratteristica aggiunta in un secondo momento.
Monitorare senza rinunciare al controllo dei dati
L'obiettivo era costruire un sistema di monitoraggio utile, ma completamente locale.
Volevo poter ottenere:
- il tempo trascorso sul sito attualmente aperto
- il totale giornaliero
- una timeline delle attività distribuita nell'arco della giornata
- una suddivisione dei siti in categorie come produttivo, neutro o distraente
- lo storico degli ultimi giorni
- una visione dei siti che assorbono più tempo
- la possibilità di esportare e cancellare i dati quando necessario
Allo stesso tempo, il sistema doveva evitare di trasformare il monitoraggio in una forma di profilazione.
Per questo il progetto salva soltanto il dominio registrabile del sito visitato. Non conserva URL completi, testo digitato, password o cookie. I dati rimangono nell'IndexedDB del browser e l'estensione non richiede account, server cloud o servizi esterni.
Come funziona
Private Web Monitor 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.
I dati raccolti vengono poi trasformati in informazioni più leggibili attraverso la dashboard.
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.
Un'applicazione local-first che vive nel browser
Il progetto è costruito con TypeScript e Manifest V3.
Il service worker gestisce la logica di monitoraggio e reagisce agli eventi del browser legati alle schede, alle finestre e allo stato di inattività.
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.
La struttura è quindi interamente locale:
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.
Le parti più difficili
1. Tracciare il tempo corretto
Misurare il tempo trascorso su una pagina non significa semplicemente avviare un timer quando una scheda viene aperta.
Bisogna considerare i cambi di scheda, il cambio della finestra attiva e i momenti in cui l'utente smette di utilizzare il computer.
Il progetto utilizza gli eventi del browser e il rilevamento dello stato di inattività per distinguere il tempo realmente trascorso davanti alla navigazione dal semplice fatto che una scheda sia rimasta aperta.
2. Gestire il ciclo di vita di Manifest V3
Con Manifest V3, la logica in background viene eseguita attraverso un service worker che può essere terminato e riattivato dal browser.
Questo rende importante progettare il monitoraggio senza dipendere da un processo sempre attivo.
Lo stato necessario deve poter essere ricostruito e sincronizzato quando gli eventi del browser riattivano il service worker. Il manifest del progetto utilizza infatti un service worker di tipo module.
3. Trasformare i log in informazioni utili
Registrare i dati è soltanto la prima parte del problema.
La dashboard deve trasformare una sequenza di eventi in qualcosa che abbia senso per una persona. Timeline, categorie, medie e trend devono quindi essere calcolati in modo coerente e presentati senza rendere l'interfaccia più complessa del necessario.
Privacy prima della raccolta dei dati
La decisione più importante del progetto è stata anche la più semplice: se i dati riguardano la navigazione dell'utente, non devono essere necessari server esterni per analizzarli.
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.
2. IndexedDB invece di un semplice storage
La quantità di dati cresce nel tempo, quindi ho scelto IndexedDB come database locale per mantenere una struttura più adatta a una cronologia di eventi rispetto a un semplice storage chiave-valore.
3. Nessun account
Non serve creare un profilo per vedere i propri dati.
L'estensione funziona direttamente nel browser e mantiene il monitoraggio associato al dispositivo su cui viene utilizzata.
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.
Un sistema di monitoraggio che non ha bisogno di conoscere l'utente
Private Web Monitor parte da una contraddizione interessante: per aiutarti a capire come utilizzi il browser deve osservare la tua attività, ma proprio per questo non dovrebbe avere bisogno di inviare quella stessa attività a qualcun altro.
La soluzione è stata mantenere tutto nel browser.
Il risultato è un'estensione che combina monitoraggio in tempo reale, storico, categorie, analisi e grafici con un'architettura local-first e senza dipendenze da servizi cloud.
Oltre il time tracking
Private Web Monitor mi ha portato a lavorare su un problema che sembra semplice, ma che richiede di coordinare diversi aspetti del browser.
Ho dovuto affrontare:
- gestione dello stato in un'estensione Manifest V3
- monitoraggio delle schede e delle finestre
- rilevamento dell'inattività
- persistenza strutturata con IndexedDB
- aggregazione dei dati
- visualizzazione di timeline e statistiche
- progettazione di un sistema completamente local-first
La parte più interessante è stata capire quanto cambia la progettazione di un'applicazione quando privacy, persistenza e analisi dei dati devono convivere senza un backend centrale.