dark mode

inject.js

@@ -137,6 +137,31 @@ chrome.storage.sync.get(tc.settings, function (storage) {
       predefined: true
     });
   }
+  // Add a listener for messages from the popup.
+  // We use a global flag to ensure the listener is only attached once.
+  if (!window.vscMessageListener) {
+    chrome.runtime.onMessage.addListener(
+      function (request, sender, sendResponse) {
+        // Check if the message is a request to re-scan the page.
+        if (request.action === "rescan_page") {
+          log("Re-scan command received from popup.", 4);
+
+          // Call the main initialization function. It's designed to be safe
+          // to run multiple times and will pick up any new videos.
+          initializeWhenReady(document);
+
+          // Send a response to the popup to confirm completion.
+          sendResponse({ status: "complete" });
+        }
+
+        // Required to allow for asynchronous responses.
+        return true;
+      }
+    );
+
+    // Set the flag to prevent adding the listener again.
+    window.vscMessageListener = true;
+  }
   initializeWhenReady(document);
 });
 
@@ -160,6 +185,8 @@ function defineVideoController() {
     this.video = target;
     this.parent = target.parentElement || parent;
     this.nudgeIntervalId = null;
+
+    // Determine what speed to use
     let storedSpeed = tc.settings.speeds[target.currentSrc];
     if (!tc.settings.rememberSpeed) {
       if (!storedSpeed) {
@@ -171,7 +198,15 @@ function defineVideoController() {
     if (tc.settings.forceLastSavedSpeed) {
       storedSpeed = tc.settings.lastSpeed;
     }
-    target.playbackRate = storedSpeed;
+
+    // FIXED: Actually apply the speed to the video element
+    // Use setSpeed function to properly set the speed with all the necessary logic
+    setTimeout(() => {
+      if (this.video && this.video.vsc) {
+        setSpeed(this.video, storedSpeed, true, false);
+      }
+    }, 0);
+
     this.div = this.initializeControls();
 
     // Make the controller visible for 5 seconds on startup
@@ -183,18 +218,38 @@ function defineVideoController() {
       if (event.type === "play") {
         this.startSubtitleNudge();
 
-        // Reapply the current speed to ensure it doesn't get reset
+        // FIXED: Only reapply speed if there's a significant mismatch AND it's a new video
         const currentSpeed = event.target.playbackRate;
-        if (currentSpeed !== 1.0) {
-          // Only reapply if it's not already at the correct speed
+        const videoId =
+          event.target.currentSrc || event.target.src || "default";
+
+        // Get the expected speed based on settings
+        let expectedSpeed;
+        if (tc.settings.forceLastSavedSpeed) {
+          expectedSpeed = tc.settings.lastSpeed;
+        } else {
+          expectedSpeed = tc.settings.speeds[videoId] || tc.settings.lastSpeed;
+        }
+
+        // Only reapply speed if:
+        // 1. The current speed is 1.0 (default) AND we have a stored speed that's different
+        // 2. OR if forceLastSavedSpeed is enabled and speeds don't match
+        const shouldReapplySpeed =
+          (Math.abs(currentSpeed - 1.0) < 0.01 &&
+            Math.abs(expectedSpeed - 1.0) > 0.01) ||
+          (tc.settings.forceLastSavedSpeed &&
+            Math.abs(currentSpeed - expectedSpeed) > 0.01);
+
+        if (shouldReapplySpeed) {
           setTimeout(() => {
-            if (Math.abs(event.target.playbackRate - currentSpeed) > 0.01) {
-              event.target.playbackRate = currentSpeed;
+            if (event.target.vsc) {
+              setSpeed(event.target, expectedSpeed, false, false);
             }
-          }, 0);
+          }, 10);
         }
       } else if (event.type === "pause" || event.type === "ended") {
         this.stopSubtitleNudge();
+        tc.isNudging = false;
       }
 
       // For seek events, don't mess with speed
@@ -220,6 +275,32 @@ function defineVideoController() {
       "seeked",
       (this.handleSeek = mediaEventAction.bind(this))
     );
+
+    // ADDITIONAL FIX: Listen for loadedmetadata to reapply speed when video source changes
+    target.addEventListener("loadedmetadata", () => {
+      if (this.video && this.video.vsc) {
+        const currentSpeed = this.video.playbackRate;
+        const videoId = this.video.currentSrc || this.video.src || "default";
+
+        // Get expected speed
+        let expectedSpeed;
+        if (tc.settings.forceLastSavedSpeed) {
+          expectedSpeed = tc.settings.lastSpeed;
+        } else {
+          expectedSpeed = tc.settings.speeds[videoId] || tc.settings.lastSpeed;
+        }
+
+        // Only reapply if current speed is default (1.0) and we have a different stored speed
+        const shouldReapplySpeed =
+          Math.abs(currentSpeed - 1.0) < 0.01 &&
+          Math.abs(expectedSpeed - 1.0) > 0.01;
+
+        if (shouldReapplySpeed) {
+          setSpeed(this.video, expectedSpeed, false, false);
+        }
+      }
+    });
+
     var srcObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (
@@ -233,6 +314,19 @@ function defineVideoController() {
               this.div.classList.add("vsc-nosource");
             } else {
               this.div.classList.remove("vsc-nosource");
+
+              // FIXED: Reapply speed when source changes (like in shorts)
+              const expectedSpeed = tc.settings.forceLastSavedSpeed
+                ? tc.settings.lastSpeed
+                : tc.settings.speeds[mutation.target.currentSrc] ||
+                  tc.settings.lastSpeed;
+
+              setTimeout(() => {
+                if (mutation.target.vsc) {
+                  setSpeed(mutation.target, expectedSpeed, false, false);
+                }
+              }, 100);
+
               if (!mutation.target.paused) this.startSubtitleNudge();
             }
           }
@@ -276,17 +370,27 @@ function defineVideoController() {
       this.stopSubtitleNudge();
       return;
     }
+    // Additional  check to not start if paused
+    if (this.video.paused) {
+      return;
+    }
     log(`Nudge: Starting interval: ${tc.settings.subtitleNudgeInterval}ms.`, 5);
     this.nudgeIntervalId = setInterval(() => {
       if (
         !this.video ||
         this.video.paused ||
+        this.video.ended ||
         this.video.playbackRate === 1.0 ||
         tc.isNudging
       ) {
         this.stopSubtitleNudge();
         return;
       }
+      // Double-check pause state before nudging
+      if (this.video.paused) {
+        this.stopSubtitleNudge();
+        return;
+      }
       const currentRate = this.video.playbackRate;
       const nudgeAmount = tc.settings.subtitleNudgeAmount;
       tc.isNudging = true;
@@ -315,8 +419,15 @@ function defineVideoController() {
   tc.videoController.prototype.initializeControls = function () {
     const doc = this.video.ownerDocument;
     const speed = this.video.playbackRate.toFixed(2);
-    var top = Math.max(this.video.offsetTop, 0) + "px",
+    // Fix for videos rendered after page load - use relative positioning
+    var top = "10px",
+      left = "10px";
+
+    // Try to get actual position, but fallback to default if not available
+    if (this.video.offsetTop > 0 || this.video.offsetLeft > 0) {
+      top = Math.max(this.video.offsetTop, 0) + "px";
       left = Math.max(this.video.offsetLeft, 0) + "px";
+    }
     var wrapper = doc.createElement("div");
     wrapper.classList.add("vsc-controller");
     if (!this.video.src && !this.video.currentSrc)

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Video Speed Controller",
   "short_name": "videospeed",
-  "version": "1.4.1",
+  "version": "1.6.1",
   "manifest_version": 2,
   "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts",
   "homepage_url": "https://github.com/SoPat712/videospeed",

options.css

@@ -5,6 +5,7 @@ body {
   font-family: sans-serif;
   font-size: 12px;
   color: rgb(48, 57, 66);
+  background-color: white;
 }
 
 h1,
@@ -110,3 +111,76 @@ select {
   color: transparent;
   text-shadow: 0 0 0 #000000;
 }
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  h3 {
+    color: #ffffff;
+  }
+
+  header {
+    border-bottom: 1px solid #333;
+    background: linear-gradient(#1a1a1a, #1a1a1a 40%, rgba(26, 26, 26, 0.92));
+  }
+
+  button {
+    background-image: linear-gradient(#404040, #404040 38%, #353535);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 1px 2px rgba(0, 0, 0, 0.75);
+    color: #e0e0e0;
+    text-shadow: 0 1px 0 rgb(20, 20, 20);
+  }
+
+  button:hover {
+    background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
+  }
+
+  input[type="text"], 
+  input[type="checkbox"],
+  select,
+  textarea {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border: 1px solid #555;
+  }
+
+  input[type="text"]:focus,
+  select:focus,
+  textarea:focus {
+    background-color: #333;
+    border-color: #777;
+    outline: none;
+  }
+
+  select option {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+  }
+
+  .customKey {
+    color: transparent;
+    text-shadow: 0 0 0 #e0e0e0;
+  }
+
+  #status {
+    color: #888;
+  }
+
+  a {
+    color: #66b3ff;
+  }
+
+  a:visited {
+    color: #cc99ff;
+  }
+
+  hr {
+    border-color: #333;
+  }
+}

popup.css

@@ -1,5 +1,7 @@
 body {
   min-width: 8em;
+  background-color: white;
+  color: #333;
 }
 
 hr {
@@ -32,3 +34,35 @@ button {
 .hide {
   display: none;
 }
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  hr {
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  button {
+    background-image: linear-gradient(#404040, #404040 38%, #353535);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 1px 2px rgba(0, 0, 0, 0.75);
+    color: #e0e0e0;
+    text-shadow: 0 1px 0 rgb(20, 20, 20);
+  }
+
+  button:hover {
+    background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
+  }
+
+  button:active {
+    background-image: linear-gradient(#353535, #353535 38%, #2a2a2a);
+  }
+
+  #status {
+    color: #ccc;
+  }
+}

popup.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Video Speed Controller: Popup</title>
@@ -6,6 +6,8 @@
     <script src="popup.js"></script>
   </head>
   <body>
+    <button id="refresh">Re-scan Page for Videos</button>
+    <hr />
     <button id="enable" class="hide">Enable</button>
     <button id="disable">Disable</button>
     <span id="status" class="hide"></span>

popup.js

@@ -19,6 +19,31 @@ document.addEventListener("DOMContentLoaded", function () {
     toggleEnabled(false, settingsSavedReloadMessage);
   });
 
+  // --- REVISED: "Re-scan" button functionality ---
+  document.querySelector("#refresh").addEventListener("click", function () {
+    setStatusMessage("Re-scanning page...");
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      if (tabs[0] && tabs[0].id) {
+        // Send a message to the content script, asking it to re-initialize.
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          { action: "rescan_page" },
+          function (response) {
+            if (chrome.runtime.lastError) {
+              // This error is expected on pages where content scripts cannot run.
+              setStatusMessage("Cannot run on this page.");
+            } else if (response && response.status === "complete") {
+              setStatusMessage("Scan complete. Closing...");
+              setTimeout(() => window.close(), 500); // Close popup on success.
+            } else {
+              setStatusMessage("Scan failed. Please reload the page.");
+            }
+          }
+        );
+      }
+    });
+  });
+
   chrome.storage.sync.get({ enabled: true }, function (storage) {
     toggleEnabledUI(storage.enabled);
   });
@@ -42,9 +67,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const suffix = `${enabled ? "" : "_disabled"}.png`;
     chrome.browserAction.setIcon({
       path: {
-        "19": "icons/icon19" + suffix,
-        "38": "icons/icon38" + suffix,
-        "48": "icons/icon48" + suffix
+        19: "icons/icon19" + suffix,
+        38: "icons/icon38" + suffix,
+        48: "icons/icon48" + suffix
       }
     });
   }