Twitch Healer

Browser extension for Chromium / Yandex Browser that automatically selects the best available stream quality on Twitch and improves the viewing interface.

Features

• Auto quality selection — automatically picks the highest available quality on stream load
• Smart priority — Source > 4K > 1440p > 1080p60 > 1080p > 720p60 > 720p > ...
• Quality preferences — choose minimum acceptable quality, allow/block 1080p+ options
• UI enhancements — optional theater mode button, reduce visual clutter
• Lightweight popup — quick access to settings and stream status
• Debug logging — optional console output for troubleshooting

Technical notes

• Works with Twitch SPA navigation — detects channel switches without page reload
• Uses MutationObserver with debounce — no CPU overhead
• All settings stored via chrome.storage.sync
• Tested on Yandex Browser and Chrome

Known limitations

• Extension reads available quality options by briefly opening the player settings menu. This happens only once per stream load and is closed immediately.
• Quality selection depends on Twitch DOM structure, which may change. If the extension stops working, an update may be needed.
• The extension does not:
  • Block ads or interfere with ad delivery
  • Bypass DRM, subscriptions, or regional restrictions
  • Modify network requests to Twitch servers
  • Automate chat, follows, or any interactive features
  • Circumvent any Twitch monetization mechanisms
• Works only with the HTML5 player on https://www.twitch.tv/*.

Build

npm install
npm run build

The built extension will be in dist/.

Install in Yandex Browser (developer mode)

1. Open Yandex Browser and go to browser://extensions (or chrome://extensions in Chrome)
2. Enable Developer mode (toggle in the top right)
3. Click Load unpacked extension (or Load unpacked)
4. Select the dist/ directory from this project
5. The extension should appear in the toolbar

Development

# Type checking
npm run typecheck

# Build
npm run build

# Clean
npm run clean

Project structure

twitch-healer/
├── manifest.json              # Extension manifest (MV3)
├── package.json
├── tsconfig.json
├── scripts/
│   └── build.mjs              # Build script (esbuild)
├── public/
│   └── icons/                 # Extension icons (SVG)
├── src/
│   ├── shared/                # Shared modules
│   │   ├── types.ts           # TypeScript interfaces
│   │   ├── defaults.ts        # Default settings & constants
│   │   ├── settings.ts        # Settings storage helpers
│   │   └── messages.ts        # Cross-context messaging
│   ├── background/
│   │   └── index.ts           # Service worker
│   ├── content/
│   │   ├── index.ts           # Content script entry
│   │   ├── constants.ts       # Selectors & config
│   │   ├── observer.ts        # DOM & URL change detection
│   │   ├── quality-selector.ts# Quality selection logic
│   │   └── ui-enhancer.ts     # UI improvements
│   ├── popup/
│   │   ├── index.html         # Popup HTML
│   │   └── index.ts           # Popup logic
│   └── options/
│       ├── index.html         # Options page HTML
│       └── index.ts           # Options page logic
└── README.md

License

MIT