• 

  Options/Settings Panel of the Extension

🕵️‍♂️ Project Story: Misinformation Detective-v1 💡 Inspiration In an era where digital content is generated and distributed at an unprecedented velocity, the line between verified fact and fabricated sensationalism has blurred. We are constantly bombarded with explosive headlines on social media and news outlets. Most users don't have the time to manually open a new tab, search for background context, and cross-reference multiple sources just to verify a single claim.

We were inspired to build Misinformation Detective-v1 to act as an autonomous, real-time factual shield. We wanted to create a tool that brings critical thinking and objective data directly to the user—without slowing down their browsing experience or invading their data privacy.

🛠️ How We Built It Misinformation Detective-v1 is engineered natively as a Google Chrome Extension utilizing the modern Manifest V3 framework. The architecture is cleanly divided into three core operational layers:

The Client-Side Content Script (content.js): Dynamically extracts high-signal webpage metadata (like

headlines or page titles) as a user navigates. To protect network efficiency and compute budgets, we built a Character Safety Limiter that natively truncates text strings down to a precise limit before any external API requests are initialized.

The Background Service Worker (background.js): Acts as our asynchronous orchestration engine. When it receives a claim string from the client, it dynamically coordinates two external data pipelines:

Context Gathering Layer: Queries live, organic global search indices via the Serper API to gather real-time web context.

AI Analytical Magistrate: Forwards the collected search evidence and the claim to open-source LLMs via OpenRouter, enforcing a strict JSON schema output format at a low temperature to maximize determinism and eliminate hallucinations.

The Glassmorphic Control Center (options.html / options.js): A premium, modern user dashboard built with high-end CSS variables and glowing neon accents. It features an instantaneous master toggle to enable/disable automated background scanning, configuration inputs, and an interactive Live Fact-Check Terminal where users can manually paste standalone claims or links to verify them on demand.

🛑 Challenges We Faced Our primary hurdle revolved around building a system that was financially and architecturally sustainable. Traditional AI tools rely on centralized backend servers where developers must foot heavy API hosting and compute costs. If thousands of users downloaded our extension, a centralized server would crash or quickly run up massive bills.

We overcame this by pivoting to a Decentralized BYOK (Bring Your Own Key) Architecture. By securely storing the user's personal Serper and OpenRouter keys inside Chrome's local encrypted sandbox (chrome.storage.local), we eliminated server overhead entirely.

Furthermore, optimizing text density was critical to protecting user budgets. We handled this by enforcing strict local string truncation on the headline and capping our search engine payload to just 4 high-relevance organic snippets. This compressed token consumption to its absolute bare minimum and maximized verification speed.

🧠 What We Learned Building this project deepened our understanding of asynchronous message routing and service worker lifecycles in Manifest V3, which handles background scripts as temporary workers that sleep when idle to preserve device RAM. We also learned how to engineer highly structured system prompts that force LLMs to output clean, parsable JSON objects without markdown wrappers, ensuring the user interface never breaks due to unexpected text anomalies.

Built With

• css3
• html5
• javascript