Scrollage

Inspiration

We noticed how easy it is to lose hours mindlessly scrolling through YouTube Shorts, TikTok, and Instagram Reels. What started as "just one more video" turns into endless scrolling, leaving us feeling unproductive and guilty. We wanted to create a tool that doesn't just block content, but transforms that time into something meaningful, turning every scroll into a donation to causes that matter. Scrollage was born from the idea that our screen time could fund charities that include healthcare and education.

What it does

Scrollage is a Chrome extension that tracks your YouTube Shorts watch time and gamifies mindful consumption. Here's how it works: Smart Timer Overlay: Displays your daily watch time in real time with color coded progress indicators Daily Limits: Set custom time limits for short form video consumption. Mindful Interruptions: When you exceed your limit, a modal appears with a countdown timer, pausing the video and encouraging reflection. Donation Tracking: Every time you continue past your limit, your donation counter increases (configurable amount per scroll). Educational Recommendations: Suggest long form educational content as alternatives. Impact Visualization: See real time impact metrics (e.g., "3 students helped" for Khan Academy donations). One-Click Donations: Direct links to charity donation pages with pre filled amounts.

How we built it

We used the Chrome Extension Manifest V3 for the extension framework, Vanilla JavaScript (ES6+) with class-based component architecture, HTML5 & CSS3 for UI design, Chrome Storage API for local and synced data persistence, Chrome Alarms API for daily reset scheduling, Content Scripts to inject features into YouTube, and MutationObserver API to detect navigation between Shorts

Challenges we ran into

Video Pause/Resume: YouTube aggressively auto-resumes videos after pausing. We solved this with an interval-based pause enforcer that repauses every 100ms while the modal is visible. Scroll Detection: Detecting navigation between Shorts was tricky since YouTube uses client-side routing without full page reloads. We used MutationObserver and scroll event listeners to detect URL changes. Multiple Video Elements: YouTube Shorts sometimes has multiple elements in the DOM. We implemented smart video detection that finds the currently playing video in the viewport. State Management: Coordinating state between content scripts, background workers, and the popup without a state management library required careful event driven architecture.

Accomplishments that we're proud of

Zero Dependencies: Built entirely with vanilla JavaScript—no npm packages, no frameworks, just pure web APIs. Privacy-First: All data stays local on the user's device; no tracking, no servers, no data collection. Smooth UX: Despite being a browser extension, the UI feels native and polished with smooth animations. Real Donations: Direct integration with actual charity donation pages—users can really make an impact. Configurable Everything: Users can customize donation amounts, time limits, wait times, and limited charity choices.

What we learned

Browser Extension Development: Deep dive into Chrome Extension Manifest V3, content scripts, and service workers. DOM Manipulation at Scale: Learned to work with complex, dynamic DOMs like YouTube's. Event-Driven Architecture: Built a robust pub/sub system with custom events for component communication. User Psychology: Balancing interruption with encouragement—making limits feel helpful, not punitive. Charity Impact Metrics: Researched real world costs for educational access, medical care, and conservation. CSS-Only Animations: Created pulse effects, progress circles, and transitions without JavaScript animation libraries. State Synchronization: Managing state across chrome.storage.local, chrome.storage.sync, and in-memory objects.

What's next for Scrollage

Platform Expansion: Add support for TikTok, Instagram Reels, and Facebook Reels. Advanced Analytics: Monthly/yearly trends, streak tracking, and goal setting. Social Features: Share your impact with friends, charity leaderboards. Gamification: Badges, achievements, and milestone celebrations. Stripe Integration: Automated donation processing with recurring payment options. Browser Compatibility: Firefox, Safari, and Edge extensions. Mobile Apps: Native iOS and Android apps for mobile social media. AI Recommendations: Personalized educational content suggestions based on interests.

Built With

• chromeapis
• css
• html
• javascript
• mutationobserver
• webapis