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);
 });
 
@@ -224,6 +249,7 @@ function defineVideoController() {
         }
       } else if (event.type === "pause" || event.type === "ended") {
         this.stopSubtitleNudge();
+        tc.isNudging = false;
       }
 
       // For seek events, don't mess with speed
@@ -344,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;

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Video Speed Controller",
   "short_name": "videospeed",
-  "version": "1.4.5",
+  "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
       }
     });
   }