As highschool students who often struggle with time management, we realized that we were spending a lot of time visiting distracting websites, such as YouTube or Netflix. We decided to make a tool that would help dissuade us from visiting these websites.

What it does

Betta is a Google Chrome extension that aims to improve its users' focus. Users are responsible for their virtual pet bettas, and must stay focused to keep their fish alive. Users are able to view, access, and edit their “banned” website list through the Betta chrome extension. Visiting "banned" websites causes the fish to decrease in health, which may eventually lead to its death. Steering clear of such websites is beneficial to the betta.

How we built it

We used HTML, CSS, JavaScript, and Python Flask to create the chrome extension and website. The website’s main purpose is to introduce both the project and its team, while the chrome extension performs the intended functions.

Challenges we ran into

Our overall lack of experience proved to be especially challenging for us. As this was our first time building a Google Chrome extension, tedious processes like troubleshooting and debugging consumed a large portion of our time. None of us had previously learned the main languages that we were using; thus, we had to learn bits and pieces of each language as we went along. In particular, the JavaScript communication between the chrome extension and the websites was difficult to understand.

Accomplishments that we're proud of

We are proud of the extensive knowledge that we gained during this hackathon, including how to integrate JavaScript, CSS, and HTML into both a chrome extension and a website. Additionally, we are proud of the progress we’ve seen in ourselves following our previous hackathon. On the frontend, we experimented with a variety of new features, such as a parallax scrolling effect, a hidden navigation bar, and an animated menu. On the backend, we tackled JavaScript, a language we’d barely touched upon before. Most importantly, we’re proud to say that we were finally able to create a fully functional project.

What we learned

During this hackathon, we learned a lot about Javascript and chrome extensions. Having registered for MHacks with no Javascript experience, the past 36 hours have been a rough but effective learning process. In particular, we learned about concepts such as event listeners, the Google Chrome extension storage, and message passing, which all proved essential for our project.

What's next for Betta

Although our product is fully functional, there are still many areas on which we’d like to improve. For example, we envision a register/log-in system in the website, which would give users the choice to customize their “banned” URL list in a different setting. In terms of the extension, one of the things we’d like to improve on is integration. Currently, a lot of the communication with the user is done through alerts which, although functional, is clunky and could be replaced with better options, such as making changes in the web page itself. Our final vision for Betta is to launch the chrome extension in the Chrome Web Store and publicly host the website, making it available for all.

Share this project: