A browser extension simulator built as a React web application for a university course project demo. This is not a real Chrome extension — it simulates how such an extension would behave, with realistic delays, log output, and user interaction flows.
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production (Netlify/Vercel ready)
npm run build
# Run unit tests (Vitest)
npm test| Feature | What it shows |
|---|---|
| Platform Grid | Six social/AI platforms tracked with real-time protection status |
| Sweep Simulation | Async agent workflow with realistic staged delays per platform |
| Activity Feed | Terminal-style log with timestamped entries; auto-scrolls as events arrive |
| Safety Guard | Mid-sweep interception modal on LinkedIn detecting a dangerous keyword |
| Protection Receipt | Session log with UUID, timestamps, per-platform action details, JSON download |
| Stop Agent | Immediately halts the sweep, marks remaining platforms as Skipped |
| Unit Tests | Pure containsDangerousKeyword function tested with Vitest |
src/
├── App.jsx — Root component; all state & sweep logic
├── App.css — Complete design system (no Tailwind)
├── components/
│ ├── Header.jsx — Logo, wordmark, agent status badge
│ ├── PlatformCard.jsx — Per-platform card with status & toggle
│ ├── ActivityFeed.jsx — Scrollable terminal log panel
│ ├── ControlPanel.jsx — Primary action buttons
│ ├── ReceiptModal.jsx — Post-sweep session receipt with JSON export
│ └── SafetyGuardModal.jsx — Dangerous keyword interception dialog
└── utils/
├── safetyGuard.js — Pure keyword detection function
└── safetyGuard.test.js — Vitest unit tests
Dark industrial-security aesthetic:
- Space Mono (Google Fonts) for headers, monospace, and terminal elements
- DM Sans (Google Fonts) for body text
- CSS grid texture background, electric cyan accent, amber/red state colors
- CSS keyframe animations for mount, sweep pulse, status badge, and modal entrance
Course project note: This application simulates browser extension behavior for demonstration purposes only. No real data is accessed or transmitted. All platform interactions are mocked with async JavaScript delays.