YouTube Live Chat Fullscreen

YouTube hides the chat in fullscreen. This extension brings it back — drag, resize, and style the overlay your way.

No account required · No data collected · Fully open source

English · 日本語 · 繁體中文

---

Preview

Screenshots

Fullscreen Chat Overlay
Popup — Light	Popup — Dark
Settings — Light	Settings — Dark

30-Second Quick Start

1. Install from the Chrome Web Store or Firefox Add-ons.
2. Open a YouTube live stream or an archive with chat replay.
3. Enter fullscreen — a toggle switch appears at the bottom-right. Click it to show the chat overlay.
4. Drag, resize, and style it from the extension settings.

Features

💬 Fullscreen Chat

• Post comments and Super Chats directly from the overlay without leaving fullscreen
• Works with both live streams and archived streams with chat replay
• Optional "Always On" mode keeps the overlay visible outside fullscreen

🎨 Style & Appearance

• Adjust background color, text color, font, size, blur, and spacing so the overlay fits your stream layout
• Toggle username, user icon, Super Chat bar, and chat-only view
• Drag, resize, and reposition the chat overlay freely
• Light, dark, and auto (system-follow) theme across the overlay, popup, and settings panel

📋 Presets & Backup

• Save named style presets and switch between them with one click
• Export and import all settings as JSON for backup or cross-device sync

🌐 Internationalization

• 55 languages supported, including RTL layout for Arabic, Hebrew, and Farsi

---

Tech Stack

Category	Stack	Role in this project
Core		React 19 for overlay UI, TypeScript for type safety, WXT as the cross-browser extension framework
State & Style		Zustand for lightweight cross-entrypoint state, UnoCSS for atomic styling
Quality		Vitest for unit tests, Playwright for E2E, Biome for lint & format

Architecture

Click to expand

System Overview

The extension consists of two entrypoints that communicate via the browser's tabs and runtime messaging APIs:

Component	Role
Content Script	Injected into YouTube pages. Renders the chat overlay, handles drag/resize, and manages chat source resolution (live vs. archive).
Popup	Extension toolbar UI. Controls language, enable/disable toggle, and theme. Syncs state to the content script in real time.
Shared	Common modules used by both entrypoints — stores (Zustand), i18n assets, UI components, theme, and utility functions.

Chat Source Resolution

The content script automatically detects the video type and selects the appropriate chat source:

Video state	Chat source	Switch / Overlay
Live stream	Public live_chat?v=<videoId>	Available
Archive with replay	Native live_chat_replay iframe	Available when replay is playable
No chat / replay unavailable	None	Hidden

Project Structure

entrypoints/
├── content/          # Content script (injected into YouTube)
│   ├── chat/         # Chat source resolution (live / archive)
│   ├── features/     # UI features (Draggable, Iframe, Settings, Switch)
│   └── hooks/        # Content-specific React hooks
├── popup/            # Popup UI (extension toolbar)
│   ├── components/   # Popup-specific components
│   └── utils/        # Popup utilities
shared/               # Shared across entrypoints
├── stores/           # Zustand state management
├── i18n/             # 50+ language assets
├── components/       # Shared UI components
├── theme/            # Theme configuration
└── hooks/            # Shared React hooks

Development Setup

Requirements

• Node.js v22.x
• Yarn (via Corepack recommended)

Install

git clone https://github.com/daichan132/Youtube-Live-Chat-Fullscreen.git
cd Youtube-Live-Chat-Fullscreen
corepack enable
yarn install

Commands

Command	Description
yarn dev	Start dev server (Chrome)
yarn build	Production build (Chrome)
yarn lint	Biome checks + TypeScript type checks
yarn test:unit	Run unit tests
yarn e2e	Run E2E tests

For Firefox, append :firefox — e.g. yarn dev:firefox, yarn build:firefox.

Quality Checks

Run before opening a pull request:

yarn lint
yarn test:unit
yarn build

For Firefox compatibility changes, also run yarn build:firefox.

Contributing

Contributions are welcome — bug reports, feature ideas, and pull requests all help.

• Open an issue or submit a pull request.
• Run yarn lint && yarn test:unit && yarn build before submitting a PR.
• Translation contributions are also welcome — add a docs/README.<locale>.md for your language.

Support

If you find this extension useful, a star helps keep it maintained and updated.

License

Licensed under GPL-3.0. See LICENSE for details.