Built for Hackathon 2025 | Team Manitforce
Giving users full control and visibility over web permissions in real-time.
Monitors sensitive permissions (location, camera, microphone) across websites, logs them, and visualizes usage via a Chrome Extension and React dashboard.
| Issue | Description |
|---|---|
| Lack of Transparency | Users cannot see which websites access sensitive permissions in real-time. |
| Privacy Concerns | Websites may misuse granted permissions without user awareness. |
| Manual Oversight | Browsers show permission settings, but no live monitoring or historical usage. |
| Objective | Build a real-time system to monitor, log, and visualize web permissions for user awareness and compliance. |
| Component | Description |
|---|---|
| Chrome Extension | Captures permission API calls (navigator.geolocation, getUserMedia, Notification.requestPermission) and sends events to the backend. |
| Backend Logging | Stores all permission events with metadata: site origin, permission type, action, timestamp. |
| Live Dashboard | React dashboard shows real-time feed and historical timeline of permissions usage. |
| User Awareness Panel | Allows whitelisting/blacklisting permissions per site and guides users to stricter browser settings. |
| Compliance Logging | Maintains persistent records suitable for GDPR and data protection audits. |
| Feature | Description |
|---|---|
| 🔍 Real-Time Monitoring | Tracks and displays permission requests instantly. |
| 📊 User Dashboard | Central interface for analyzing permission usage patterns. |
| 📡 Permission Awareness | Displays which sites access location, camera, and microphone. |
| 🔔 Notifications | Sends alerts when sensitive permissions are accessed. |
| 🕓 History Logs | Maintains full historical logs for auditing purposes. |
| 🔒 Secure & Privacy-Focused | All data is handled securely, prioritizing user privacy. |
| Layer | Technology Used |
|---|---|
| Frontend | React.js, Material-UI |
| Backend | Node.js, Express.js |
| Database | MongoDB |
| Authentication | JWT (JSON Web Tokens) |
| Other Tools | Webpack, Babel, ESLint |
| Step | Process |
|---|---|
| 1️⃣ | User installs Chrome Extension → extension monitors permission API calls. |
| 2️⃣ | Each permission event (grant/deny/request) is sent to backend with metadata. |
| 3️⃣ | Backend stores events in MongoDB with timestamp, site, and permission type. |
| 4️⃣ | React dashboard fetches live events → displays timeline and analytics. |
| 5️⃣ | Users can whitelist/blacklist sites or follow recommendations for stricter permission control. |
| Folder | Description |
|---|---|
Backend/ |
Node.js + Express backend, API routes, event logging |
Extension/ |
Chrome Extension source code, permission event capture logic |
Frontend/ |
React dashboard for visualizing permissions and user controls |
src/components/ |
UI components: dashboard, event feed, settings panel |
src/pages/ |
Dashboard pages, login, history logs |
assets/ |
Screenshots and static images for the README |
| Step | Command |
|---|---|
| 1️⃣ Clone Repository | git clone https://github.com/jeetgoyal80/PrivacyGuard_chrome_extension.git |
| 2️⃣ Install Dependencies | cd Backend && npm install cd ../Extension && npm install |
| 3️⃣ Configure Environment | Create .env in Backend & Extension with API URLs, JWT secret, MongoDB URI |
| 4️⃣ Start Backend | cd Backend && node index.js |
| 5️⃣ Start Extension / Frontend | cd ../Extension && npm run dev |
| 6️⃣ Open Dashboard | http://localhost:5173 |
| Feature | Image |
|---|---|
| Home |  |
| Dashboard |  |
| Settings |  |
| Login |  |
| Extension |  |
| Type | Link |
|---|---|
| PrivacyGuard Live Demo | |
| Watch on Google Drive |
| Principle | Measure |
|---|---|
| Data Minimization | Only essential permission events are logged. |
| Access Control | Users manage whitelisted/blacklisted sites. |
| Transparency | Full event history visible in dashboard. |
| Audit Trail | Persistent logs for regulatory compliance (GDPR-ready). |
| Feature | Description |
|---|---|
| 🌐 Multi-Browser Support | Extend extension to Firefox, Edge, etc. |
| 🤖 AI-Based Anomaly Detection | Detect unusual permission usage patterns. |
| 📱 Mobile Companion App | Monitor web permissions from mobile devices. |
| 📊 Advanced Analytics | Insights on user trends and permission misuse. |
| 🔄 Auto-Updates | Push new permission rules and dashboard features automatically. |
| Member | Role | Responsibility |
|---|---|---|
| Jeet Goyal | Backend & Frontend | Built backend logging, API endpoints, and React dashboard. |
| Harshil Khandewal | Extension Developer | Developed Chrome Extension and permission capture logic. |
| Abhi Gupta | Support & Research | Assisted with research, testing, and documentation. |
© 2025 Team Manitforce | Built for Hackathon 2025