From 4f1e373c4fd7f8d0935d658cf88c8d298225aef2 Mon Sep 17 00:00:00 2001
From: Tronax <mail@janikdietz.de>
Date: Fri, 15 May 2026 21:02:52 +0200
Subject: [PATCH] First Commit, Code by Claude 4.7 Opus

---
 README.md         |  46 ++++++
 content.js        | 398 ++++++++++++++++++++++++++++++++++++++++++++++
 controls.css      | 181 +++++++++++++++++++++
 icons/icon128.png | Bin 0 -> 1590 bytes
 icons/icon16.png  | Bin 0 -> 272 bytes
 icons/icon48.png  | Bin 0 -> 647 bytes
 manifest.json     |  25 +++
 7 files changed, 650 insertions(+)
 create mode 100644 README.md
 create mode 100644 content.js
 create mode 100644 controls.css
 create mode 100644 icons/icon128.png
 create mode 100644 icons/icon16.png
 create mode 100644 icons/icon48.png
 create mode 100644 manifest.json

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a5d09db
--- /dev/null
+++ b/README.md
@@ -0,0 +1,46 @@
+# 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
+
+1. Diesen Ordner (`reels-controls`) irgendwo dauerhaft ablegen — nicht löschen, Chrome lädt das Addon bei jedem Start von hier.
+2. In Chrome `chrome://extensions` öffnen.
+3. Oben rechts den **Entwicklermodus** einschalten.
+4. Auf **Entpackte Erweiterung laden** klicken und den Ordner `reels-controls` auswählen.
+5. `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.
+
+- **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, erkennt neu eingefügte Reel-Videos und hängt jedem eine eigene Steuerleiste an. 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.com` und 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.
diff --git a/content.js b/content.js
new file mode 100644
index 0000000..4ac145f
--- /dev/null
+++ b/content.js
@@ -0,0 +1,398 @@
+// ============================================================
+//  Reels Controls — content.js
+//  Hängt eine eigene Videosteuerung an Instagram-Reels-Videos.
+// ============================================================
+
+(() => {
+  "use strict";
+
+  const ATTACHED = "data-rc-attached";
+  const STORAGE_KEY = "rc_volume";
+
+  // Zuletzt genutzte Lautstärke (persistiert über sessionStorage,
+  // damit nicht jedes neue Reel wieder auf 100% / stumm springt).
+  let lastVolume = 1;
+  let lastMuted = false;
+  try {
+    const saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "null");
+    if (saved && typeof saved.volume === "number") {
+      lastVolume = saved.volume;
+      lastMuted = !!saved.muted;
+    }
+  } catch (_) {}
+
+  function persistVolume() {
+    try {
+      sessionStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ volume: lastVolume, muted: lastMuted })
+      );
+    } catch (_) {}
+  }
+
+  // ----------------------------------------------------------
+  //  Erkennen, ob ein <video> ein Reel ist.
+  //  Reels liegen in einem hochformatigen Container; wir nehmen
+  //  jedes Video, das groß genug ist und im Hauptbereich liegt.
+  // ----------------------------------------------------------
+  function isReelVideo(video) {
+    if (!(video instanceof HTMLVideoElement)) return false;
+    const rect = video.getBoundingClientRect();
+    // Sehr kleine Videos (Avatare, Vorschauen) ignorieren.
+    return rect.height > 250 && rect.width > 150;
+  }
+
+  function fmtTime(sec) {
+    if (!isFinite(sec) || sec < 0) sec = 0;
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60);
+    return m + ":" + String(s).padStart(2, "0");
+  }
+
+  // SVG-Icons inline (keine externen Assets nötig).
+  const ICONS = {
+    play: '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>',
+    pause:
+      '<svg viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>',
+    volHigh:
+      '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z"/></svg>',
+    volMute:
+      '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm18.5 3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3 2.3-2.3-1.4-1.4z"/></svg>',
+  };
+
+  // ----------------------------------------------------------
+  //  Steuerleiste für ein Video bauen.
+  // ----------------------------------------------------------
+  function buildControls(video) {
+    const bar = document.createElement("div");
+    bar.className = "rc-bar";
+    // Klicks auf der Leiste sollen NICHT bis zu Instagram durchgehen
+    // (sonst pausiert/scrollt IG selbst).
+    ["click", "mousedown", "pointerdown", "dblclick"].forEach((ev) =>
+      bar.addEventListener(ev, (e) => e.stopPropagation())
+    );
+
+    // --- Play / Pause -----------------------------------------
+    const playBtn = document.createElement("button");
+    playBtn.className = "rc-btn rc-play";
+    playBtn.title = "Wiedergabe / Pause (Leertaste)";
+
+    const togglePlay = () => {
+      if (video.paused) video.play();
+      else video.pause();
+    };
+    playBtn.addEventListener("click", togglePlay);
+
+    const syncPlayIcon = () => {
+      playBtn.innerHTML = video.paused ? ICONS.play : ICONS.pause;
+    };
+
+    // --- Fortschrittsbalken -----------------------------------
+    const progWrap = document.createElement("div");
+    progWrap.className = "rc-progress";
+    const progFill = document.createElement("div");
+    progFill.className = "rc-progress-fill";
+    const progKnob = document.createElement("div");
+    progKnob.className = "rc-progress-knob";
+    progWrap.appendChild(progFill);
+    progWrap.appendChild(progKnob);
+
+    let scrubbing = false;
+    const seekFromEvent = (e) => {
+      const rect = progWrap.getBoundingClientRect();
+      const ratio = Math.min(
+        1,
+        Math.max(0, (e.clientX - rect.left) / rect.width)
+      );
+      if (isFinite(video.duration)) {
+        video.currentTime = ratio * video.duration;
+        updateProgress();
+      }
+    };
+    progWrap.addEventListener("pointerdown", (e) => {
+      scrubbing = true;
+      progWrap.setPointerCapture(e.pointerId);
+      seekFromEvent(e);
+    });
+    progWrap.addEventListener("pointermove", (e) => {
+      if (scrubbing) seekFromEvent(e);
+    });
+    progWrap.addEventListener("pointerup", (e) => {
+      scrubbing = false;
+      try {
+        progWrap.releasePointerCapture(e.pointerId);
+      } catch (_) {}
+    });
+
+    // --- Zeitanzeige ------------------------------------------
+    const timeLabel = document.createElement("span");
+    timeLabel.className = "rc-time";
+    timeLabel.textContent = "0:00 / 0:00";
+
+    // --- Lautstärke -------------------------------------------
+    const volBtn = document.createElement("button");
+    volBtn.className = "rc-btn rc-vol-btn";
+    volBtn.title = "Stummschalten (M)";
+
+    const volSlider = document.createElement("input");
+    volSlider.type = "range";
+    volSlider.min = "0";
+    volSlider.max = "1";
+    volSlider.step = "0.01";
+    volSlider.className = "rc-vol-slider";
+
+    const applyVolumeUI = () => {
+      volBtn.innerHTML = video.muted || video.volume === 0
+        ? ICONS.volMute
+        : ICONS.volHigh;
+      volSlider.value = video.muted ? 0 : video.volume;
+      volSlider.style.setProperty(
+        "--rc-fill",
+        (video.muted ? 0 : video.volume) * 100 + "%"
+      );
+    };
+
+    volSlider.addEventListener("input", () => {
+      const v = parseFloat(volSlider.value);
+      // Wunsch-Lautstärke: bei 0 den letzten hörbaren Wert behalten,
+      // damit das Entstummen wieder dorthin zurückkehrt.
+      if (v > 0) video._rcDesiredVolume = v;
+      video._rcUserMuted = v === 0;
+      rcGuarding = true;
+      video.volume = v;
+      video.muted = v === 0;
+      rcGuarding = false;
+      lastVolume = video._rcDesiredVolume;
+      lastMuted = video._rcUserMuted;
+      persistVolume();
+      applyVolumeUI();
+    });
+
+    volBtn.addEventListener("click", () => {
+      video._rcUserMuted = !video._rcUserMuted;
+      rcGuarding = true;
+      video.muted = video._rcUserMuted;
+      // Beim Entstummen die gewünschte Lautstärke wiederherstellen.
+      if (!video._rcUserMuted) {
+        if (!video._rcDesiredVolume || video._rcDesiredVolume === 0) {
+          video._rcDesiredVolume = 0.5;
+        }
+        video.volume = video._rcDesiredVolume;
+      }
+      rcGuarding = false;
+      lastVolume = video._rcDesiredVolume;
+      lastMuted = video._rcUserMuted;
+      persistVolume();
+      applyVolumeUI();
+    });
+
+    // --- Zusammenbauen ----------------------------------------
+    bar.appendChild(playBtn);
+    bar.appendChild(progWrap);
+    bar.appendChild(timeLabel);
+    bar.appendChild(volBtn);
+    bar.appendChild(volSlider);
+
+    // ----------------------------------------------------------
+    //  Live-Synchronisation
+    // ----------------------------------------------------------
+    function updateProgress() {
+      const dur = isFinite(video.duration) ? video.duration : 0;
+      const ratio = dur ? video.currentTime / dur : 0;
+      progFill.style.width = ratio * 100 + "%";
+      progKnob.style.left = ratio * 100 + "%";
+      timeLabel.textContent =
+        fmtTime(video.currentTime) + " / " + fmtTime(dur);
+    }
+
+    video.addEventListener("timeupdate", updateProgress);
+    video.addEventListener("durationchange", updateProgress);
+    video.addEventListener("play", syncPlayIcon);
+    video.addEventListener("pause", syncPlayIcon);
+
+    // ----------------------------------------------------------
+    //  Mute-Guard: Instagram setzt Videos beim Start/Weiter-
+    //  schalten eigenständig auf muted ODER zieht die Lautstärke
+    //  hoch/runter. Wir fangen jede solche Änderung ab und
+    //  erzwingen den vom Nutzer gewünschten Zustand.
+    //
+    //  `_rcUserMuted`     = will der Nutzer stumm?  (true/false)
+    //  `_rcDesiredVolume` = welche Lautstärke will der Nutzer?
+    //                       (0..1, der echte Wunschwert)
+    //
+    //  Solange der Nutzer nichts selbst ändert, ist JEDE
+    //  Abweichung von diesen Werten ein Eingriff von Instagram
+    //  und wird sofort zurückgesetzt.
+    // ----------------------------------------------------------
+    let rcGuarding = false; // verhindert Endlosschleife im Handler
+
+    function enforceVolume() {
+      if (rcGuarding) return;
+      rcGuarding = true;
+      // Lautstärke immer auf den Wunschwert zwingen ...
+      if (Math.abs(video.volume - video._rcDesiredVolume) > 0.001) {
+        video.volume = video._rcDesiredVolume;
+      }
+      // ... und Mute-Zustand auf die Nutzer-Absicht.
+      if (video.muted !== video._rcUserMuted) {
+        video.muted = video._rcUserMuted;
+      }
+      rcGuarding = false;
+      applyVolumeUI();
+    }
+
+    video.addEventListener("volumechange", enforceVolume);
+
+    // Anfangszustand: gespeicherte Werte übernehmen.
+    video._rcUserMuted = lastMuted;
+    video._rcDesiredVolume = lastVolume;
+    rcGuarding = true;
+    video.volume = lastVolume;
+    video.muted = lastMuted;
+    rcGuarding = false;
+
+    // Sicherheitsnetz: kurz nach play() greift IG manchmal noch
+    // einmal nach. Wir prüfen die ersten Sekunden mehrfach nach.
+    video.addEventListener("play", () => {
+      enforceVolume();
+      [60, 200, 500, 1000].forEach((ms) => setTimeout(enforceVolume, ms));
+    });
+    video.addEventListener("loadeddata", enforceVolume);
+
+    syncPlayIcon();
+    applyVolumeUI();
+    updateProgress();
+
+    return bar;
+  }
+
+  // ----------------------------------------------------------
+  //  Steuerung an ein Video anheften.
+  // ----------------------------------------------------------
+  function attach(video) {
+    if (video.getAttribute(ATTACHED) === "1") return;
+    if (!isReelVideo(video)) return;
+
+    video.setAttribute(ATTACHED, "1");
+
+    // Wir hängen die Leiste an den nächstgelegenen positionierten
+    // Vorfahren, damit sie über dem Video sitzt.
+    let host = video.parentElement;
+    if (!host) return;
+    // Sicherstellen, dass der Host positioniert ist.
+    const pos = getComputedStyle(host).position;
+    if (pos === "static") host.style.position = "relative";
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "rc-wrapper";
+    wrapper.appendChild(buildControls(video));
+    host.appendChild(wrapper);
+
+    // Falls Instagram das Video entfernt, räumen wir mit auf.
+    const cleanup = new MutationObserver(() => {
+      if (!document.contains(video)) {
+        wrapper.remove();
+        cleanup.disconnect();
+      }
+    });
+    cleanup.observe(document.body, { childList: true, subtree: true });
+  }
+
+  function scan() {
+    document.querySelectorAll("video").forEach(attach);
+  }
+
+  // ----------------------------------------------------------
+  //  Beobachter: IG lädt Reels nach beim Scrollen.
+  // ----------------------------------------------------------
+  const observer = new MutationObserver(() => {
+    // Leichtgewichtig drosseln.
+    if (observer._raf) return;
+    observer._raf = requestAnimationFrame(() => {
+      observer._raf = null;
+      scan();
+    });
+  });
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+  });
+
+  // Erstes Scannen + periodischer Fallback (IG-SPA-Navigation).
+  scan();
+  setInterval(scan, 1500);
+
+  // ----------------------------------------------------------
+  //  Globale Tastenkürzel — gelten für das aktuell sichtbare Reel.
+  // ----------------------------------------------------------
+  function visibleReel() {
+    let best = null;
+    let bestArea = 0;
+    document.querySelectorAll("video[" + ATTACHED + '="1"]').forEach((v) => {
+      const r = v.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const visible =
+        Math.min(r.bottom, vh) - Math.max(r.top, 0);
+      if (visible > bestArea) {
+        bestArea = visible;
+        best = v;
+      }
+    });
+    return best;
+  }
+
+  document.addEventListener(
+    "keydown",
+    (e) => {
+      // Nicht stören, wenn der Nutzer in ein Eingabefeld tippt.
+      const tag = (e.target.tagName || "").toLowerCase();
+      if (tag === "input" || tag === "textarea" || e.target.isContentEditable)
+        return;
+
+      const v = visibleReel();
+      if (!v) return;
+
+      if (e.code === "Space") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (v.paused) v.play();
+        else v.pause();
+      } else if (e.key.toLowerCase() === "m") {
+        v._rcUserMuted = !v._rcUserMuted; // Nutzer-Absicht festhalten
+        v.muted = v._rcUserMuted;
+        if (!v._rcUserMuted) {
+          if (!v._rcDesiredVolume) v._rcDesiredVolume = 0.5;
+          v.volume = v._rcDesiredVolume;
+        }
+        lastVolume = v._rcDesiredVolume;
+        lastMuted = v._rcUserMuted;
+        persistVolume();
+      } else if (e.key === "ArrowLeft") {
+        v.currentTime = Math.max(0, v.currentTime - 5);
+      } else if (e.key === "ArrowRight") {
+        v.currentTime = Math.min(v.duration || 0, v.currentTime + 5);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        v._rcUserMuted = false; // Nutzer will Ton
+        v._rcDesiredVolume = Math.min(1, (v._rcDesiredVolume || 0) + 0.1);
+        v.muted = false;
+        v.volume = v._rcDesiredVolume;
+        lastVolume = v._rcDesiredVolume;
+        lastMuted = false;
+        persistVolume();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        v._rcDesiredVolume = Math.max(0, (v._rcDesiredVolume || 0) - 0.1);
+        v.volume = v._rcDesiredVolume;
+        if (v._rcDesiredVolume === 0) {
+          v._rcUserMuted = true; // bewusst auf 0 = Nutzer will stumm
+          v.muted = true;
+        }
+        lastVolume = v._rcDesiredVolume || lastVolume;
+        lastMuted = v._rcUserMuted;
+        persistVolume();
+      }
+    },
+    true // capture: vor Instagram abgreifen
+  );
+})();
diff --git a/controls.css b/controls.css
new file mode 100644
index 0000000..b1390f2
--- /dev/null
+++ b/controls.css
@@ -0,0 +1,181 @@
+/* ============================================================
+   Reels Controls — controls.css
+   ============================================================ */
+
+.rc-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  pointer-events: none; /* nur die Leiste selbst ist klickbar */
+  display: flex;
+  justify-content: center;
+  padding: 0 12px 14px;
+}
+
+.rc-bar {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 460px;
+  padding: 9px 12px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
+    sans-serif;
+  opacity: 0.35;
+  transform: translateY(2px);
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.rc-wrapper:hover .rc-bar,
+.rc-bar:focus-within {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* --- Buttons ------------------------------------------------ */
+.rc-btn {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.1s ease;
+}
+
+.rc-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.rc-btn:active {
+  transform: scale(0.92);
+}
+
+.rc-btn svg {
+  width: 20px;
+  height: 20px;
+  fill: #fff;
+  display: block;
+}
+
+/* --- Fortschrittsbalken ------------------------------------- */
+.rc-progress {
+  position: relative;
+  flex: 1 1 auto;
+  height: 16px; /* großzügige Klickfläche */
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.rc-progress::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.rc-progress-fill {
+  position: absolute;
+  left: 0;
+  height: 4px;
+  width: 0;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af);
+}
+
+.rc-progress-knob {
+  position: absolute;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translateX(-50%);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.rc-progress:hover .rc-progress-knob,
+.rc-bar:focus-within .rc-progress-knob {
+  opacity: 1;
+}
+
+/* --- Zeitanzeige -------------------------------------------- */
+.rc-time {
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.85);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* --- Lautstärke-Slider ------------------------------------- */
+.rc-vol-slider {
+  flex: 0 0 70px;
+  height: 16px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.rc-vol-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 4px;
+  background: linear-gradient(
+    to right,
+    #fff 0%,
+    #fff var(--rc-fill, 100%),
+    rgba(255, 255, 255, 0.25) var(--rc-fill, 100%)
+  );
+}
+
+.rc-vol-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+.rc-vol-slider::-moz-range-track {
+  height: 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.rc-vol-slider::-moz-range-progress {
+  height: 4px;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.rc-vol-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: none;
+  border-radius: 50%;
+  background: #fff;
+}
diff --git a/icons/icon128.png b/icons/icon128.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c8b2c706fdcc7181247bbed0666d8f5de314b30
GIT binary patch
literal 1590
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

literal 0
HcmV?d00001

diff --git a/icons/icon16.png b/icons/icon16.png
new file mode 100644
index 0000000000000000000000000000000000000000..5059fb98cf03c7f1c25cadcb7044a1e4ca3fe719
GIT binary patch
literal 272
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`*F9YvLn`JZr!+LJUpwo+qzA*D
ztJftZC4c}#*o8?<ULwi%!}^?&(Z16gmA#F5HvIW}$hWiZ4O_?hxW6A$Gc@d7^#tPg
z{(5YDo~5a6!=HnXSy#U0wlgv?FtFKl_E@GsV4^~K#jE4L+fpNV6Muf}p1gpO2MD^J
z?*=Q1xxUWbu;VGWuyr8YoNKww87{%+KeY<(XZ-!ON>QqC#o^2YX@4~<Ob;<U4r-2^
zved;XPJspNxT@Z;2~WEo6$|$C82BwdSv84grM>Wp69*0)U|=xsv0c0EbICoR7a2TV
L{an^LB{Ts5U({?D

literal 0
HcmV?d00001

diff --git a/icons/icon48.png b/icons/icon48.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3646ede78489952510197b1cdb7d615273f86db
GIT binary patch
literal 647
zcmV;20(kw2P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0006`Nkl<Zc${No
zzyrRvYW~M3PcOh-eVq}P99D_XjXHzE;pl+3{tAYBF$6x<>JLiC!vJ6NMHDxqa6VQV
z4{FE50Dt>gxVzzu52a>9!tpR5(0z)LfdT4)_k~tN%JDED*nf<Xg@J*A;r}1zfp!bo
zfbngn<B$w}7-0GTcj$&b0|NsC%l|(t1MLQi0LxHL{|pSHF);9e;uw%vyYl0U;BbB_
zxrbyxl^Bp%yYeFg0|Ucz|0ue9gsOQ!a^td(&%ER4>ItgX15#TTePm!@V0h}0NEeUL
ztQ3;oG5;e20|UbomsFa1gyyA?%%0gFA3J2w%oB8}2V@V-_{hM(!0^Z>hw2`oYds)$
zWXi{f7Wq{51l?<5`4baAGB7YOJTNJyibn>lCRRAp`;mcxf#JSE8ATo$@V1cRg|3hH
zbgIbq1k1nw1K$=>y3+QMfq{YHj&?1{9%1>zz(jo)kqB;R*Fzmnx?5QOFb<ptuIMyE
z98Q571}p|H=rr?_6XNKA?jAU!(@J)7!3J3VFw!RzpU~}qCKu}3NAnmsqT5B)5Jv|z
z%ftutdMM7I!~mMaz#hFms$@`N09EtA4*iKVN$2<gRbpU^{$!e_b9{htz220eJvRDx
z0Bd4ufI-m~q6E;bBBK=;4lyvaJ;2Doz`!uWaN&?Fi89W|L*~eaax#KXvraHtHl$*q
z;9L}9niU3mj8+T@Pn4XCz?|rYfezzUgW3}nXTxwWHGqK@<28fQ6E$Z;2ru?P28|}`
h2ZcxK&jjLhCjiXksOc;{Cw>3`002ovPDHLkV1oUeCKvz!

literal 0
HcmV?d00001

diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..0bd37f9
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "Reels Controls — Video-Steuerung für Instagram Reels",
+  "author": "Tronax mail@tronax.dev",
+  "version": "1.0.0",
+  "description": "Fügt Instagram Reels eine echte Videosteuerung hinzu: Play/Pause, Lautstärke, Fortschrittsbalken mit Scrubbing und Tastenkürzel.",
+  "permissions": [],
+  "host_permissions": [
+    "https://www.instagram.com/*"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["https://www.instagram.com/*"],
+      "js": ["content.js"],
+      "css": ["controls.css"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}