Focus Campfire

A simple google extension that visualizes the time you spend working on 'productive tabs' with a small campfire that grows according to said time, and one that diminishes as you go on other sites.

Comment

Inspiration

We were inspired by productivity apps like Forest, which encouraged users to stay on certain apps to prevent distractions using small idle activities, like growing a tree.

What it does

Focus Campfire visualizes concentration with a small campfire overlay on the bottom of the screen. The more the user spends time on inputted 'productive' tabs, the larger the fire grows. However, if they leave these tabs for extended periods of time, the fire slowly diminishes and eventually extinguishes itself.

How we built it

We built a Google Chrome extension with Manifest v3, HTML, CSS, and Javascript, mostly using Chrome tab API to monitor tab usage and relevant URLs to calculate the time the user spends being 'productive'. Then, using Chrome scripting API, we injected an overlay component onto compatible websites that give the user a visualization of their concentration.

Challenges we ran into

The hardest part of this endeavor was definitely the javascript injections, especially since Manifest v3 made a lot of the documentation online obsolete due to a large scale overhaul between v2 and v3.

Accomplishments that we're proud of

This was our first time working with Google Extensions, and we weren't particularly experienced using HTML/CSS/Javascript. As a result, we are very proud that our campfire visualization is successfully injected and changes based on the time spent on different tabs.

What we learned

Since we weren't extremely experienced with HTML/CSS/Javascript, this project allowed us to familiarize ourselves with these languages and understand how browser extensions are developed.

What's next for Focus Campfire

We would love to continue developing aspects of the extension that we did not have time to complete. For example, we would like to add a shop using a "marshmallow" currency to buy small rewards such as cosmetics. This would incentivize the user to focus to earn the rewards.

Share this project:

Updates