🏞️ Real-Time Web Permission Tracker — Transparent Web Permissions Monitoring

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.

---

🧠 Problem Statement

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.

---

💡 Our Solution — Real-Time Web Permission Tracker

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.

---

🧩 Core Features

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.

---

⚙️ Tech Stack

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

---

🏗️ System Architecture

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 Structure

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

---

🚀 Quick Start

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

---

🧠 Screenshots

Feature	Image
Home
Dashboard
Settings
Login
Extension

---

🎥 Demonstration

Type	Link
▶️ Live Project	PrivacyGuard Live Demo
▶️ Video Demonstration	Watch on Google Drive

---

🔒 Privacy & Compliance

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).

---

🧭 Future Scope

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.

---

👥 Project Team

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