← Back to Projects

Track My Course

A Chrome extension that turns YouTube playlists into structured courses with progress bar, checkmarks, and duration tracking β€” all inside YouTube.

JavaScript CSS HTML

TrackMyCourse – YouTube Playlist Progress Tracker

Turn YouTube playlists into courses. Track your playlist with checkmarks, progress bar, total and watched duration, and completion percentage.

TrackMyCourse Banner

Get it on Chrome Web Store
Star on GitHub

TrackMyCourse helps you stay organized while learning from YouTube playlists.

Instead of passively watching videos and forgetting your progress, you can turn any playlist into a structured online course. The extension integrates directly into YouTube, showing a progress bar, completion percentage, watched and total duration, and checkmarks for finished videos β€” giving you a clear view of your learning journey.

License: GPL v3
Open Issues
Pull Requests


πŸ“š Table of Contents


Why TrackMyCourse?

YouTube is a powerful place for self-learning β€” from coding tutorials to full university lectures.
But since YouTube is designed for entertainment, not structured courses, it’s easy to lose progress, skip videos, or lose consistency.

TrackMyCourse solves this by adding a clean progress-tracking layer to YouTube playlists, showing completion percentage, durations, and checkmarks to keep your learning organized, consistent, and motivating.

Ready to use TrackMyCourse? Install now and start tracking your playlists.


✨ Features

  • πŸ“Š Visual Progress Bar – Instantly see how much of a playlist you’ve completed.
  • βœ… Video Checkmarks – Mark videos as finished to keep your learning on track.
  • ⏱️ Duration Tracking – Know your watched and total time to plan your study sessions better.
  • πŸ”„ Dynamic Playlist Scanning – Automatically detects videos in the playlist.
  • πŸ’Ύ Saved Locally – Your progress stays saved in your browser, no sign-up needed.

All features appear seamlessly inside YouTube’s interface.

Preview of Features:

TrackMyCourse Features


πŸš€ Installation & Usage

  1. Install TrackMyCourse
  2. Go to any YouTube playlist page.
  3. Click the "Start Course" button near the playlist title.

Once enabled, the progress bar and checkboxes will automatically appear for that playlist.


πŸ› οΈ For Developers

This section provides information for anyone who wants to contribute to the project or run it locally.

Contributing

Contributions are welcome! Bug fixes, feature suggestions, and pull requests are appreciated. For major changes, please open an issue first to discuss your ideas.

Running Locally

Follow these steps to set up the project on your local machine.

  1. Clone the repository:
    git clone https://github.com/AlokYadavCodes/track-my-course.git
    
  2. Install dependencies:
    npm install
    
  3. Open Chrome Extensions: Navigate to chrome://extensions/ in your browser.
  4. Enable Developer Mode: Ensure the Developer mode toggle is switched on.
  5. Load the extension: Click "Load unpacked" and select the track-my-course folder you cloned.

Note: Changes to the source code will only reflect after you reload the extension on the chrome://extensions/ page.

Building browser bundles

There is a script (scripts/build.js) that generates the Chrome and Firefox bundles into the dist/ folder.

Run the build commands:

# build Chrome bundle
npm run build:chrome

# build Firefox bundle
npm run build:firefox

# build both Chrome and Firefox
npm run build

The script will copy icons/ and src/ into dist/<browser>/ and include the appropriate manifest (manifest.chrome.json or manifest.firefox.json) for each browser.

Project Structure

track-my-course/
β”œβ”€β”€ icons/             # Contains all extension icons.
β”œβ”€β”€ src/               # Contains the main source code.
β”‚   β”œβ”€β”€ background/    # Handles background tasks.
β”‚   β”œβ”€β”€ content/       # Injects scripts directly into web pages.
β”‚   β”œβ”€β”€ popup/         # Code for the extension's popup window.
β”‚   └── styles/        # Contains CSS files for UI elements injected onto pages.
β”œβ”€β”€ manifests/         # Browser-specific manifests
β”‚   β”œβ”€β”€ manifest.chrome.json
β”‚   └── manifest.firefox.json
β”œβ”€β”€ .prettierrc        # Prettier configuration for consistent formatting
β”œβ”€β”€ package.json       # Project dependencies and scripts
└── package-lock.json  # Locked dependency versions

πŸ” Permissions Explained

TrackMyCourse requests only the permissions it needs to function, nothing more.

Permission Why It's Needed
storage To save your playlist progress locally in the browser.
webNavigation To detect playlist pages so the extension can apply the correct logic.
host_permissions To display the progress UI only on YouTube pages.

Privacy first: No personal data is collected, stored, or transmitted.

πŸ“œ License

This project is licensed under the GNU GPLv3 License.

See the LICENSE file for full details.