Sleep Deprivation Simulator

• 

  Chrome Extension

Inspiration

The inspiration behind this Chrome extension stemmed from observing how sleep deprivation often leads students to perceive blurry texts and images. I aimed to replicate this phenomenon through a Chrome extension that visually simulates this experience by blurring the active browser tab.

What it does

The Chrome extension provides two main functionalities through its interface: Start Simulator: It initiates the blurring effect on the current browser tab. After about a minute, the text and images on the page begin to blur gradually. Stop Simulator: Halts the blurring effect, returning the page to its original clarity.

How we built it

I developed the Chrome extension using a combination of HTML, CSS, and JavaScript. These technologies enabled us to design the user interface and implement the logic for applying the blurring effect dynamically.

Challenges we ran into

Initially, it was challenging to configure the extension to appear correctly in the browser. Also, the blurring effect required troubleshooting JavaScript logic errors, which occasionally prevented the effect from being applied consistently across tabs.

Achievements that we're proud of

I have successfully created a functional Chrome extension within a limited timeframe during the hackathon (approximately 4 hours remaining). I also implemented the blurring effect, which was the main feature I wanted to add to the Chrome extension.

What we learned

Technical Skills: Gained a deeper understanding of how to set up and develop Chrome extensions. Time Management: Learned to prioritize tasks effectively and work efficiently under time constraints.

What's next for Sleep Deprivation Simulator

Interactive Features: Introducing mini-games within the extension, allowing users to "win back" the clarity of their page by completing specific tasks. Technological Enhancement: Transitioning the project to ReactJS to improve the user interface and add more sophisticated functionality. Customization: Adding user settings to control the intensity and duration of the blurring effect for a more personalized experience.

Built With

• css
• html
• javascript