Focus

focus is a simple chrome extension that blocks websites during a selected time period. Focus features dark mode, sync storage toggle, auto-formatted domains, and more.

Comment

Inspiration

In school, there are many people who have trouble staying focused on their school work. They often come up with ways to access and use unproductive websites such as Discord, Reddit, YouTube, and more. Focus provides a simple and easy-to-use solution to this problem, without the use of complicated network settings.

What it does

Focus is a chrome extension built completely in JavaScript, HTML, and CSS, for a lightweight application. The extension allows you to pick a time during the day where you want to be focused and blocks the websites of your choosing. If you attempt to access your blocked websites while in focus mode, you'll be met with a page that reminds you to keep working. The user interface is built to be unobtrusive and non-distracting, with simple colors and styling, while still looking polished.

How we built it

Blocker

The main feature of Focus - the blocker - is built into the service worker. It listens for chrome to fire an event called tabs.onUpdated, which is when the user changes the url or other information of a tab. It then checks the following:

  • Has the tab NOT been closed already? The event can be fired multiple times (to change the loading status, to get the FavIconURL, etc), so we need to check for this in order to prevent multiple reminder pages from being re-opened.
  • Is the user in focus mode?
  • Is the domain in the block list?

If the above are all true, the extension removes the tab and opens a new one with the reminder page.

User Interface

The UI does not do much on its own. Whenever changes are made to the timings or blocklist, the URL is first formatted. Then, the updated information is sent to the service worker, which then saves it to storage.

Challenges we ran into

There were many problems with saving and getting from storage. The Chrome API uses Promises to return the data, so it was difficult to work around them in order to get and set the information. It was also difficult to design a complete and good-looking UI that was able to fully interact with the background script.

Accomplishments that we're proud of

We were really successful in getting rid of the really big bugs in time for the submission. It was difficult to read through all the code, but we were able to fix almost all of the problems that came up.

What we learned

We learned a lot about time management. This is our very first hackathon, so we we didn't really know how to properly manage our time. Everything went pretty smoothly, but it was a great learning experience. We also learned a lot about group work. We constantly had to coordinate with each other, settle merge conflicts, and divide up the work.

What's next for Focus

The next biggest thing for Focus is the ability to have multiple focus periods per day. It's a really big drawback of our app that would be really nice to have implemented, since many people like to have different pages blocked at different times.

Share this project:

Updates