Theater Mode Everywhere
Twórca / Projektant produktu / Programista · Open Source
Maksymalizacja wideo jednym klawiszem: Zaprojektowałem rozszerzenie dla Chrome, Firefox i Edge, które pozwala jednym naciśnięciem klawisza rozciągnąć odtwarzacz wideo HTML5 na cały obszar viewportu przeglądarki, automatycznie ukrywając rozpraszające elementy strony (nagłówki, paski boczne, komentarze czy rekomendacje).
Autorski algorytm detekcji DOM: Opracowałem silnik heurystycznego wyszukiwania elementów wideo, który bezbłędnie lokalizuje zarówno surowe tagi <video>, jak i odtwarzacze osadzone w ramkach <iframe> (takie jak YouTube, Vimeo czy Twitch embeds), izolując je na jednolitym ciemnym tle.
Autorski panel kontrolny (Custom Controls): Wdrożyłem lekki nakładany panel sterowania wideo, wyposażony w przyciski play/pause, suwak głośności z wizualnymi tooltipami poziomu dźwięku oraz dokładne wskaźniki czasu (czas odtworzony oraz pozostały do końca).
Zaawansowana nawigacja klatkowa i skróty: Zaimplementowałem skróty klawiszowe umożliwiające precyzyjne sterowanie odtwarzaniem: przewijanie, dynamiczną zmianę prędkości odtwarzania oraz klatkowanie wideo klatka po klatce.
Strona opcji i personalizacja: Stworzyłem panel ustawień rozszerzenia napisany w TypeScript, umożliwiający pełną rekonfigurację przypisanych skrótów klawiszowych oraz wygodne zarządzanie czarną listą domen (Blacklist), na których działanie rozszerzenia ma być wyłączone ze względu na natywne układy stron.
Prywatność, wydajność i automatyzacja: Zoptymalizowałem rozszerzenie pod kątem Manifest V3, dbając o to, by skrypty zawartości wstrzykiwały jedynie minimalny kod JavaScript i czysty CSS, oraz utrzymywałem automatyczne testy przeglądarkowe oparte o Playwright i Puppeteer.
Wdrożenie i dystrybucja: Pomyślnie przeszedłem procesy weryfikacji kodu w oficjalnych sklepach Chrome Web Store oraz Firefox Add-ons, a wersja dedykowana dla Edge Add-ons jest obecnie w fazie końcowego review.
Projekt
Dystrybucja
Technologie i obszary
Języki
- TypeScript
Frontend
- CSS Grid
- Flexbox
Testy i automatyzacja
- Playwright
- Puppeteer
Web Platform
- HTML5 Video API
- DOM API
Rozszerzenia przeglądarkowe
- Manifest V3
- WebExtensions API
- Main World Injection
- Browser Extension APIs
Build tooling
- Vite
- Rollup