Project summary
Modestly Kids is a Chrome extension built to help children safely and calmly browse YouTube. It provides a distraction-free experience through a simplified interface, removes ads and autoplay, and gives parents fine-grained control over time limits, content access, and visual focus.
Project Goal
The client needed a user-friendly browser extension that would:
- Provide a clean and accessible interface for children
- Allow parents to enforce restrictions and manage time usage
- Remain stable and scalable despite YouTube’s complexity and Chrome’s extension limitations
Responsibilities
- Designed and implemented full UI/UX using HTML, CSS, Vanilla JS, and Webpack
- Built all frontend logic and backend integrations from scratch
- Developed secure subscription infrastructure and payment flow via Paddle and Supabase
- Integrated authentication, video filtering, time tracking, and parental control features
- Managed client communication, feedback loops, and long-term support
Key Features
Parental Controls
- Toggle simplified interface on/off
- Daily screen time limits with visual timers
- Scheduled screen-break reminders with stretching animations
- Keyword-based content blocking and automatic 18+ filtering
- Cross-device sync of all parental settings
Custom Video Experience
- Fully custom video player (bypassing YouTube embed constraints)
- Ads and autoplay disabled
- Clean search with safe suggestions and integrated watch history
- UI designed to minimize distraction and prevent content rabbit holes
Authentication & Subscription
- Google OAuth 2.0 login
- Supabase for managing user data, real-time permissions, and device sync
- Paddle for secure, reliable subscription billing
- Password recovery via Postmark
Architecture & Technical Highlights
Custom YouTube Player
- YouTube embed windows are blocked on Chrome extensions by default.
- Built a fully independent video player logic that mirrors core playback functions but avoids breaking changes from YouTube updates.
- Ads, comments, autoplay, and recommendations were fully stripped from the viewing experience.
Centralized API & Performance Optimization
- Built a background “Provider” in the service worker to centralize YouTube API queries
- Broadcasts search results and metadata across tabs to reduce quota consumption and avoid rate limits
- Reduced memory and CPU usage by minimizing duplicate API requests
Subscription & DB Architecture
- Structured Supabase database to efficiently store settings, license status, usage metrics
- Real-time webhook integration syncs subscription status from Paddle to Supabase and extension UI
- Password recovery and account management handled securely through Postmark
Performance
- Full extension boot time is under 500 ms
- Lazy-loading of resources and minimal duplication of runtime logic
- Significant resource savings compared to native YouTube site
- Compliant with Google’s strict Chrome Web Store extension policies
Key Technical Challenges
1. Seamless Virtual UI Injection
Built a UI “wrapper” that overrides YouTube’s Single Page Application (SPA) shell, intercepting navigation events and DOM mutations. This allowed full control over the YouTube interface without breaking the core playback engine, simulating a native-like environment inside a third-party site.
2. Distributed State & Cross-Context Synchronization
Implemented global state management across isolated browser processes (background worker, content script, popup). Usage data like daily timers, lockouts, and stretch breaks stay in sync across multiple tabs in real time.
3. Real-Time Subscription Infrastructure
Supabase database listeners instantly sync account and payment events from Paddle webhooks. This enables real-time changes to user access without refreshes or polling, giving the extension a true SaaS behavior model.
4. Advanced Scheduling Engine
Developed a rules-based scheduler supporting complex cases like overlapping time windows (e.g., 10 PM to 8 AM) and per-day quotas. Usage is tracked across all tabs and locked down if limits are exceeded.
5. Resilient Payment Lifecycle
Due to Chrome extension CSP limitations, implemented a multi-step checkout bridge using Paddle and Supabase Edge Functions. All license activation and renewal is automated through secure server-side logic.
6. Centralized API Strategy
Moved all network calls to a centralized background worker. One tab fetches data and shares with others, reducing load, speeding up the UI, and bypassing rate limit errors from the YouTube API.
Tech Stack
- HTML
- CSS
- Vanilla JS
- Webpack
- Supabase
- Google OAuth 2.0
- Paddle
- YouTube API
- Postmark
Outcome
- Delivered a polished, production-ready MVP with solid architecture and long-term maintainability
- Solved multiple Chrome extension limitations and YouTube platform constraints
- Enabled full parental control, licensing logic, and video filtering inside a third-party video platform
- Achieved real-time sync across tabs and devices with minimal overhead
- Laid a scalable foundation for a potential mobile or tablet version in future phases
