Project Info
๐ก๏ธ
Inspiration
We noticed a massive security blind spot in the AI era: developers and users are constantly copy-pasting code, logs, and environment variables into AI chatbots (ChatGPT, Claude, Gemini) for debugging. One accidental paste of an AWS key, GitHub token, or credit card can lead to a catastrophic breach. Existing Data Loss Prevention (DLP) tools are enterprise-heavy, cloud-based, and ironically, require sending your data to a third-party server to check if it's sensitive. We wanted to build a "security bodyguard" that stops the leak before it leaves the browser. ๐
What it does
ShadowGuard AI is a Chrome extension that intercepts paste events and keystrokes, running a 100% local, synchronous regex and heuristic engine to detect PII and secrets. If a leak is detected, it instantly blocks the paste and flashes a red overlay. It also features a real-time WebSocket dashboard that visualizes live threats and scans your other installed Chrome extensions for dangerous permission combinations. ๐ ๏ธ
How we built it
Extension (Phase 1): Built with React, TypeScript, and Manifest V3. We used capture-phase event listeners to synchronously block pastes without relying on heavy MutationObservers. Detection Engine: We implemented a comprehensive pattern-matching library. To avoid false positives (e.g., flagging a 16-digit order ID as a credit card), we wrote a synchronous Luhn algorithm check directly in the content script. Backend & Dashboard (Phase 2): Built a FastAPI backend with WebSockets. The React dashboard visualizes live threats and historical charts using Recharts. Zero-Trust Architecture: We designed the system so that no raw data ever leaves the browser. Even when the backend receives telemetry, it only receives heavily masked metadata (e.g., AKIA****MPLE). ๐ง Challenges & Accomplishments Regex vs. False Positives: Implementing the Luhn check in the browser was a massive win for the demo, as it mathematically guarantees we only flag valid credit cards. Manifest V3 Limitations: Adapting to the new service worker lifecycle in MV3 while maintaining real-time WebSocket connections to the dashboard required careful state management. Accomplishments: We are incredibly proud of the synchronous paste-blocking mechanism. It works flawlessly on complex, dynamically injected React inputs (like ChatGPT's textarea) with zero latency. ๐ง
What we learned
We deep-dived into Chrome Extension Manifest V3 architecture, capture-phase event delegation, and designing zero-trust data pipelines where the backend is treated as an untrusted entity that only receives sanitized metadata.
๐ก๏ธ ShadowGuard AI
๐ฅ ๐บ Watch the Official Demo Video on YouTube!
Your AI Security Bodyguard.
ShadowGuard AI is a Chrome extension that detects sensitive data (passwords, API keys, SSNs, credit cards) the instant you type or paste it into any AI chat tool, and blocks it before it's sent entirely on-device, zero data ever leaves the browser for detection.
๐ Features
Phase 1: 100% Local Detection Engine
- Zero-Trust Architecture: All PII/secret detection runs via regex/heuristics directly in the browser content script.
- Comprehensive Pattern Matching: Detects AWS keys, GitHub tokens, OpenAI/Anthropic API keys, JWTs, Credit Cards (with Luhn validation), US SSNs, and password contexts.
- Synchronous Paste Blocking: Intercepts paste events in the capture phase, preventing the secret from ever reaching the DOM.
- Visual Feedback: Instant red overlay warning on the input field.
Phase 2: Backend & Dashboard
- FastAPI Backend: Receives masked detection metadata via WebSocket for a live threat feed.
- Extension Risk Scanner: Flags dangerous permission combinations in your installed Chrome extensions.
- React Dashboard: Real-time UI showing live threats, extension risks, and historical charts.
๐ Quick Start
1. Start Backend & Dashboard
docker compose up --build -d
- Backend:
http://localhost:8000 - Dashboard:
http://localhost:3000
2. Build & Load the Chrome Extension
cd extension
npm install
npm run build
Load into Chrome:
- Go to
chrome://extensions/. - Enable Developer mode.
- Click Load unpacked and select the
extension/distfolder.
๐ค Demo Script
- Open
http://localhost:3000(Dashboard). - Open the ShadowGuard popup on
claude.ai(See ๐ข Recognized AI). - Paste a fake AWS key (
AKIAIOSFODNN7EXAMPLE) into the chat. - Watch the paste get blocked instantly with a red overlay.
- Check the Dashboard to see the live WebSocket alert!
๐ ๏ธ Tech Stack
- Extension: React, TypeScript, Vite, Manifest V3
- Backend: Python, FastAPI, SQLAlchemy, SQLite
- Dashboard: React, Recharts, Nginx
- DevOps: Docker, Docker Compose
Analysis
View
Metric
- 1
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- PythonIn code
1 of 1 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
33 KB
Source files
4
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
s333s/ShadowGuard-AI
7 files ยท 34 KB ยท @ 8ee78da
Structure
Application logic
2 files ยท 29%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here โ open the file browser to check anything the diagram implies.
Languages
- Python90%
- Markdown9%
- YAML1%
Share of indexed source by file size. Binary and vendored files are excluded.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.