Freelance & Gmail Alert Notifier - Chrome Extension

Project Overview

Freelance & Gmail Alert Notifier is a sophisticated Chrome extension designed to help freelancers and professionals stay on top of important notifications from Upwork, Fiverr, and Gmail. The extension monitors these platforms in real-time and plays customizable audio alerts when new notifications are detected, ensuring you never miss a potential job opportunity or important email. Built with Chrome's Manifest V3 architecture, it provides reliable notification detection with minimal resource usage.

Key Features

• Multi-Platform Monitoring: Simultaneously tracks notifications from Upwork, Fiverr, and Gmail
• Custom Audio Upload: Upload and use your own audio files for personalized alert sounds
• Repeat Functionality: Configure sound playback to repeat 1-20 times for important alerts
• Advanced Gmail Detection: Multiple detection methods including page title parsing, DOM element scanning, and inbox count tracking
• Offscreen Audio Playback: Utilizes Chrome's offscreen API for reliable, uninterrupted audio playback in Manifest V3
• Debug Mode: Comprehensive logging system for troubleshooting and monitoring extension behavior
• Sound Control: Real-time stop/start controls for audio playback through the popup interface
• Persistent Settings: All configurations stored locally and persist across browser sessions
• Test Functions: Built-in testing utilities to validate notification detection and sound playback
• Error Handling: Robust error management with detailed logging for troubleshooting
• User-Friendly Interface: Clean, intuitive popup interface for easy configuration

Technical Stack

• Extension Architecture: Chrome Manifest V3 with service worker background script
• Content Scripts: JavaScript injection for monitoring Upwork, Fiverr, and Gmail pages
• Offscreen API: Dedicated offscreen document for reliable audio playback
• Storage API: Chrome's local storage for settings persistence
• Messaging API: Background-content script communication for real-time notifications
• DOM Manipulation: Advanced selectors for detecting platform-specific notification elements
• Audio Processing: Base64 encoding for custom audio file storage
• Permissions: Minimal permissions (storage, scripting, offscreen) with targeted host access
• Web Accessible Resources: Secure audio file handling with proper resource declarations
• Error Logging: Comprehensive console logging with emoji indicators for easy debugging

Technical Implementation

The extension uses a three-layer architecture:

1. Content Scripts monitor each platform's DOM for notification changes using MutationObserver and periodic checks
2. Service Worker manages the extension lifecycle, message routing, and offscreen document creation
3. Offscreen Document handles audio playback independently from the main extension context

Detection methods include:

• Upwork: Monitors notification badge elements with data-test attributes
• Fiverr: Tracks notification count badges in the navigation header
• Gmail: Multiple detection strategies including title parsing, inbox element scanning, and unread email DOM counting

Business Impact

• Helps freelancers respond faster to job opportunities on Upwork and Fiverr
• Reduces missed opportunities by providing persistent audio alerts
• Increases productivity by eliminating the need to constantly check multiple platforms
• Customizable alert system adapts to individual user preferences and workflows
• Debug mode enables quick troubleshooting for optimal reliability
• Lightweight design ensures minimal impact on browser performance