Skip to content

YouTube Extension which shows real-time finish times for different YouTube playback speeds, letting users quickly view and choose their preferred speed

License

Notifications You must be signed in to change notification settings

CPT-Dawn/Chrono

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

116 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

โฑ๏ธ YouTube Time Manager

Because life's too short to watch 2-hour tutorials at 1x speed โšก

Chrome Web Store Version License

A powerful Chrome extension that transforms your YouTube watching experience with advanced time management, intelligent speed controls, and a sleek, customizable interface. Say goodbye to video time anxiety and hello to productivity! โœจ


๐ŸŽฏ What Does It Do?

Ever wondered "When will this video actually end?" or "How long until I finish this playlist?" YouTube Time Manager answers these questions and more with style. It's your personal YouTube assistant that helps you:

  • ๐Ÿ“Š Track Time Like a Pro: See exactly when your video, chapter, or entire playlist will finish
  • โšก Speed Control Mastery: One-click speed changes with beautiful interactive rows
  • ๐ŸŽฏ Custom Targets: Set specific finish times or durations - "I need to be done by 3 PM!"
  • โ˜• Ad Break Entertainment: Enjoy a relaxing coffee animation while ads play (because ads fund free content!)
  • ๐ŸŽจ Personalize Everything: Toggle cards, choose themes, customize your dashboard

Think of it as a fitness tracker for your YouTube habits, but way more stylish.


โœจ Features That'll Make You Go "Wow!"

๐Ÿ• Flip Clock Display

A gorgeous, animated flip clock showing real-time countdown. Watching it update is oddly satisfying (we won't judge if you just stare at it for a minute).

๐Ÿ“น Triple Threat Tracking

  • Video Section: Remaining time, finish time, progress bar
  • Chapter Section: Smart chapter detection with per-chapter tracking
  • Playlist Section: Total playlist time, videos remaining, overall progress

๐ŸŽ›๏ธ Speed Control on Steroids

  • Interactive Speed Rows: Click any speed (1x - 2x) to instantly apply it
  • Hover Effects: Buttery-smooth animations that feel premium
  • Active Highlighting: Always know your current speed
  • Quick Controls: ยฑ buttons in header for rapid adjustments

๐ŸŽฏ Custom Target System

Want to finish by 3 PM? Need to watch 45 minutes of content? Set custom targets for:

  • Target Duration: "I have exactly 30 minutes"
  • Target Finish Time: "I need to be done by 2:30 PM"
  • Auto-calculations: Instantly see required playback speed

โ˜• Delightful Ad Break Card

Because ads are inevitable, we made them entertaining:

  • Animated coffee cup that fills and empties
  • Rotating humorous messages ("Perfect time for a stretch! ๐Ÿง˜")
  • Smooth card transitions
  • Your time tracking pauses during ads

๐ŸŽจ Customization Galore

Settings Panel with organized sections:

  • Time Format: 12h or 24h display
  • Appearance: Glassmorphism (default) or Solid YouTube Black
  • Display Options: Toggle individual cards on/off
  • Compact Mode: Auto-collapses when all cards hidden

๏ฟฝ Intelligent Features

  • Smart Chapter Detection: Multiple detection methods for maximum reliability
  • Playlist Intelligence: Tracks current position, calculates remaining time
  • Auto-Updates: Real-time updates every 100ms
  • Navigation Handling: Survives YouTube's SPA navigation

๐Ÿš€ Installation

From Chrome Web Store (Recommended)

  1. Visit the Chrome Web Store
  2. Click "Add to Chrome"
  3. Profit! ๐ŸŽ‰

Manual Installation (For Developers)

# Clone the repository
git clone https://github.com/yourusername/youtube-time-manager.git

# Open Chrome and go to chrome://extensions/
# Enable "Developer mode" (top right)
# Click "Load unpacked"
# Select the extension folder

๏ฟฝ How to Use

Basic Usage (aka The "I Just Want It to Work" Guide)

  1. Go to any YouTube video

    • The extension automatically injects a beautiful dashboard below the video
  2. Watch the magic happen

    • Flip clock shows current time
    • Video section displays remaining time and finish time
    • If the video has chapters, you'll see chapter tracking too
    • In a playlist? Playlist section appears automatically!
  3. Change speed like a boss

    • Click any speed row in the details panel
    • Or use the ยฑ buttons in the header
    • Speed updates instantly, UI updates automatically

Pro Tips ๐ŸŽ“

Want to finish by a specific time?

1. Open any section's details panel
2. Enter your target finish time (e.g., "3:30 PM")
3. See the required speed instantly
4. Click that speed row to apply it

Binge-watching a playlist?

1. Open playlist section
2. Set target video (e.g., watch first 10 videos)
3. See total time remaining
4. Adjust speed to fit your schedule

Minimalist mode?

1. Click settings gear icon
2. Toggle off unwanted cards
3. Enjoy a clean, compact interface

Light mode YouTube user?

1. Open settings
2. Enable "Solid Background"
3. Get perfect contrast with YouTube's light theme

๐ŸŽจ Visual Showcase

The Dashboard

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  1.5x     [Clock: 02:45:30]     โš™๏ธ   โ”‚  โ† Header
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ ๏ฟฝ Video                          โ–“โ–“โ–“โ–‘  โ”‚  โ† Video card
โ”‚  Remaining: 15:30 | Finish: 3:15 PM    โ”‚
โ”‚  [Interactive speed rows: 1x-2x]       โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ ๏ฟฝ Chapter                        โ–“โ–“โ–‘โ–‘  โ”‚  โ† Chapter card
โ”‚  Chapter 3 of 8: Introduction          โ”‚
โ”‚  [Speed options with hover effects]    โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ ๐ŸŽฌ Playlist                       โ–“โ–‘โ–‘โ–‘  โ”‚  โ† Playlist card
โ”‚  Video 5/20 | 2h 15m remaining         โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

During Ads

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚         โ˜•                              โ”‚
โ”‚    [Coffee cup animation]               โ”‚
โ”‚                                         โ”‚
โ”‚         Ad Break                        โ”‚
โ”‚  "Grabbing some popcorn ๐Ÿฟ"            โ”‚
โ”‚  Your time tracking will resume shortly โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

โš™๏ธ Settings Deep Dive

Time Format

  • 12-Hour: 3:45 PM (for humans)
  • 24-Hour: 15:45 (for developers)

Appearance

  • Glassmorphism โœจ: Semi-transparent with blur (default, looks magical)
  • Solid Background ๐ŸŽจ: YouTube black (#0f0f0f, perfect for light mode)

Display Options

  • Show Video Card: Toggle video section on/off
  • Show Chapter Card: Hide chapters if you don't care
  • Show Playlist Card: Remove playlist tracking

Compact Mode (Automatic)

When all cards are hidden:

  • Container shrinks to header-only
  • No wasted space
  • Settings still fully functional

๏ฟฝ๏ธ Technical Stuff (For the Nerds)

Built With

  • Pure JavaScript - No frameworks, just raw power
  • Modern CSS - Glassmorphism, animations, gradients
  • Chrome Extension API - Storage, scripting, content scripts

Architecture

Extension
โ”œโ”€โ”€ manifest.json       # Extension config
โ”œโ”€โ”€ content.js          # Core logic (1800+ lines of goodness)
โ”œโ”€โ”€ styles.css          # Beautiful styling
โ”œโ”€โ”€ overlay.html        # UI structure
โ””โ”€โ”€ icons/              # Pretty icons

Key Features

  • Mutation Observer: Detects YouTube's navigation
  • Debouncing: Prevents excessive updates
  • State Management: Chrome storage for settings
  • Error Handling: Comprehensive error recovery
  • Performance: 100ms update cycle, 60fps animations

Browser Compatibility

  • โœ… Chrome/Chromium (fully supported)
  • โœ… Edge (works great)
  • โœ… Brave (tested)
  • โš ๏ธ Firefox (use as-is, may need tweaks)

๏ฟฝ Known Issues & Limitations

The "Not Really Issues" Issues

  1. YouTube Changes Layout: YouTube updates their site often. We adapt, but there might be 24h where things look wonky.
  2. Livestreams: Time estimation on live content is... creative. We're working on it!
  3. Ad Blocker Conflicts: If you block ads, the ad card won't show. That's... expected?

Actual Limitations

  • Chapter detection depends on YouTube's page structure
  • Playlist calculations assume linear watching
  • Time estimates don't account for buffering (we're not psychic)

Found a bug? Report it here with:

  • What happened
  • What you expected
  • Screenshots (bonus points!)
  • Your browser version

๐Ÿค Contributing

We love contributions! Here's how:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Ideas for Contributions

  • ๐ŸŒ Internationalization (i18n)
  • ๐ŸŽจ More themes
  • ๐Ÿ“Š Watch history analytics
  • โŒจ๏ธ Keyboard shortcuts
  • ๐ŸŽฎ More speed presets
  • ๐Ÿ“ฑ Mobile optimization (for Kiwi Browser)

๏ฟฝ License

This project is licensed under the MIT License - see the LICENSE file for details.

TL;DR: Do whatever you want with it, just don't sue us. โค๏ธ


๏ฟฝ Acknowledgments

  • YouTube: For building a platform that needs extensions like this
  • Coffee: For fueling late-night coding sessions
  • You: For using this extension and making it worthwhile

๐Ÿ’– Support the Project

If this extension saved you time (literally), consider:

  • โญ Starring this repository
  • ๐Ÿ’ฌ Leaving a review on Chrome Web Store
  • ๐Ÿ› Reporting bugs you find
  • ๐Ÿ’ก Suggesting features you'd love
  • โ˜• Buying me a coffee (coming soon!)

๐Ÿ“ž Contact & Links


๐ŸŽญ Fun Facts

  • This extension has 1800+ lines of JavaScript love
  • The flip clock animation took 3 hours to perfect
  • Coffee cup animation: 47 lines of CSS, 100% organic
  • The settings panel has 5 sections of pure customization
  • Ad messages rotate every 3 seconds (there are 7 of them)
  • Total development time: Too many coffees to count โ˜•

๐Ÿ“š Version History

v2.0.0 (Current)

  • โœจ Complete redesign with modern UI
  • โšก Interactive speed rows with click functionality
  • โ˜• Ad break card with coffee animation
  • ๐ŸŽจ Theme toggle and card visibility settings
  • ๐Ÿ“ฆ Compact mode for minimalists

v1.x

  • ๐Ÿ—๏ธ Initial release
  • โฑ๏ธ Basic time tracking
  • ๐ŸŽฏ Speed controls

Made with โค๏ธ, โ˜•, and way too many YouTube tutorials

โฌ† Back to Top

About

YouTube Extension which shows real-time finish times for different YouTube playback speeds, letting users quickly view and choose their preferred speed

Topics

Resources

License

Stars

Watchers

Forks