Building My Productivity & Focus App — Day 1

Struggling to stay focused? Me too. That’s why I’m building a Chrome extension to track my web activity and help me take back control of my time. I’ve always struggled to stay focused when working, and I get easily distracted by browsing the web.
To fix this, I decided to build a Chrome extension that tracks my browsing habits. The goal is to collect data on how I spend time online, so I can later analyze it and figure out how to be more productive.
An app that records my web activity and shows me clear data, so I can better understand my habits and improve. integrating AI onto of my application to help me analyze and make more productive suggestions and decisions based on my end goal.
What am I building?
• A Chrome extension to track URLs and time spent on sites
• A backend to store and manage this data (using Node.js and Postgres)
• A simple UI so users can see their stats
• AI to help improve focus, based on user goals Why this project?
Why am I building this?
• To learn back-end development
• To explore AI integration
• To build something useful for myself and others
• Ultimately, to prepare for a job in backend development
The process so far:
• Architecture
I’m using a background script in the Chrome extension that listens to browsing events via the webRequest API. It captures URLs and timestamps when the user visits or switches tabs. This data is sent securely to a backend API built with Node.js, which stores it in PostgreSQL. I’m leveraging both relational tables and JSON fields for flexibility in querying and analyzing the data. The backend also exposes endpoints to serve aggregated statistics to the UI. Once the core is stable, I’ll integrate AI modules to analyze browsing patterns and suggest productivity improvements.
• Tech stack and choices
I chose Node.js for the backend due to my familiarity with JavaScript and its strong ecosystem. PostgreSQL gives me the flexibility to handle both structured and semi-structured data, which fits well with tracking web usage logs. For browsing data, Chrome’s webrequest API provides what I need for accurate event tracking. Python will be used later for building the AI component, since that is the industry standard.
• Challenges and considerations
Privacy:
Since tracking browsing behavior is inherently sensitive, I'm designing the extension to collect only essential data (URLs and timestamps). Users will be fully informed about what’s collected, and why — with explicit permissions and a transparent UI. The goal is to empower, not spy. Because this app runs mostly in the background, I’m putting extra emphasis on building a clear and reassuring user experience so the user knows what is going on.
Data filtering and activity inference :
A few challenges arose when thinking about the data pipeline. Some websites load dozens of assets and third-party requests, which could clutter the logs. Also, how do I know if the user is actively using a page versus having it open in the background? These are design questions. For example, detecting user input or measuring time on a focused tab may give a better signal of engagement.
These are some questions that came to mind quickly after starting the build.
• Next steps
My focus now is to finalize a clean data pipeline and build a simple UI to visualize usage data. After that, I’ll refined everything and once stable I will start to implement AI modules in Python to analyze behavior patterns and offer personalized productivity tips.
Subscribe to my newsletter
Read articles from Elias Ekberg Gasper directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
