Tablytics is a privacy-first Chrome extension that helps you understand your browsing habits by tracking and visualizing your real-time activity. With a sleek dashboard, it provides a dynamic donut chart and daily summaries of the time you spend on different websites. All data is stored locally on your device, ensuring your browsing history remains private.
Features Real-Time Tracking: Monitors your active tab and logs the time spent on each domain.
Privacy-First Design: All browsing data is stored exclusively on your local machine using the Chrome Storage API. Your data is never sent to a server.
Interactive Dashboard: The popup dashboard visualizes your daily browsing activity with a dynamic donut chart.
Daily Summary: Get a quick overview of your total time spent browsing and the number of tabs you have open.
Domain-Specific Breakdown: The donut chart breaks down your time by the top domains you visit, with an "Other" category for less-frequented sites.
Low-Overhead Logging: Utilizes Chrome Alarms, Storage, and Tabs APIs to ensure efficient and accurate time tracking without impacting browser performance.
How it Works Tablytics uses a background service worker to monitor your active browser window and tab.
Tab Monitoring: When you switch tabs or a page updates, the background.js script identifies the new active domain.
Time Logging: The script continuously calculates the time spent on the active domain and periodically "flushes" this data to local storage. This ensures that time is accurately logged even if you close the browser or your computer goes idle.
Local Storage: All time-tracking data is stored in your browser's local storage under a key specific to the current day (e.g., day_2025-10-10).
Dashboard Visualization: The popup.html and popup.js files create the user-facing dashboard. When you click the extension icon, the popup requests the daily summary from the background script, which then calculates and displays the data in the form of a donut chart and other summary stats.
Technical Details Tablytics is built using standard web technologies and the Chrome Extension API.
manifest.json: Defines the extension's name, version, permissions (tabs, storage, idle, alarms), and specifies the background service worker and popup files.
background.js: The core logic for tracking time. It listens for browser events like tab activation, window focus changes, and idle state changes. It uses chrome.storage.local to persist data and chrome.alarms for periodic data flushing.
popup.html: The main user interface for the dashboard.
popup.js: Manages the frontend logic. It communicates with the background script to fetch browsing data, processes it, and renders the interactive donut chart using the Canvas API.
popup.css: Styles the dashboard to create a clean and modern user experience.
Getting Started To use Tablytics, follow these steps:
Clone this repository to your local machine.
Open your Chrome browser and navigate to chrome://extensions.
Enable Developer mode by toggling the switch in the top right corner.
Click Load unpacked and select the directory where you cloned the repository.
The Tablytics icon will appear in your browser's toolbar. Click it to view your daily browsing summary.