← Powrót

Theater Mode Everywhere

Twórca / Projektant produktu / Programista · Open Source

Okres: 2024 – Obecnie

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.

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