FullScreen Video — Chrome Extension

A Chrome extension that expands the most prominent video on any page to fill the browser viewport — without entering native fullscreen. Browser chrome (tabs, address bar, bookmarks) stays visible.

Works on YouTube, Vimeo embeds, and any HTML5 <video> player.

Install

1. Open chrome://extensions
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked and select this folder

Usage

• Click the extension icon or press Alt+F to toggle
• Escape or click the backdrop to dismiss

The extension automatically finds the best video on the page using a scoring system that considers size, playing state, and viewport visibility.

How It Works

Component	Role
content/detector.js	Scores all <video> elements — area, playing state, readyState, viewport intersection
content/expander.js	Reparents video into a fixed overlay container, preserving aspect ratio
content/main.js	Orchestrates top-frame and iframe coordination
background/service-worker.js	Handles icon clicks, keyboard shortcuts, per-tab state, iframe candidate selection
styles/fullscreen.css	Overlay backdrop, centered container, fade/scale animations

Iframe Support

Videos inside iframes (e.g. Vimeo embeds) are handled through a coordination protocol:

1. Content scripts run in all frames (all_frames: true)
2. Each iframe reports its best video score to the service worker
3. The service worker picks the winner after a 300ms collection window
4. The winning iframe expands its video; the top frame expands the <iframe> element via postMessage

File Structure

FullScreen/
├── manifest.json
├── icons/
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
├── background/
│   └── service-worker.js
├── content/
│   ├── detector.js
│   ├── expander.js
│   └── main.js
└── styles/
    └── fullscreen.css

Permissions

• activeTab — access to the current tab only when the user clicks the icon
• scripting — inject content scripts for video detection