Inspiration
Consumers are universally exhausted by dark patterns, hidden fees, and deceptive UI on the internet. We wanted to build an active, "just-in-time friction" shield that intercepts checkout clicks. The goal was to translate legal jargon into simple math and warn users of traps before they make a financial mistake.
What it does
TrapSight is a serverless, privacy-centric Chrome Extension that introduces active, "just-in-time protective friction" right at the point of sale. Instead of passively highlighting text, it intercepts a user's checkout interactions to analyze complex billing terms. It exposes hidden fees, predatory auto-renewals, and deceptive dark patterns before a financial transaction occurs. It dynamically mounts an isolated premium user interface widget into the webpage via the Shadow DOM, ensuring the warning block is immune to host website CSS pollution. It includes a custom "Read" button that seamlessly redirects and auto-scrolls the user to the exact highlighted line of predatory text.
How we built it
We built this as a team of four for Next Byte Hacks V2. We utilized a 100% pure-software, serverless architecture using Chrome's strict Manifest V3 standards to avoid backend deployment bottlenecks. To allow our team to work in parallel, we established a strict "JSON Contract" ({"risk_level": "high", "hidden_fee": "$50", "summary": "..."}) . We used scraper.js to harvest specific billing data blocks, which are then dispatched to a background service worker (background.js). The background script handles stateful operations and directly queries the Gemini 3.1 Flash Lite API utilizing a secure "Bring Your Own Key" (BYOK) architecture via chrome.storage.local. We enforced absolute UI stability by utilizing Gemini's native responseMimeType: "application/json" alongside strict system engineering prompts.
Challenges we ran into
We realized that when a user clicks "Checkout", the browser immediately tries to load the next page, which would kill our background API calls, so we solved this by using e.preventDefault() to pause the checkout click while the extension checks the page's terms. During sandbox testing, we discovered that scraper.js was missing from our manifest.json content scripts array. This caused checkout intercepts to fail with undefined errors until we manually corrected the manifest to load our scripts sequentially. We also hit GitHub's Push Protection scanner because we initially hardcoded a temporary API key. We had to reset our local Git history, purge experimental test scripts (like test-pipeline.js), and fully implement a BYOK storage architecture to keep our public repository clean. Finally, our initial commits were marked as an anonymous developer because our local Git config email didn't exactly match our GitHub account email.
Accomplishments that we're proud of
We are incredibly proud of successfully decoupling the LLM API call from the checkout button click to eliminate async latency issues. We succeeded in building a completely serverless AI extension that handles complex Terms of Service analysis flawlessly. We are also proud of enforcing a strict JSON schema contract that prevents the Gemini API from hallucinating and breaking our frontend UI. Finally, we successfully pivoted to a secure, production-ready BYOK architecture.
What we learned
We discovered that environment variables (.env) do not protect API keys in client-side Chrome extensions because bundlers expose them in plain text. We learned how to bypass and resolve GitHub's Push Protection scanner by purging secret history and resetting Git commits. Most importantly, we learned that parallel execution requires a strict data contract (like our JSON Contract) so UI, scraping, and backend engineers are not blocked waiting on each other's code.
What's next for TrapSight
We plan to implement a standard SaaS architecture with a Node.js backend proxy server to mask enterprise keys and eliminate the BYOK model. To protect user data privacy, we want to transition to local, in-browser Small Language Models (SLMs) via WebGPU so checkout data never leaves the user's device. We want to introduce an "Affiliate Redirect" feature that dynamically offers links to competitors with transparent pricing when a predatory merchant is flagged. Finally, we aim to build a "Virtual Shield" that allows users to generate single-use virtual credit cards to automatically block deceptive auto-renewal charges.
Log in or sign up for Devpost to join the conversation.