- JavaScript 76.6%
- CSS 23.4%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
Tronax
3bd607b377
Das reine URL-Gating aus dem letzten Commit war zu streng: Der Video-Viewer, der sich beim Klick auf einen Such- oder Explore- Treffer öffnet, läuft nicht unter einem /reels-Pfad und bekam deshalb keine Steuerleiste. Die Video-Erkennung prüft jetzt zwei Ebenen: - URL: /reels/… und /reel/… hängen immer an (Reels-Feed und Einzelansicht). - DOM-Kontext: Der geöffnete Video-Viewer ist ein Modal — er hat einen role="dialog"-Vorfahren und/oder liegt fix positioniert. Die Vorschau-Kacheln der Such-/Explore-Raster liegen dagegen im normalen Dokumentfluss und bleiben dadurch weiter ohne Controls (der ursprüngliche Such-Bug bleibt behoben). scan() validiert bestehende Leisten nun per reelContextValid(): Geht ein Video seinen Kontext verloren (Viewer geschlossen, SPA-Navigation), wird die Leiste entfernt — dasselbe Video im neu geöffneten Viewer erhält sie erneut. Reine Sichtbarkeits- und Größenänderungen bleiben in placeAll, damit nichts flackert. Stories (/stories/…) und Embeds (/reels/embed) sind bewusst ausgespart. Verifiziert per Browser-Smoke-Test: Suchraster ohne Controls, Viewer öffnen/schließen/wieder öffnen (Attach/Detach/Re-Attach, Leiste exakt über dem Viewer-Video), Reels-Seite unverändert. |
||
| icons | ||
| content.js | ||
| controls.css | ||
| manifest.json | ||
| README.md | ||
Reels Controls — Video-Steuerung für Instagram Reels
Ein Chrome-Addon, das Instagram Reels eine echte Videosteuerung gibt: Play/Pause, Lautstärkeregler, Fortschrittsbalken mit Scrubbing und Tastenkürzel.
Installation
- Diesen Ordner (
reels-controls) irgendwo dauerhaft ablegen — nicht löschen, Chrome lädt das Addon bei jedem Start von hier. - In Chrome
chrome://extensionsöffnen. - Oben rechts den Entwicklermodus einschalten.
- Auf Entpackte Erweiterung laden klicken und den Ordner
reels-controlsauswählen. instagram.comöffnen (oder neu laden) und ein Reel aufrufen.
Funktioniert genauso in Edge, Brave und anderen Chromium-Browsern über deren jeweilige Erweiterungsseite.
Bedienung
Die Steuerleiste sitzt unten über dem Video. Sie ist leicht transparent und wird beim Drüberfahren mit der Maus voll sichtbar. Sie erscheint im Reels-Feed (/reels/…, /reel/…) sowie im Video-Viewer, der sich beim Klick auf ein Such- oder Explore-Ergebnis öffnet — nicht aber auf den kleinen Vorschau-Kacheln der Such- und Explore-Raster.
- Play/Pause-Button — links
- Fortschrittsbalken — anklicken oder ziehen, um zu spulen
- Zeitanzeige — aktuelle Position / Gesamtlänge
- Lautstärke-Button — stummschalten/aktivieren
- Lautstärke-Slider — stufenlos regeln
Die zuletzt eingestellte Lautstärke wird gemerkt und auf neue Reels übernommen (für die aktuelle Browser-Sitzung).
Tastenkürzel
Gelten immer für das gerade sichtbare Reel:
| Taste | Funktion |
|---|---|
| Leertaste | Play / Pause |
| M | Stumm an/aus |
| ← / → | 5 Sekunden zurück / vor |
| ↑ / ↓ | Lautstärke +/− 10 % |
Wie es funktioniert
Instagram ist eine Single-Page-App und tauscht die <video>-Elemente beim Scrollen ständig aus. Das Content-Script (content.js) nutzt deshalb einen MutationObserver plus einen periodischen Fallback-Scan und hängt jedem passenden Video eine eigene Steuerleiste an. Damit nur echte Wiedergaben versorgt werden (nicht die Vorschau-Kacheln in Suche/Explore), werden zwei Ebenen geprüft: Die URL (/reels/… bzw. /reel/… hängt immer an) und der DOM-Kontext (der beim Klick auf eine Kachel geöffnete Video-Viewer ist ein Modal mit role="dialog" bzw. fixer Positionierung, Kacheln liegen im normalen Dokumentfluss). Verliert ein Video seinen Kontext (Viewer geschlossen, SPA-Navigation), wird die Leiste wieder entfernt. Alle Klicks auf der Leiste werden mit stopPropagation() abgefangen, damit Instagrams eigene Klick-zum-Pausieren-Logik nicht dazwischenfunkt.
Hinweise
- Das Addon braucht keine besonderen Berechtigungen außer Zugriff auf
instagram.comund sendet nichts nach außen — alles läuft lokal im Browser. - Wenn Instagram sein DOM stark umbaut, kann es sein, dass die Video-Erkennung angepasst werden muss (die Heuristik in
isReelVideo()über Videogröße). Das ist die wahrscheinlichste Stelle für künftige Reparaturen. - Da es eine entpackte Erweiterung ist, zeigt Chrome bei jedem Start evtl. einen Hinweis im Entwicklermodus — das ist normal.