Web Browser Screen Time Tracker

Extension Icon

Inspiration

Apple has a feature on iphone called Screen Time feature that allows you to track your daily usage and allows you to set limits on certain apps, so we thought it would be useful to have the same feature as a chrome extension.

What it does

The Web Browser Screen Time Tracker is a Chrome Extension that tracks one's screentime for each browser. The extension will generate the total duration spent on a website, such as the overall total duration. Additionally, there is an option available to set a time limit for each browser.

How we built it

We used a js, css, and html set up, the js was used in the background when chrome was active to track usage data, when the extension was opened, the popup.js file was activated and it displayed all data that the background file had saved on an indexdx database. The popup also had a display that showed what limits are currently set on certain websites. Additionally, there was a add limit button that inputted limits and updated the limits set display.

Challenges we ran into

We ran into problems trying to save usage data, at first we tried using a local database, then we tried using an interval to push the changes in background to popup, then we tried using indexddx to save the data and display it on the pop up.

Accomplishments that we're proud of

We were able to track and display user data somewhat accurately and also created an interactive interface.

What we learned

Javascript, css, and html, we also learned a few chrome extension libraries and some json to interact and set up the extension.

What's next for Web Browser Screen Time Tracker

The future for Web Browser Screen Time Tracker will include an updated system interface. The new layout would be separated into columns: Apps, Duration, and Time Limit. As opposed to the URLs showcased on the pop-up, it will be the website name instead (with the option of "showing" or "hiding" the URL). Additional tweaks will be made to the "Add limit" feature such as deleting and editing the time limit for each browser.