Productivity Under the Sea

Inspiration

Inspired by productivity apps like Pomodoro and Forest, we wanted to create a Chrome Extension that would aid students and professionals alike to stay focused and avoid the typical distractors that’ll easily take away from our work flow. Given the “Under the Sea” theme, your work will be “flooded” under the sea with a fish companion if you don’t work hard and stay focused on the right tabs.

What it does

Our Chrome Extension works by storing a user inputted list of URLs that are deemed unproductive. This feature is available through the settings icon in the top right corner of the pop-up. In the pop-up, users input a number of minutes that they’re allowed to spend on unproductive tabs. If a user switches to an unproductive tab during their work period, the timer will start ticking. However, if the user switches back to an allowed tab, the time will pause until another unproductive tab is used. As the timer counts down, the screen fills up with water and a swimming fish appears on the screen, until the entire page is flooded. The unproductive page will be unresponsive to the user once it’s filled with water and the timer is done, forcing the user to be productive.

How we built it

To make this Chrome Extension, we used JavaScript, CSS, Manifest V3, and Git. We first created a manifest.json file in order to communicate our code with Chrome. Next we had two separate HTML, CSS, and JavaScript files, one for the pop-up, another for the for the settings webpage. We stored our blocked websites list and the time at which the countdown ends in the localStorage. We animate water to fill the page proportional to how much time has elapsed by using keyframes and transforms in conjunction.

Challenges we ran into

As this was our first time creating a Chrome Extension and interacting with HTML, CSS, and JavaScript, building our Chrome Extension had a hefty learning curve. One challenge we ran into was having a mechanism that stores the time remaining on the countdown without having a complicated mechanism to sends information back and forth from localStorage given every user action. We also ran into difficulties implementing the water and fish animation, especially making sure it occurred in time with the countdown. At the start, the water only showed on the very bottom part of the screen. This was simply due to the layers being in the wrong order, with our water overlaying not on top of the existing screen but below. We fixed this by increasing the z-index for the water div so it showed on top. While the solution was simple, it took time to recognize. Another problem was pages being blocked or our animation not showing up on certain tabs. This was due to Chrome's Content Security Policy (CSP), which we learned about and were able to resolve by adding web accessible resources to our manifest json file. Finally, we found it difficult to time the animations with our countdown timer. We solved this by making a variable for animation duration that was updated by accessing the user’s input value for the timer.

Accomplishments that we’re proud of

We got the timer to store and update properly by simply storing the future time at which the timer must go off. Then, every time the pop-up is opened, the application takes the future time from localStorage and calculates the time remaining given the at which the pop-up is opened. Also, the fish animation was flipped by having a scaleX(-1) transform in 0.1% of a keyframe time, which allowed it to seamlessly swim across the page and added to our design.

What we learned

We learned about load unpacking and reloading to test our code in Chrome. We have a better understanding of browser architecture and behavior like event handling and DOM manipulation. We also learned more about HTML, CSS, and JavaScript workings and syntax, which were somewhat new to us.

What’s next for Productivity Under the Sea

We want to improve the animations of the water and the UI of the webpage and pop-up. We hope to have continuous animations among all unproductive tabs and add more flexibility the time restrictions.