🎓 CourseTracker AI

✨ Track every lecture. Never lose your place. ✨

A modern Chrome Extension that auto-detects course websites and adds a smart progress-tracking system beside every video.

---

🚀 What it does

Open a course page → checkboxes appear → tick what you've watched → progress bar updates → state is saved forever.

 ┌─────────────────────────────────┐
│ CourseTracker AI │
│ Progress 18 / 45 40% │
│ ████████████░░░░░░░░░░░░░░░ │
└─────────────────────────────────┘
☑ 1. Introduction
☑ 2. Setup
☐ 3. Variables & Types
☐ 4. Functions

---

✨ Features

🎯 Auto detect	Works on Udemy, Coursera, YouTube playlists, 100xDevs, and any generic course-style site
✅ Inline checkboxes	Tick lectures right where they live in the page
📊 Live progress bar	Floating sidebar shows completion in real time
⏱️ Total playlist duration	See watched / remaining / total time at a glance
💾 Persistent state	chrome.storage.local keeps your progress across sessions
🌗 Dark / Light / Auto	Adapts to your system theme automatically
⏸️ Stop / ▶️ Resume	One click to pause tracking on any page
🙈 Hide / 🙉 Show	Collapse to a floating handle when you don't need it
🔄 SPA-aware	MutationObserver + URL polling keeps up with React / lazy-load
🖐️ Draggable sidebar	Grab the header to move the tracker anywhere; double-click the brand to reset
✨ AI Playlist Builder	Describe what you want ("all backend videos") and Groq picks the right lectures
📂 Custom playlists	Cherry-pick lectures into named playlists that open in a dedicated tab
▶️Inline mini-player	Play YouTube / Vimeo videos right inside the playlist tab — minimize to a floating bottom-right window or close anytime
📤 Export / Import	Backup your progress as JSON
⚡ Zero build	Pure vanilla JS — no bundler, no dependencies

---

🌐 Supported Platforms

Platform	Status
🎬 YouTube playlists	✅
🟪 Udemy	✅
🔵 Coursera	✅
🟧 100xDevs	✅
🌍 Generic course sites	✅

---

📦 Installation — Load into Chrome

⚠️ This extension is not on the Chrome Web Store yet, so you'll install it manually via "Load unpacked" — takes about 60 seconds.

Step 1 — Get the code

Clone the repo (or download the ZIP from the green Code button → Download ZIP and unzip it):

git clone https://github.com/mightbeanshuu/CourseTracker-AI.git
cd CourseTracker-AI

Step 2 — Open Chrome's extensions page

In the address bar, type:

chrome://extensions/

This works in Chrome, Brave, Edge, Arc, Opera, and any other Chromium-based browser.

Step 3 — Enable Developer Mode

Toggle Developer mode ON (top-right corner of the extensions page). Three new buttons will appear: Load unpacked, Pack extension, Update.

Step 4 — Load the extension

Click Load unpacked, then in the file picker select the CourseTracker-AI folder you just cloned (the folder that contains manifest.json — not a parent folder, not an inner subfolder).

You'll see a new card appear:

🎓 CourseTracker AI 1.5.0
Automatically detects online course websites…
ID: <auto-generated>
[ Details ] [ Remove ] [ ↻ ] [ ●━━ ] ← make sure the toggle is ON

Step 5 — Pin it to the toolbar

Click the 🧩 puzzle-piece icon in Chrome's toolbar → find CourseTracker AI → click the 📌 pin icon so the toolbar button is always visible.

Step 6 — Try it

Open any supported course page (a YouTube playlist works best for a first test):

https://www.youtube.com/playlist?list=PLu0W_9lII9ai6fAMHp-acBmJONT7Y4BSG

Within ~1 second you should see:

• ✅ A floating CourseTracker AI sidebar in the top-right of the page with a 0% progress bar
• ✅ A small checkbox appearing next to each video in the playlist
• ✅ The toolbar icon opens a popup showing the lecture list, My Playlists, and the ✨ AI Playlist Builder

If anything's missing, refresh the tab once — the content script needs a clean page load to inject.

---

🔄 Updating to the latest version

cd CourseTracker-AI
git pull

Then on chrome://extensions/ click the ↻ reload icon on the CourseTracker AI card. Refresh any open course tabs afterward so they pick up the new content script.

---

🤖 Optional — Enable the AI Playlist Builder

The AI feature is Bring-Your-Own-Key to keep things free and private. The key never enters the repo and never leaves your machine except to call Groq.

1. Grab a free key at console.groq.com/keys
2. Either:
   • (Easiest) Open the extension popup → click ⚙ in the ✨ AI Playlist Builder card → paste your key → Save, or
   • (Auto-hydrate) Copy local.config.example.json to local.config.json, paste your key into the aiKey field. The popup will auto-load it on first open. (local.config.json is gitignored — it stays on your machine.)
3. On any course page, type a prompt like "all backend videos" and click Generate playlist — the AI builds a curated playlist for you in seconds.

---

🧯 Troubleshooting

Symptom	Fix
Sidebar doesn't appear	Refresh the tab once after loading the extension. Content scripts only inject on fresh page loads.
"Extension context invalidated" errors	You reloaded the extension while tabs were open. Close those tabs, open them fresh. Errors are harmless and self-clear.
Progress shows 0/0	The DOM hasn't rendered the lectures yet. Wait for the page to finish loading, then click Rescan in the sidebar.
Checkboxes overlap weirdly	The site's CSS conflicts with the injected checkbox. Open an issue with the URL and I'll add a targeted style fix.
AI says "no matching lectures"	The lecture titles may not match your prompt. Try a more inclusive phrase or list specific titles: "add: routing, middleware, auth".

---

🎮 Usage

Action	Where
Tick a lecture	Checkbox beside the lecture title
See progress	Floating sidebar (top-right)
Pause tracking	⏸ button in sidebar or popup
Hide sidebar	✕ button → floating handle returns it
Rescan page	Sidebar → "Rescan" or popup → "Rescan"
Toggle theme	Sidebar → "Theme" cycles dark / light / auto
Export / Import	Popup → bottom buttons
Reset course	Popup → "Reset this course"

---

🏗️ Architecture

 ┌────────────────────┐
│ manifest.json │ ← MV3
└─────────┬──────────┘
│
┌───────────────┼────────────────┐
│ │ │
┌────▼─────┐ ┌─────▼─────┐ ┌─────▼─────┐
│background│ │ content.js│ │ popup/ │
│ worker │ │ │ │ │
└──────────┘ └─────┬─────┘ └─────┬─────┘
│ │
┌─────────┴────────────────┘
│
┌───────▼──────────┐
│ utils/ │
│ • domScanner │ platform detect + lecture extract
│ • progress │ completion math
│ • storage │ chrome.storage.local wrapper
└──────────────────┘

---

📂 Folder Structure

CourseTracker-AI/
├── 📄 manifest.json
├── ⚙️ background.js
├── 🧠 content.js
├── 📁 popup/
│ ├── popup.html
│ ├── popup.js
│ └── popup.css
├── 🎨 styles/
│ └── content.css
├── 🔧 utils/
│ ├── domScanner.js
│ ├── storage.js
│ └── progress.js
└── 🖼️ assets/
├── icon16.png
├── icon48.png
└── icon128.png

---

🧮 Progress Formula

Completion % = (Completed Videos / Total Videos) × 100

Updates instantly on every tick / untick.

---

💾 Data Schema

{
"ct_courses": {
"udemy.com/course/example": {
"url": "udemy.com/course/example",
"lectures": {
"lec_abc_0": { "done": true, "title": "Intro", "index": 0, "duration": "4:12" },
"lec_def_1": { "done": false, "title": "Setup", "index": 1, "duration": "8:30" }
},
"meta": { "createdAt": 1700000000000, "updatedAt": 1700000000000 }
}
},
"ct_settings": {
"theme": "auto",
"enabled": true,
"hidden": false
}
}

---

🔐 Permissions

["storage", "activeTab", "scripting"]

🟢 No tracking. No analytics. No network calls. Everything stays on your device.

---

🛠️ Tech Stack

• 🧩 Chrome Extension Manifest V3
• 🟨 Vanilla JavaScript (no build step)
• 🎨 CSS custom-properties (Tailwind-style tokens)
• 💾 Chrome Storage API
• 👁️ MutationObserver + SPA URL listener

---

🗺️ Roadmap

• 🤖 AI-generated lecture notes & summaries
• 📍 Resume-where-you-left
• 🔔 Smart reminders & streaks
• 🎯 Focus / Pomodoro mode
• ☁️ Cloud sync (Supabase / Firebase)
• 📱 Cross-device sync via chrome.storage.sync
• 📈 Daily study analytics

---

🧑‍💻 Development

# 1. Make your changes# 2. Reload the extension at chrome://extensions/# 3. Refresh the course tab — done. No build step.

Adding a new platform? Extend utils/domScanner.js:

casePLATFORMS.MY_NEW_PLATFORM:
items=scanMyNewPlatform();break;

---

📜 License

MIT © mightbeanshuu

---

⭐ Star the repo if it helps you stay on track!

Made with 💜 for self-learners everywhere