When trying to get work done from home, our entire team felt that we got sidetracked when browsing random websites and ended up not getting our work done as fast as a result. One teammate then mentioned how he’d disabled his internet to get work done. However, he couldn’t get online work done with this method. Then, another person mentioned we could just block the websites that were distracting him, and we set out to make it a reality. Along the way, we came up with the ideas to track time so we could give free time in case the person wanted a break, as well as adding features like active time so the extension would only run when the person planned to get work done.

What it does

The app, being a Chrome extension, is loaded into Chrome from the Extensions Manager. From there, one only has to go to the settings page to setup the extension and they’re on their way! They can add websites to a blocklist, which prevents them from being accessed without having done any work. They can also control things such as when the extension blocks the websites, how much free time they’re allowed for every minute of work, and other features, like redirecting websites to a productive url if you’re trying to focus on getting a specific task done.

How we built it

The app’s backend is built purely out of JavaScript since it is a Chrome Extension. All the scripts are written in JS and any part of the timer that requires logic/code is in JS as well. The frontend is customized through HTML and CSS. However, the JS that the app uses is part of a Chrome Web Developer API which works in a different way than reading or writing to a JSON file.

Challenges we ran into

As we were building the blocklist implementation, we originally were reading and writing to a file. However, to make it easier on ourselves, we used Node.js which was unfortunately a server-side program. We tried using Browserify to allow Chrome to read and write to a file but the File System module was not supported even through Browserify. Upon reading the Chrome API, we learned that Chrome had storage set aside for extensions which we ended up utilizing for storing and retrieving all our data. However, this Chrome API led to another challenge for us. We had to use arrays to store the blocklist and we were extremely unfamiliar with the Chrome API which led to hours of experimentation to get the code to run how we wanted it to. Another aspect of the Chrome API that confused us was taking one tab’s url and comparing it to multiple “blocked” urls. The syntax for chrome.tabs.query was also quite confusing to understand.

Accomplishments that we’re proud of

One thing that was a constant pain point for our team was trying to get our js scripts to write things to the storage on Chrome. After a lot of trouble with the API, we managed to not only write to storage but also make it so the storage syncs across all Google platforms, so your settings are saved when you switch devices.

Another accomplishment we’re proud of is our settings page, which we spent a lot of time polishing and refining. We didn’t have much experience with HTML and CSS so being able to make a nice looking webpage was not a challenge, but something new and interesting to attempt. (That, and being able to read inputs from a website was a bit annoying to get through)

One final triumph was the core functionality of our extension, the timer class. At first, the code was working without a problem, but as we added more and more features to our program, the timer had to be reworked to work with them as well as handle any bugs that popped up from all the disparate code interfering.

What we learned

We learned how to code our Chrome extension using JavaScript, as well using an open source runtime environment known as Node.js even though we ended up not using it. We also learned how to use the Chrome API to make our code compatible with Chrome and appear as an extension on the platform.

What's next for Minute for Minute

The future for Minute for Minute is unknown as of now. Currently, the app has all the features we wanted to implement. However, if there are exceptions or bugs that pop up, we’ll be here to make sure the app performs how we designed it to. If we think of more features that we feel will boost productivity even more, then we will come back to this project and add more. Once we feel comfortable with the app’s progress and performance, we also hope to bring it to the Chrome extension store so that anybody will easily be able to use it.

Share this project: