🎭 Smart Emotion Tracker Chrome Extension

Advanced Chrome extension that performs facial emotion detection using AI technology and keeps emotion logs during web browsing!

🚀 Features

• 🎯 Real-time Emotion Detection: AI-powered face analysis with Face-api.js
• 📊 Emotion Logs: Emotion recording every 10 seconds
• 📈 Statistics: Daily emotion distribution and analysis
• 🌐 Target Websites: YouTube, Netflix, Instagram, Facebook, Twitter, TikTok
• 🔒 Privacy: No images recorded, only real-time analysis
• 📱 Modern Interface: Dashboard, logs and settings tabs

📁 Project Files

• manifest.json - Extension configuration (Manifest V3)
• popup.html - Modern popup interface
• popup.js - Popup JavaScript controller
• emotion-detector.js - AI emotion detection system
• background.js - Background service worker
• face-api.min.js - AI library
• icons/ - Extension icons
• test-debug.html - Debug interface

🎭 Detected Emotions

• 😊 Happy
• 😢 Sad
• 😠 Angry
• 😨 Fearful
• 🤢 Disgusted
• 😲 Surprised
• 😐 Neutral

🚀 Installation and Testing

1. Chrome Developer Mode

1. Open Chrome
2. Go to chrome://extensions/
3. Turn on "Developer mode" switch in the top right

2. Load Extension

1. Click "Load unpacked" button
2. Select this project folder
3. Extension will load automatically

3. Test the Extension

1. Visit one of the target websites (YouTube, Netflix, etc.)
2. Click the extension icon in the toolbar
3. Grant camera permission when prompted
4. Turn on emotion detection toggle
5. Look at the camera for emotion detection

🔧 Technical Details

AI Technology

• Face-api.js: Deep learning models for face detection
• SSD MobileNet: Main face detection model
• TinyFaceDetector: Fallback detection model
• Face Expression Recognition: 7-emotion classification

Architecture

• Manifest V3: Latest Chrome extension standard
• Content Scripts: Inject AI detection into web pages
• Background Service Worker: Manage data and logs
• Camera API: Real-time video processing
• Chrome Storage: Local emotion log storage

Permissions

• activeTab: Access current website
• storage: Save emotion logs
• camera: Real-time emotion detection
• host permissions: Target website access

📊 How It Works

1. Initialization: Extension loads AI models on target websites
2. Camera Access: Requests permission for camera feed
3. Face Detection: Analyzes face every 10 seconds
4. Emotion Classification: AI determines dominant emotion
5. Data Storage: Saves emotion with timestamp and website
6. Statistics: Generates daily emotion analytics

🐛 Debug Mode

Test the extension with debug mode:

1. Open test-debug.html?debug in your browser
2. Camera feed will be visible
3. Real-time debug information
4. Test camera permissions and AI models

🔒 Privacy & Security

• No Data Collection: All processing happens locally
• No Image Storage: Camera feed is analyzed in real-time only
• Local Storage: Emotion logs saved only on your device
• No External Servers: Complete offline operation
• Open Source: Full code transparency

🎯 Target Websites

The extension activates on these platforms:

• YouTube - Video watching emotions
• Netflix - Movie/series viewing emotions
• Instagram - Social media browsing emotions
• Facebook - Social interaction emotions
• Twitter - News/social feed emotions
• TikTok - Short video content emotions

📈 Analytics Dashboard

View your emotion patterns:

• Today's Statistics: Real-time emotion counts
• Emotion Distribution: Visual charts and graphs
• Website Activity: Which sites trigger which emotions
• Time Analysis: Emotion patterns throughout the day

🛠️ Development

Requirements

• Chrome Browser (latest version)
• Camera access
• Internet connection (for AI model loading)

File Structure

chrome-extension/
├── manifest.json          # Extension configuration
├── popup.html            # Main interface
├── popup.js              # Interface controller
├── emotion-detector.js   # AI detection system
├── background.js         # Service worker
├── content.js           # Content script
├── face-api.min.js      # AI library
├── icons/               # Extension icons
├── test-debug.html      # Debug interface
└── README.md           # This file

🔄 Version History

• v1.0.0: Initial release with basic emotion detection

🤝 Contributing

1. Fork the project
2. Create feature branch (git checkout -b feature/new-feature)
3. Commit changes (git commit -am 'Add new feature')
4. Push to branch (git push origin feature/new-feature)
5. Create Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Face-api.js - Amazing AI face detection library
• Chrome Extensions - Powerful browser extension platform
• TensorFlow.js - Machine learning in the browser
• Open Source Community - For inspiration and support

---

🎭 Start tracking your digital emotions today! 😊