Watch YouTube Shorts while your AI finishes thinking.
MicroReel is a Chrome extension that shows a non-intrusive overlay — playing YouTube Shorts or micro-learning cards — while ChatGPT, Claude, Gemini, or GitHub Copilot is generating a response. When generation finishes, the overlay gets out of the way cleanly.
- MicroReel detects when an AI host starts generating using a mutation-observer on the page DOM.
- After a brief configurable delay, the overlay appears in the corner of your screen.
- In entertainment mode, a YouTube Short plays. It is allowed to finish before the overlay closes.
- In education mode, rotating micro-learning cards are shown instead.
- When generation stops, MicroReel waits for any in-progress video to end before dismissing the overlay.
| Host | URL |
|---|---|
| ChatGPT | chatgpt.com / chat.openai.com |
| Claude | claude.ai |
| Gemini | gemini.google.com |
| GitHub Copilot | github.com/copilot |
- Entertainment mode — plays YouTube Shorts in a floating iframe overlay
- Education mode — cycles through micro-learning cards with a no-repeat window
- Draggable & resizable overlay — drag to any corner, resize to your preference; position is remembered
- Per-site toggle — enable or disable MicroReel independently for each AI host
- Mute control — mute/unmute video audio without leaving the page
- Configurable timing — set start delay (250 ms – 10 s) and card rotation interval (3 s – 30 s)
- Overlay position — choose top-right or side-right
- Fully local — no backend, no telemetry, no account required
-
Clone and install dependencies
git clone https://github.com/DannyyyL/microReel.git cd microReel npm install -
Build the extension
npm run build
-
Load into Chrome
- Open
chrome://extensions - Enable Developer mode (toggle in the top-right)
- Click Load unpacked
- Select the
dist/folder
- Open
-
Try it out — open ChatGPT, Claude, Gemini, or GitHub Copilot and send a prompt.
| Command | Description |
|---|---|
npm run build |
Production build |
npm run dev |
Watch mode (rebuilds on file change) |
npm test |
Run tests |
npm run typecheck |
TypeScript type-check without emitting |
The extension is built with TypeScript, React (options page), and esbuild.
Open the extension options page (click the MicroReel icon → options, or visit chrome://extensions and click Details → Extension options) to configure:
- Global on/off toggle
- Mode — Entertainment (YouTube Shorts) or Education (cards)
- Overlay position — Top-right or Side-right
- Per-site toggles — ChatGPT, Claude, Gemini, Copilot
- Start delay — How long after generation begins before the overlay appears
- Rotation interval — How long each card is shown (education mode)
- Mute — Whether video audio starts muted
src/
background.ts # Service worker — event coordinator & badge state
content/
detection.ts # Mutation-observer generation detection
hosts.ts # Host adapter wiring
index.ts # Content script entry point
overlay.ts # Overlay renderer (iframe + cards, drag/resize)
options/ # React settings page
popup/ # Extension popup
shared/
audio.ts # Mute state helpers
cards.ts # Micro-learning card data
hosts.ts # Host adapter definitions (ChatGPT, Claude, Gemini, Copilot)
microContentEngine.ts # Card selection & no-repeat logic
settings.ts # Settings schema, defaults, normalisation
types.ts # Shared TypeScript types
videoLoader.ts # YouTube iframe lifecycle management
videoPreloadQueue.ts # Video preload queue
videos.ts # Video catalogue helpers
content/
videos.json # Curated YouTube Shorts catalogue
- DOM selectors may require tuning as AI host UIs change over time.
- All video playback respects YouTube's iframe API; unavailable videos are skipped automatically.
- The extension requests only the permissions it needs:
activeTab,tabs,storage, anddeclarativeNetRequest.