Lighthouse

Focus your eyes, filter the noise. A project for web accessibility and digital wellbeing.

Comment

Inspiration

The modern web is a sensory minefield. We’ve all had the experience of trying to read a single article on a site like TMZ or a local news outlet, only to be bombarded by flashing sidebar ads, "Recommended for You" clickbait, and microscopic, low-contrast text.

For many, this is a nuisance. But for readers with ADHD, dyslexia, or visual impairments, these cluttered pages make the web almost inaccessible. We were inspired to build Lighthouse—a "reading sanctuary" that illuminates the content you care about while dimming the chaos around it. We wanted to prove that technology can be used to subtract the noise just as much as it is used to add it.

What it does

Lighthouse is a browser extension that uses a Smart Spotlight interaction model to isolate content. Instead of just "cleaning" a page, it allows the user to interact with it dynamically.

Smart Spotlight: As you move your mouse, the extension detects and "lifts" the paragraph or image under your cursor. Precision Focus: It applies a customizable background blur and zoom to the active element. If you find a section you want to study, a single click locks the spotlight in place. Accessibility Fonts: With one click, users can swap site-wide fonts for Calibri or OpenDyslexic—a typeface specifically designed with weighted bottoms to prevent the brain from rotating or flipping letters. Custom Environments: Users can adjust Blur Intensity, Zoom Scale, and even change the background/text colors of the highlight to create a personalized "dark mode" or "sepia" reading experience. Navigation: A synchronized Progress Bar at the top of the window ensures you never lose your place on a long page.

How we built it

Coming into this hackathon, we were a team of complete beginners with zero experience in web extension development. We had to learn the architecture of Chromium extensions in real-time.Logic: Built with JavaScript using the chrome.storage API to ensure user preferences (like blur intensity and font choice) stay saved between sessions.Injection: We used Content Scripts to inject a dynamic CSS layer into the DOM of any active tab.Communication: We implemented a messaging system between the popup.js (the UI) and code.js (the engine). We used variables to handle scaling math, ensuring that the zoom level $Z$ follows the user's input $s$ where $0.5 \le s \le 1.5$:$$\text{transform: scale}(s)$$Asset Management: We configured the manifest.json with web_accessible_resources to allow local font files to be injected into external websites.

Challenges we ran into

The learning curve was a mountain. Our biggest hurdle was CSS Specificity and Isolation. We quickly realized that many websites have "aggressive" styling that would override our extension. We had to learn how to use the !important flag strategically and calculate z-index hierarchies so our spotlight always stayed on top of the "noise."

Another challenge was Event Conflict. We had to ensure that our "click-to-lock" feature didn't break the actual links on the page. Finding the balance between "locking" the focus and allowing the user to still navigate the site required careful use of stopPropagation() and preventDefault().

Accomplishments that we're proud of

Zero to One: We are most proud of the fact that 48 hours ago, none of us knew how to make a browser extension. Today, we have a fully functional product. The OpenDyslexic Integration: Successfully injecting a custom font into any website—regardless of that site's security or styling—was a massive technical win for us. Seamless Performance: We managed to get the background blur to respond with zero latency, even on media-heavy, cluttered pages like TMZ.

What we learned

We learned that accessibility isn't a checkbox—it's a design philosophy. Beyond the technical skills of learning JavaScript message passing and manifest versions, we learned how to think about the web from the perspective of someone with different sensory needs. We also learned the power of "Minimum Viable Product" (MVP): start with a simple hover effect, and build the customization layers on top once the core logic is solid.

What's next for Lighthouse

Lighthouse is just the beginning. In the future, we hope to implement:

  1. AI Summarization: A "Focus Summary" button that uses LLMs to summarize a highlighted paragraph.
  2. Auto-Scroll: A feature that moves the spotlight down the page automatically based on the user's reading speed.
  3. Cross-Browser Support: Bringing Lighthouse to Firefox and Safari.
  4. Community Themes: Allowing users to share their "Color Suite" presets for different reading conditions (e.g., "Midnight Study" or "Soft Afternoon").
Share this project:

Updates