Blurry site

Blurry Site is a privacy extension for developers who build in public. It blurs your entire webpage, keeping only the element you hover over in sharp focus. Share screens safely, without leaking data!

Comment

Inspiration

If you are part of the #BuildInPublic community, you know the struggle of sharing your progress without leaking sensitive data. Whether you are taking a screenshot of a new dashboard for Twitter, recording a quick loom video, or simply coding in a crowded coffee shop, your screen is full of things meant only for you: API keys, customer emails, financial metrics, and private chat sidebars.

I wanted a way to confidently work and share in public spaces without having to manually censor screenshots in Photoshop later. Blurry Site was inspired by the need for instant, presentation-ready privacy—allowing developers and creators to spotlight exactly what matters while keeping the rest of the screen strictly anonymous.

What it does

Blurry Site is a lightweight browser extension that acts as a privacy shield and a focus tool. When toggled on, it instantly applies a frosted-glass blur over the entire webpage.

As you move your cursor, only the specific block-level element (like a paragraph, a code snippet, or a specific chart) you are currently hovering over comes into sharp, clear focus. Everything else remains obscured.

  • For sharing: Safely take screenshots or record screencasts highlighting just one feature without exposing the surrounding UI.
  • For working: Prevent shoulder-surfing in public spaces like cafes, airports, or open-plan offices.
  • For focusing: Eliminate visual clutter and read long-form documentation one paragraph at a time.

How I built it

I built Blurry Site using vanilla web technologies to keep it fast and dependency-free:

  • Extension Architecture: Built on Manifest V3 for modern security, performance, and cross-browser compatibility.
  • DOM Manipulation: I injected a lightweight Content Script (content.js) that attaches event listeners to track mouse movements (mouseover and mouseout).
  • Styling: Instead of altering the actual webpage elements (which breaks layouts), I utilized CSS backdrop-filter: blur() alongside a dynamic z-index and box-shadow to create a smooth, un-intrusive spotlight effect (styles.css).

Challenges I ran into

  • Event Bubbling: When hovering over deeply nested HTML elements, the browser wants to trigger hover states for the parent, the child, and the grandchild. I had to implement logic to ensure only the most specific target element comes into focus without causing the screen to flicker wildly.
  • Layout Shifts: Initially, applying filters directly to webpage elements caused weird layout shifts on complex sites. I solved this by refining our CSS approach so the blur overlays the site without disrupting the underlying DOM structure.
  • Dynamic Content: Getting the extension to play nicely with Single Page Applications (SPAs) like React or Vue, where the DOM is constantly changing without page reloads.

Accomplishments that I'm proud of

  • Achieving a buttery-smooth transition when moving focus from one element to the next—it feels native to the browser.
  • Keeping the extension incredibly lightweight so it doesn't drain memory or battery while running constantly in the background.
  • Creating a tool that solves a genuine daily friction point for indie hackers, founders, and developers.

What I learned

Building this extension was a deep dive into the intricacies of the Browser Object Model (BOM) and the Document Object Model (DOM). I learned a lot about how different websites structure their HTML, the quirks of z-index stacking contexts, and how to effectively use the new Manifest V3 APIs for background service workers and state management.

What's next for Blurry Site

  • Keyboard Shortcuts: Adding quick hotkeys to instantly toggle the blur on and off without clicking the extension icon.
  • Customization: Letting users adjust the blur intensity (e.g., a light blur for focus, a heavy pixelation for absolute privacy).
  • Domain Whitelisting: Allowing users to set the extension to auto-activate on specific sensitive sites (like Stripe, AWS, or Vercel dashboards).
  • Click-to-Lock: Adding the ability to click an element to "lock" the focus on it, so you can move your mouse away while keeping that specific section clear.
Share this project:

Updates