COVID-19 has infiltrated all of our lives, making it more difficult to get things done in the comfort of our own homes. Most of us are glued to our laptops and computers for a majority of the day, but between Zoom meetings and classes, we're likely wasting time on social media sites. The inspiration for this Google Chrome extension came from the fact that it's easy to lose track of how much time we're wasting when we're on our computers all day. Seeing this information in the form of a graph will help to snap us back to reality. We also believe that time spent on social media plays a huge role in health, which is a conversation that is more frequently brought up now that we're at home.
This Chrome extension keeps track of how much time is spent on different selected webpages. Each time the extension is clicked on in Chrome, it will update from the last time the popup was viewed. The popup offers 3 ways to view the data: pie chart, bar graph, and in a table. On each new day, the user has the option of clearing the data from the previous day.
A mockup for the extension was made using Figma. We built this extension using HTML, CSS and Bootstrap, and JavaScript. Local storage was used to store the domains and times. We also utilized libraries such as chart.js to simplify the data visualization.
Programming Chrome extensions was a learning curve and most of the team members were new to JavaScript. We also ran into issues laying out the information within our popup so we has to spend a considerable amount of time debugging our code.
We're proud of completing a basic, functional Chrome extension in the given amount of time. Programming Chrome extensions was new to most of us but the experience was great and we got to meet new people.
By doing this project, each of us had the chance to add new languages to our technical skillset, such as JavaScript and CSS. We also got the chance to collaborate with new people and learned how to use branches in GitHub in order to encapsulate our changes.
The next step for this project is to add a timer so that we're able to restrict our time on each website. Once a timer and set and surpassed, a popup message will notify the user. Even after COVID-19 is behind us, we think that most people will opt to hold meetings/classes at home, so we're optimistic that this extension will help a lot of people to stay productive in the future.
- bootstrap
- chrome
- css
- html
- javascript
- chart.js