FocusFlow

extension UI

Inspiration

Many of us find it challenging to stay focused while watching educational videos, like tutorial videos on YouTube or lectures on platforms like EdX. It can be frustrating to scroll back to find where we left off. This made us think: what if there were a tool that could help us maintain our focus on the content?

What it does

FocusFlow is a Chrome extension designed to help students and individuals with ADHD stay engaged while learning. By tracking eye movements, it ensures that your attention remains on learning content by pausing videos whenever your gaze drifts away. Once your focus returns to the screen, the video resumes seamlessly.

Ideal for online classes, tutorials, or self-paced learning, FocusFlow minimizes distractions and helps users maintain their flow state, making every study session more productive and focused.

How we built it

Set up the extension structure:
- manifest.json to define the extension
- popup.html/js and its CSS for the user interface.
Add eye-tracking logic
- download and localize WebGazer.js
- set up eye tracking in popup.js
Add a popup for calibration
- allow start and stop tracking
- modify the style to ensure user-friendly
Test the extension locally and debug

Challenges we ran into

This was our first time building a Chrome extension using JavaScript. We faced difficulties understanding and implementing WebGazer.js. Debugging long-form code was also a challenge.

For instance: Initially, we included WebGazer.js via CND. However, our Chrome extension's default Content Security Policy (CSP) is blocking the WebGazer.js script from being loaded from the external URL. Then, we downloaded and localized the WebGazer.js file to bypass the CSP.

Accomplishments that we're proud of

The extension is successfully uploaded to Chrome;
The extension has an intuitive, aesthetic, and working user interface;
The extension is successfully interacting with browser permissions to turn on the camera.

What we learned

understand the file structure for a Chrome extension
debug by logging status, checking console, etc.
get familiar with JavaScript, HTML/CSS, etc.
practice using GitHub for version control and team collaboration.

What's next for FocusFlow

Improve the accuracy of the eye-tracking function.
Ensure security and privacy measures are in place.
Add support for specific video platforms, such as integrating the YouTube API for direct interaction.
Expand the function to help users maintain focus while reading journals, essays, and other text-based documents. The extension could track and highlight the next word for users to read, making it easier to stay engaged with the content.