MicroReel

Watch YouTube Shorts while your AI finishes thinking.

MicroReel is a Chrome extension that shows a non-intrusive YouTube Shorts overlay while ChatGPT, Claude, Gemini, or GitHub Copilot is generating a response. When generation finishes, the current Short is allowed to finish before the overlay gets out of the way.

---

How it works

1. MicroReel detects when an AI host starts generating using a mutation-observer on the page DOM.
2. After a brief configurable delay, the overlay appears in the corner of your screen.
3. A YouTube Short plays and is allowed to finish before the overlay closes.
4. If generation is still active when it ends, the next validated Short starts.
5. If generation has stopped, MicroReel dismisses the overlay instead of starting another Short.

---

Supported hosts

Host	URL
ChatGPT	chatgpt.com / chat.openai.com
Claude	claude.ai
Gemini	gemini.google.com
GitHub Copilot	github.com/copilot

---

Features

• YouTube Shorts — plays validated Shorts in a floating iframe overlay
• 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
• Volume control — set video volume without leaving the page; tab mute still takes priority
• Configurable timing — set the start delay from 250 ms to 10 seconds
• Overlay position — choose top-right or side-right
• Fully local — no backend, no telemetry, no account required

---

Installation

From source

1. Clone and install dependencies

   git clone https://github.com/DannyyyL/microReel.git
   cd microReel
   npm install

2. Build the extension

   npm run build

3. Load into Chrome

   • Open chrome://extensions
   • Enable Developer mode (toggle in the top-right)
   • Click Load unpacked
   • Select the dist/ folder

4. Try it out — open ChatGPT, Claude, Gemini, or GitHub Copilot and send a prompt.

---

Development

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.

---

Settings

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
• 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
• Volume — MicroReel playback volume from 0% to 100%

---

Project structure

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 (player frame, drag/resize)
  options/                # React settings page
  player/                 # Extension-hosted YouTube player bridge
  popup/                  # Extension popup
  shared/
    audio.ts              # Volume and tab-mute helpers
    hosts.ts              # Host adapter definitions (ChatGPT, Claude, Gemini, Copilot)
    microContentEngine.ts # Video selection & no-repeat logic
    playerProtocol.ts     # Parent/player message validation
    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

---

Notes

• 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 tabs, storage, and declarativeNetRequestWithHostAccess. The network rule only supplies YouTube with the supported site's origin as the player Referer; it does not modify host security headers.