Inspiration
The project originated from our team's hope to address some problems that people are facing in the middle of the pandemic. One of the issues we discussed was being more present and mindful in different activities, especially because we need to stay in front of our screens most of the time now and can be distracted easily. We thought about the screen time monitor app on iPhones, and we wanted to create a similar screen time monitor/checker/reminder for web browsers.
What it does
Our screen time monitor is a Chrome extension that displays the the top five websites where the user has spent most of their time on. The results is shown in a pie chart. As of right now, the pie chart updates every 5 seconds.
How we built it
We used HTML/CSS and JavaScript, as well as functionalities from the Chrome extension libraries and packages.
Challenges we ran into
None of us have built a Chrome extension before, so learning it took some time getting used to. One main challenge we ran into was connecting the browser data collected in the background to the visualization in the front-end. We had trouble exporting JavaScript functions and objects across files. In the end we used a Message Passing functionality between the background and the display.
We also had some issue with incorporating an external script for a chart display library, due to some security policy on Chrome's end. We solved this by copy-pasting the library's open-source file to our local directory.
Accomplishments that we're proud of
We were able to scope down the initial idea, so it was very feasible for us to complete a working MVP during the hackathon!
What we learned
How to build a Chrome extension, for one. Also, we learned how to work within constraints set by the Chrome packages.
What's next for Chrome screen time monitor
There are some features that we didn't include in our MVP. One immediate improvement would be enabling data persistency across browser window switches. Some additional features for a web browser screen time monitor could be recording data for an extended time period, eg. the past week. The monitor could also send reminders if, say, the user has spent five hours on Google Doc, which might suggest they've been working for too long. User studies would be necessary for all of these improvements as well.
Log in or sign up for Devpost to join the conversation.