flashbang

Inspiration

Last week, I had a calculus midterm the next morning. I sat down at 8:00 PM with a coffee, ready to grind. I installed a website blocker. I put my phone in another room. I was ready.

Fast forward to 3:00 AM. I wasn't doing calculus. I was five hours deep into a YouTube rabbit hole watching videos of a hydraulic press crushing gummy bears.

What it does

flashbang is a productivity tool weaponized by public humiliation. Unlike standard blockers that simply restrict access, flashbang introduces "high stakes" to your browsing habits.

It silently monitors your activity on blacklisted sites (like YouTube, Twitter, and Netflix). As you procrastinate, a "shame meter" charges up. If you ignore the ominous warnings and hit 100%, the extension triggers The Protocol: it hijacks your webcam to take a mugshot, captures your current URL, and broadcasts your identity to strangers with the extension enabled and connected.

It is crowdsourced accountability powered by the fear of being exposed.

How we built it

flashbang is built as a real-time productivity shaming system with three core components: a Chrome Extension (Manifest V3) using service workers and content scripts, a Node.js backend with Express and Socket.io for WebSocket communication, and WebRTC integration for webcam capture. The extension monitors the active tab every second, comparing URLs against a blacklist of distracting sites (YouTube, Netflix, Reddit, etc.) and incrementing a charge meter (+2% per second) that persists even after leaving blacklisted sites. At 50%, 75%, and 90% charge, Dark Souls-style warning overlays appear with full-screen dimming effects, while a real-time charge bar displays in the bottom-right corner. When the meter hits 100%, the screen flashes white, captures the user's webcam photo via WebRTC's getUserMedia API, encodes it as Base64, and sends a shame packet (photo + name + URL) through Socket.io to our Node.js server. The server randomly routes this packet to a connected victim, who sees a mugshot card overlay on their current tab while a new tab automatically opens with the perpetrator's slacking URL. For identity management, we attempt to fetch the Chrome user's full name via Google People API with OAuth2, falling back to persistent generated identifiers ("Sneaky Fox 42") if OAuth is unavailable.

Challenges we ran into

Key challenges we overcame included handling Manifest V3's restrictions (requiring local Socket.io bundling since remote scripts are blocked), implementing fallback content script injection for restricted pages like chrome:// URLs, and ensuring real-time synchronization across multiple clients so shame packets reliably reach random victims. We also had to work around Chrome's identity API limitations in service workers, which required implementing a multi-layered fallback system for user identification.

Accomplishments that we're proud of

What we learned

This project gave us deep insights into Chrome Extension security models and the isolation between different execution contexts. We learned how content scripts, background service workers, and popup scripts operate in separate JavaScript contexts and communicate exclusively through Chrome's message passing API (chrome.runtime.sendMessage). We discovered why certain APIs are restricted on chrome:// and chrome-extension:// pages, requiring fallback injection strategies when content scripts can't load. The project taught us about permission models—how the identity API works differently in Manifest V3 service workers compared to MV2 background pages, and why OAuth tokens sometimes return as objects rather than strings. We learned the importance of defensive programming in extensions, implementing URL filtering on both client and server sides to prevent malicious payloads. We also gained understanding of how Chrome's Content Security Policy affects extension development, particularly why we had to bundle Socket.io locally instead of loading it from a CDN. Most importantly, we learned to respect user privacy boundaries, implementing mandatory permission gates and never accessing sensitive data without explicit user consent.

What's next for flashbang

Looking ahead, we want to add customizable blacklists so users can personalize which sites trigger the shame meter, and implement a leaderboard system showing who's been caught slacking the most. We're considering team/group features where friends can form "productivity squads" and shame each other in private groups. Additional features on our roadmap include detailed analytics showing time wasted on blacklisted sites, integration with productivity apps like Todoist or Notion, and a "redemption mode" where users can reduce their charge by completing productive tasks. We also want to improve the OAuth integration to reliably fetch real user names, add support for custom warning messages, and create a web dashboard where users can view their shame history and statistics. Long-term, we're exploring mobile browser extensions and potentially a companion mobile app that syncs shame data across devices.