Inspiration
Since the advent of smart technology, there are a growing number of distractions vying for our attention. Through the COVID-19 Pandemic and Virtual Learning, the effects of these distractions became apparent, impeding our ability to complete daily work. This is where our Chrome Extension, HyperFocus, comes into play.
What it does
HyperFocus, our Chrome Extension, is a website blocker that doesn't allow the user to access a default set of website we deemed as distractions. In addition, the user is able to enter custom domain names for our extension to block, through our simple popup screen.
How we built it
As HyperFocus is a Chrome Extension, we used Javascript, HTML, and CSS, along with different Chrome APIs to build our extension. HyperFocus constantly runs in the background, making sure the domain name of the active tab is an approved extension. If the domain name belongs to a blocked website, our extension replaces the HTML of the webpage, rendering all webpages belonging the the blocked domain name unusable.
Challenges we ran into
Our team of 3 was generally new and inexperience with Javascript (client-side Javascript in particular). As a result, working with asynchronous programming was an uphill battle, as we were not used to web development. Sending data between HyperFocus's content scripts, background scripts, and other html scripts was an exceptionally difficult task we poured hours into. We had initially planned for more features, but we underestimated the learning curve and difficulty of using client-side Javascript.
Accomplishments that we're proud of
This was most of our team's first hackathon project that involved creating an actual product, and submitting a final product makes us feel proud about ourselves.
What we learned
As a team, we learned a lot about web development with JavaScript, HTML, and CSS. More importantly, we learned to collaborate as a team and create products in the Computer Science field. We hope to take our experiences from this hackathon, and continue creating innovative and practical products and services in future hackathons and our daily lives.
What's next for HyperFocus
We hope to launch HyperFocus on the Chrome Web Store, allowing other users to benefit from our extension (users need to sideload HyperFocus by retrieving the code from GitHub and loading the unpacked folder with Chrome's Developer Tools). Additionally, we would love to continue improving HyperFocus, adding in all the initially planned for features and improve the HyperFocus user experience.
Log in or sign up for Devpost to join the conversation.