v5.1.0-beta.1

frameSpeedSnapshot.js

@@ -1,17 +1,13 @@
 /* Runs via chrome.tabs.executeScript(allFrames) in the same isolated world as inject.js */
 (function () {
   try {
-    if (
+    if (typeof getPrimaryVideoElement !== "function") {
-      typeof getPrimaryVideoElement !== "function" ||
-      typeof computeResetButtonLabelForVideo !== "function"
-    ) {
       return null;
     }
     var v = getPrimaryVideoElement();
     if (!v) return null;
     return {
       speed: v.playbackRate,
-      resetLabel: computeResetButtonLabelForVideo(v),
       preferred: !v.paused
     };
   } catch (e) {

importExport.js

@@ -13,10 +13,12 @@ function generateBackupFilename() {
 
 function exportSettings() {
   chrome.storage.sync.get(null, function (storage) {
+    chrome.storage.local.get(null, function (localStorage) {
       const backup = {
-      version: "1.0",
+        version: "1.1",
         exportDate: new Date().toISOString(),
-      settings: storage
+        settings: storage,
+        localSettings: localStorage || {}
       };
 
       const dataStr = JSON.stringify(backup, null, 2);
@@ -33,6 +35,7 @@ function exportSettings() {
 
       showStatus("Settings exported successfully");
     });
+  });
 }
 
 function importSettings() {
@@ -62,12 +65,20 @@ function importSettings() {
           return;
         }
 
-        // Import all settings
+        var localToImport =
+          backup.localSettings && typeof backup.localSettings === "object"
+            ? backup.localSettings
+            : null;
+
+        function afterLocalImport() {
           chrome.storage.sync.clear(function () {
-          // If clear fails, we still try to set
             chrome.storage.sync.set(settingsToImport, function () {
               if (chrome.runtime.lastError) {
-              showStatus("Error: Failed to save imported settings - " + chrome.runtime.lastError.message, true);
+                showStatus(
+                  "Error: Failed to save imported settings - " +
+                    chrome.runtime.lastError.message,
+                  true
+                );
                 return;
               }
               showStatus("Settings imported successfully. Reloading...");
@@ -80,6 +91,23 @@ function importSettings() {
               }, 500);
             });
           });
+        }
+
+        if (localToImport && Object.keys(localToImport).length > 0) {
+          chrome.storage.local.set(localToImport, function () {
+            if (chrome.runtime.lastError) {
+              showStatus(
+                "Error: Failed to save local extension data - " +
+                  chrome.runtime.lastError.message,
+                true
+              );
+              return;
+            }
+            afterLocalImport();
+          });
+        } else {
+          afterLocalImport();
+        }
       } catch (err) {
         showStatus("Error: Failed to parse backup file - " + err.message, true);
       }

inject.js

@@ -1,5 +1,3 @@
-var regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
-
 var isUserSeek = false; // Track if seek was user-initiated
 var lastToggleSpeed = {}; // Store last toggle speeds per video
 
@@ -38,7 +36,8 @@ var tc = {
     logLevel: 3,
     enableSubtitleNudge: true, // Enabled by default, but only activates on YouTube
     subtitleNudgeInterval: 50, // Default 50ms balances subtitle tracking with CPU cost
-    subtitleNudgeAmount: 0.001
+    subtitleNudgeAmount: 0.001,
+    customButtonIcons: {}
   },
   mediaElements: [],
   isNudging: false,
@@ -115,19 +114,20 @@ var controllerLocationStyles = {
   }
 };
 
+/* `label` fallback only when ui-icons has no path for the action. */
 var controllerButtonDefs = {
-  rewind:   { label: "\u00AB", className: "rw" },
+  rewind:   { label: "", className: "rw" },
-  slower:   { label: "\u2212", className: "" },
+  slower:   { label: "", className: "" },
-  faster:   { label: "+",      className: "" },
+  faster:   { label: "", className: "" },
-  advance:  { label: "\u00BB", className: "rw" },
+  advance:  { label: "", className: "rw" },
-  display:  { label: "\u00D7", className: "hideButton" },
+  display:  { label: "", className: "hideButton" },
-  reset:    { label: "1.00x", className: "" },
+  reset:    { label: "", className: "" },
-  fast:     { label: "\u2605", className: "" },
+  fast:     { label: "", className: "" },
-  settings: { label: "\u2699", className: "" },
+  settings: { label: "", className: "" },
-  pause:    { label: "\u23EF", className: "" },
+  pause:    { label: "", className: "" },
-  muted:    { label: "M",      className: "" },
+  muted:    { label: "", className: "" },
-  mark:     { label: "\u2691", className: "" },
+  mark:     { label: "", className: "" },
-  jump:     { label: "\u21E5", className: "" }
+  jump:     { label: "", className: "" }
 };
 
 var keyCodeToEventKey = {
@@ -776,16 +776,30 @@ function setSubtitleNudgeEnabledForVideo(video, enabled) {
   return normalizedEnabled;
 }
 
+function subtitleNudgeIconMarkup(isEnabled) {
+  var action = isEnabled ? "subtitleNudgeOn" : "subtitleNudgeOff";
+  if (typeof vscIconSvgString !== "function") {
+    return isEnabled ? "✓" : "×";
+  }
+  var svg = vscIconSvgString(action, 14);
+  if (!svg) {
+    return isEnabled ? "✓" : "×";
+  }
+  return (
+    '<span class="vsc-btn-icon" aria-hidden="true">' + svg + "</span>"
+  );
+}
+
 function updateSubtitleNudgeIndicator(video) {
   if (!video || !video.vsc) return;
 
   var isEnabled = isSubtitleNudgeEnabledForVideo(video);
-  var label = isEnabled ? "✓" : "×";
   var title = isEnabled ? "Subtitle nudge enabled" : "Subtitle nudge disabled";
+  var mark = subtitleNudgeIconMarkup(isEnabled);
 
   var indicator = video.vsc.subtitleNudgeIndicator;
   if (indicator) {
-    indicator.textContent = label;
+    indicator.innerHTML = mark;
     indicator.dataset.enabled = isEnabled ? "true" : "false";
     indicator.dataset.supported = "true";
     indicator.title = title;
@@ -794,9 +808,10 @@ function updateSubtitleNudgeIndicator(video) {
 
   var flashEl = video.vsc.nudgeFlashIndicator;
   if (flashEl) {
-    flashEl.textContent = label;
+    flashEl.innerHTML = mark;
     flashEl.dataset.enabled = isEnabled ? "true" : "false";
     flashEl.dataset.supported = "true";
+    flashEl.setAttribute("aria-label", title);
   }
 }
 
@@ -873,6 +888,10 @@ function applySourceTransitionPolicy(video, forceUpdate) {
   if (Math.abs(video.playbackRate - desiredSpeed) > 0.01) {
     setSpeed(video, desiredSpeed, false, false);
   }
+
+  // Same-tab SPA (e.g. YouTube watch → Shorts): URL can change while remember-speed
+  // already ran on src mutation — re-apply margins / location / opacity for new rules.
+  reapplySiteRulesAndControllerGeometry();
 }
 
 function extendSpeedRestoreWindow(video, duration) {
@@ -1001,6 +1020,14 @@ function ensureController(node, parent) {
     );
     return null;
   }
+
+  // href selects site rules; re-run on every new/usable media so margins/opacity match current URL.
+  var siteDisabled = applySiteRuleOverrides();
+  if (!tc.settings.enabled || siteDisabled) {
+    return null;
+  }
+  refreshAllControllerGeometry();
+
   log(
     `Creating controller for ${node.tagName}: ${node.src || node.currentSrc || "no src"}`,
     4
@@ -1219,25 +1246,6 @@ chrome.storage.sync.get(tc.settings, function (storage) {
     ? storage.controllerButtons
     : tc.settings.controllerButtons;
 
-  // Migrate legacy blacklist if present
-  if (storage.blacklist && typeof storage.blacklist === "string" && tc.settings.siteRules.length === 0) {
-    var lines = storage.blacklist.split("\n");
-    lines.forEach((line) => {
-      var pattern = line.replace(regStrip, "");
-      if (pattern.length > 0) {
-        tc.settings.siteRules.push({
-          pattern: pattern,
-          disableExtension: true
-        });
-      }
-    });
-    if (tc.settings.siteRules.length > 0) {
-      chrome.storage.sync.set({ siteRules: tc.settings.siteRules });
-      chrome.storage.sync.remove(["blacklist"]);
-      log("Migrated legacy blacklist to site rules", 4);
-    }
-  }
-
   tc.settings.enableSubtitleNudge =
     typeof storage.enableSubtitleNudge !== "undefined"
       ? Boolean(storage.enableSubtitleNudge)
@@ -1284,8 +1292,7 @@ chrome.storage.sync.get(tc.settings, function (storage) {
           var videoGs = getPrimaryVideoElement();
           if (!videoGs) return false;
           sendResponse({
-            speed: videoGs.playbackRate,
+            speed: videoGs.playbackRate
-            resetLabel: computeResetButtonLabelForVideo(videoGs)
           });
           return false;
         }
@@ -1302,8 +1309,7 @@ chrome.storage.sync.get(tc.settings, function (storage) {
           var videoAfter = getPrimaryVideoElement();
           if (!videoAfter) return false;
           sendResponse({
-            speed: videoAfter.playbackRate,
+            speed: videoAfter.playbackRate
-            resetLabel: computeResetButtonLabelForVideo(videoAfter)
           });
           return false;
         }
@@ -1314,8 +1320,60 @@ chrome.storage.sync.get(tc.settings, function (storage) {
     // Set the flag to prevent adding the listener again.
     window.vscMessageListener = true;
   }
+  chrome.storage.local.get(["customButtonIcons"], function (loc) {
+    tc.settings.customButtonIcons =
+      loc &&
+      loc.customButtonIcons &&
+      typeof loc.customButtonIcons === "object"
+        ? loc.customButtonIcons
+        : {};
+
+    if (!window.vscCustomIconListener) {
+      window.vscCustomIconListener = true;
+      chrome.storage.onChanged.addListener(function (changes, area) {
+        if (area !== "local" || !changes.customButtonIcons) return;
+        var nv = changes.customButtonIcons.newValue;
+        tc.settings.customButtonIcons =
+          nv && typeof nv === "object" ? nv : {};
+        if (tc.mediaElements && tc.mediaElements.length) {
+          tc.mediaElements.forEach(function (video) {
+            if (!video.vsc || !video.vsc.div) return;
+            var doc = video.ownerDocument;
+            var shadow = video.vsc.div.shadowRoot;
+            if (!shadow) return;
+            shadow.querySelectorAll("button[data-action]").forEach(function (btn) {
+              var act = btn.dataset.action;
+              if (!act) return;
+              var svg =
+                tc.settings.customButtonIcons &&
+                tc.settings.customButtonIcons[act] &&
+                tc.settings.customButtonIcons[act].svg;
+              btn.innerHTML = "";
+              if (svg) {
+                var cw = doc.createElement("span");
+                cw.className = "vsc-btn-icon";
+                cw.innerHTML = svg;
+                btn.appendChild(cw);
+              } else if (typeof vscIconWrap === "function") {
+                var wrap = vscIconWrap(doc, act, 14);
+                if (wrap) {
+                  btn.appendChild(wrap);
+                } else {
+                  var cdf = controllerButtonDefs[act];
+                  btn.textContent = (cdf && cdf.label) || "?";
+                }
+              } else {
+                var cdf2 = controllerButtonDefs[act];
+                btn.textContent = (cdf2 && cdf2.label) || "?";
+              }
+            });
+          });
+        }
+      });
+    }
     initializeWhenReady(document);
   });
+});
 
 function getKeyBindings(action, what = "value") {
   try {
@@ -1332,7 +1390,25 @@ function setKeyBindings(action, value) {
 function createControllerButton(doc, action, label, className) {
   var button = doc.createElement("button");
   button.dataset.action = action;
-  button.textContent = label;
+  var custom =
+    tc.settings.customButtonIcons &&
+    tc.settings.customButtonIcons[action] &&
+    tc.settings.customButtonIcons[action].svg;
+  if (custom) {
+    var customWrap = doc.createElement("span");
+    customWrap.className = "vsc-btn-icon";
+    customWrap.innerHTML = custom;
+    button.appendChild(customWrap);
+  } else if (typeof vscIconWrap === "function") {
+    var wrap = vscIconWrap(doc, action, 14);
+    if (wrap) {
+      button.appendChild(wrap);
+    } else {
+      button.textContent = label || "?";
+    }
+  } else {
+    button.textContent = label || "?";
+  }
   if (className) {
     button.className = className;
   }
@@ -1849,8 +1925,9 @@ function defineVideoController() {
     nudgeFlashIndicator.setAttribute("aria-hidden", "true");
 
     controller.appendChild(dragHandle);
-    controller.appendChild(nudgeFlashIndicator);
     controller.appendChild(controls);
+    /* Flash sits after #controls so it never inserts space between speed and buttons. */
+    controller.appendChild(nudgeFlashIndicator);
     shadow.appendChild(controller);
 
     this.speedIndicator = dragHandle;
@@ -1859,7 +1936,6 @@ function defineVideoController() {
     this.resetButtonEl =
       shadow.querySelector('button[data-action="reset"]') || null;
     this.resetToggleArmed = false;
-    updateResetButtonLabel(this.video);
     if (subtitleNudgeIndicator) {
       updateSubtitleNudgeIndicator(this.video);
     }
@@ -2091,6 +2167,25 @@ function applySiteRuleOverrides() {
   return false;
 }
 
+/** Apply current tc.settings controller layout/opacity to every attached controller (after site rules). */
+function refreshAllControllerGeometry() {
+  tc.mediaElements.forEach(function (video) {
+    if (!video || !video.vsc) return;
+    applyControllerLocation(video.vsc, tc.settings.controllerLocation);
+    var controllerEl = getControllerElement(video.vsc);
+    if (controllerEl) {
+      controllerEl.style.opacity = String(tc.settings.controllerOpacity);
+    }
+  });
+}
+
+/** Re-match site rules for current URL and refresh controller position/opacity on every video. */
+function reapplySiteRulesAndControllerGeometry() {
+  var siteDisabled = applySiteRuleOverrides();
+  if (!tc.settings.enabled || siteDisabled) return;
+  refreshAllControllerGeometry();
+}
+
 function shouldPreserveDesiredSpeed(video, speed) {
   if (!video || !video.vsc) return false;
   var desiredSpeed = getDesiredSpeed(video);
@@ -2127,7 +2222,6 @@ function setupListener(root) {
       if (speed === 1.0 || video.paused) video.vsc.stopSubtitleNudge();
       else video.vsc.startSubtitleNudge();
     }
-    updateResetButtonLabel(video);
   }
   root.addEventListener(
     "ratechange",
@@ -2163,7 +2257,6 @@ function setupListener(root) {
           video.vsc.resetToggleArmed = false;
           video.vsc.speedIndicator.textContent = desiredSpeed.toFixed(2);
           scheduleSpeedRestore(video, desiredSpeed, "pause/play or seek");
-          updateResetButtonLabel(video);
           return;
         }
 
@@ -2420,6 +2513,10 @@ function attachNavigationListeners() {
 
   window.addEventListener("popstate", scheduleRescan);
   window.addEventListener("hashchange", scheduleRescan);
+  /* YouTube often navigates without a history API call the extension can see first */
+  if (typeof document !== "undefined" && isOnYouTube()) {
+    document.addEventListener("yt-navigate-finish", scheduleRescan);
+  }
   window.vscNavigationListenersAttached = true;
 }
 
@@ -2439,53 +2536,12 @@ function initializeNow(doc, forceReinit = false) {
 
   if (forceReinit) {
     log("Force re-initialization requested", 4);
-    tc.mediaElements.forEach(function (video) {
+    refreshAllControllerGeometry();
-      if (!video || !video.vsc) return;
-      applyControllerLocation(video.vsc, tc.settings.controllerLocation);
-      var controllerEl = getControllerElement(video.vsc);
-      if (controllerEl) {
-        controllerEl.style.opacity = String(tc.settings.controllerOpacity);
-      }
-    });
   }
 
   vscInitializedDocuments.add(doc);
 }
 
-function formatSpeedWithX(speed) {
-  var n = Number(speed);
-  if (!isFinite(n)) return "?x";
-  return n.toFixed(2) + "x";
-}
-
-function computeResetButtonLabelForVideo(video) {
-  if (!video) return "1.00x";
-  var rate = video.playbackRate;
-  var atOne = Math.abs(rate - 1.0) < 0.01;
-  var armed = video.vsc && video.vsc.resetToggleArmed === true;
-
-  if (atOne) {
-    if (armed) {
-      var videoId = getVideoSourceKey(video);
-      var lastToggle = lastToggleSpeed[videoId];
-      var pref = getKeyBindings("fast") || 1.8;
-      var speedToRestore =
-        lastToggle == null || Math.abs(lastToggle - 1.0) < 0.01
-          ? pref
-          : lastToggle;
-      return formatSpeedWithX(speedToRestore);
-    }
-    return "1.00x";
-  }
-  return formatSpeedWithX(1.0);
-}
-
-function updateResetButtonLabel(video) {
-  if (!video || !video.vsc || !video.vsc.resetButtonEl) return;
-  video.vsc.resetButtonEl.textContent =
-    computeResetButtonLabelForVideo(video);
-}
-
 function setSpeed(
   video,
   speed,
@@ -2556,7 +2612,6 @@ function setSpeed(
       video.vsc.startSubtitleNudge();
     }
   }
-  updateResetButtonLabel(video);
 }
 
 function runAction(action, value, e) {

lucide-client.js

@@ -0,0 +1,173 @@
+/**
+ * Lucide static icons via jsDelivr (same registry as lucide.dev).
+ * ISC License — https://lucide.dev
+ */
+var LUCIDE_STATIC_VERSION = "1.7.0";
+var LUCIDE_CDN_BASE =
+  "https://cdn.jsdelivr.net/npm/lucide-static@" +
+  LUCIDE_STATIC_VERSION;
+
+var LUCIDE_TAGS_CACHE_KEY = "lucideTagsCacheV1";
+var LUCIDE_TAGS_MAX_AGE_MS = 1000 * 60 * 60 * 24 * 7; /* 7 days */
+
+function lucideIconSvgUrl(slug) {
+  if (!slug || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/i.test(slug)) {
+    return "";
+  }
+  return LUCIDE_CDN_BASE + "/icons/" + slug.toLowerCase() + ".svg";
+}
+
+function lucideTagsJsonUrl() {
+  return LUCIDE_CDN_BASE + "/tags.json";
+}
+
+/** Collapse whitespace for smaller storage. */
+function lucideMinifySvg(s) {
+  return String(s).replace(/\s+/g, " ").trim();
+}
+
+function sanitizeLucideSvg(svgText) {
+  if (!svgText || typeof svgText !== "string") return null;
+  var t = String(svgText).replace(/\0/g, "").trim();
+  if (!/<svg[\s>]/i.test(t)) return null;
+  var doc = new DOMParser().parseFromString(t, "image/svg+xml");
+  var svg = doc.querySelector("svg");
+  if (!svg) return null;
+  svg.querySelectorAll("script").forEach(function (n) {
+    n.remove();
+  });
+  svg.querySelectorAll("style").forEach(function (n) {
+    n.remove();
+  });
+  svg.querySelectorAll("*").forEach(function (el) {
+    for (var i = el.attributes.length - 1; i >= 0; i--) {
+      var attr = el.attributes[i];
+      var name = attr.name.toLowerCase();
+      var val = attr.value;
+      if (name.indexOf("on") === 0) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      if (
+        (name === "href" || name === "xlink:href") &&
+        /^javascript:/i.test(val)
+      ) {
+        el.removeAttribute(attr.name);
+      }
+    }
+  });
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.removeAttribute("width");
+  svg.removeAttribute("height");
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  svg.setAttribute("aria-hidden", "true");
+  return lucideMinifySvg(svg.outerHTML);
+}
+
+function fetchLucideSvg(slug) {
+  var url = lucideIconSvgUrl(slug);
+  if (!url) {
+    return Promise.reject(new Error("Invalid icon name"));
+  }
+  return fetch(url, { cache: "force-cache" }).then(function (r) {
+    if (!r.ok) {
+      throw new Error("Icon not found: " + slug);
+    }
+    return r.text();
+  });
+}
+
+function fetchAndCacheLucideTags(chromeLocal, resolve, reject) {
+  fetch(lucideTagsJsonUrl(), { cache: "force-cache" })
+    .then(function (r) {
+      if (!r.ok) throw new Error("tags.json HTTP " + r.status);
+      return r.json();
+    })
+    .then(function (obj) {
+      var payload = {};
+      payload[LUCIDE_TAGS_CACHE_KEY] = obj;
+      payload[LUCIDE_TAGS_CACHE_KEY + "At"] = Date.now();
+      if (chromeLocal && chromeLocal.set) {
+        chromeLocal.set(payload, function () {
+          resolve(obj);
+        });
+      } else {
+        resolve(obj);
+      }
+    })
+    .catch(reject);
+}
+
+/** @returns {Promise<Object<string, string[]>>} slug -> tags */
+function getLucideTagsMap(chromeLocal, bypassCache) {
+  return new Promise(function (resolve, reject) {
+    if (!chromeLocal || !chromeLocal.get) {
+      fetch(lucideTagsJsonUrl(), { cache: "force-cache" })
+        .then(function (r) {
+          return r.json();
+        })
+        .then(resolve)
+        .catch(reject);
+      return;
+    }
+    if (bypassCache) {
+      fetchAndCacheLucideTags(chromeLocal, resolve, reject);
+      return;
+    }
+    chromeLocal.get(
+      [LUCIDE_TAGS_CACHE_KEY, LUCIDE_TAGS_CACHE_KEY + "At"],
+      function (stored) {
+        if (chrome.runtime.lastError) {
+          fetchAndCacheLucideTags(chromeLocal, resolve, reject);
+          return;
+        }
+        var data = stored[LUCIDE_TAGS_CACHE_KEY];
+        var at = stored[LUCIDE_TAGS_CACHE_KEY + "At"];
+        if (
+          data &&
+          typeof data === "object" &&
+          at &&
+          Date.now() - at < LUCIDE_TAGS_MAX_AGE_MS
+        ) {
+          resolve(data);
+          return;
+        }
+        fetchAndCacheLucideTags(chromeLocal, resolve, reject);
+      }
+    );
+  });
+}
+
+/**
+ * @param {Object<string,string[]>} tagsMap
+ * @param {string} query
+ * @param {number} limit
+ * @returns {string[]} slugs
+ */
+function searchLucideSlugs(tagsMap, query, limit) {
+  var lim = limit != null ? limit : 60;
+  var q = String(query || "")
+    .toLowerCase()
+    .trim();
+  if (!tagsMap || !q) return [];
+  var matches = [];
+  for (var slug in tagsMap) {
+    if (!Object.prototype.hasOwnProperty.call(tagsMap, slug)) continue;
+    var hay =
+      slug +
+      " " +
+      (Array.isArray(tagsMap[slug]) ? tagsMap[slug].join(" ") : "");
+    if (hay.toLowerCase().indexOf(q) === -1) continue;
+    matches.push(slug);
+  }
+  matches.sort(function (a, b) {
+    var al = a.toLowerCase();
+    var bl = b.toLowerCase();
+    var ap = al.indexOf(q) === 0 ? 0 : 1;
+    var bp = bl.indexOf(q) === 0 ? 0 : 1;
+    if (ap !== bp) return ap - bp;
+    return al.localeCompare(bl);
+  });
+  return matches.slice(0, lim);
+}

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Speeder",
   "short_name": "Speeder",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "manifest_version": 2,
   "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts (New and improved version of \"Video Speed Controller\")",
   "homepage_url": "https://github.com/SoPat712/speeder",
@@ -26,7 +26,8 @@
     ]
   },
   "permissions": [
-    "storage"
+    "storage",
+    "https://cdn.jsdelivr.net/*"
   ],
   "options_ui": {
     "page": "options.html",
@@ -58,6 +59,7 @@
         "inject.css"
       ],
       "js": [
+        "ui-icons.js",
         "inject.js"
       ]
     }

options.css

@@ -15,12 +15,16 @@
 }
 
 html {
-  min-height: 100%;
+  /* Avoid coupling to the browser viewport: embedded options (e.g. Add-ons
+   * Manager iframe) must size to content, not 100vh, or a large empty band
+   * appears below the page. */
+  height: auto;
+  min-height: 0;
 }
 
 body {
   margin: 0;
-  min-height: 100vh;
+  min-height: 0;
   padding: 24px 16px 40px;
   background: var(--bg);
   color: var(--text);
@@ -49,6 +53,7 @@ body {
 }
 
 h1,
+h2,
 h3,
 h4 {
   margin: 0;
@@ -104,6 +109,35 @@ h4 {
   background: var(--panel);
 }
 
+.control-bars-group {
+  padding: 20px;
+}
+
+.control-bars-inner {
+  display: grid;
+  gap: 10px;
+}
+
+.settings-card-nested {
+  background: var(--panel-subtle);
+  border-radius: 10px;
+}
+
+.section-heading-major {
+  margin-bottom: 14px;
+}
+
+.section-heading-major h2 {
+  margin: 0 0 6px;
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.section-heading-major .section-intro {
+  margin-top: 0;
+}
+
 .section-heading {
   margin-bottom: 10px;
 }
@@ -502,6 +536,176 @@ label em {
   border: 1px solid var(--border);
   font-size: 12px;
   line-height: 1;
+  color: var(--text);
+}
+
+.cb-icon svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.row-lucide-pair select {
+  justify-self: end;
+}
+
+.row-lucide-search-row {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+  padding: 12px 0;
+}
+
+.row-lucide-search-row .lucide-search-label {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.lucide-search-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 100%;
+  min-height: 44px;
+  padding: 0 14px 0 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.lucide-search-field:focus-within {
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
+}
+
+.lucide-search-icon {
+  display: flex;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.lucide-search-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 40px;
+  padding: 8px 0;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  font-size: 14px;
+}
+
+.lucide-search-input::placeholder {
+  color: var(--muted);
+  opacity: 0.85;
+}
+
+.lucide-search-input:focus {
+  outline: none;
+}
+
+.lucide-icon-results {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 12px 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+button.lucide-result-tile {
+  width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: var(--panel-subtle);
+  border: 1px solid var(--border-strong);
+  cursor: pointer;
+}
+
+button.lucide-result-tile:hover {
+  background: var(--panel);
+  border-color: #9ca3af;
+}
+
+button.lucide-result-tile .lucide-result-thumb {
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+button.lucide-result-tile.lucide-picked {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
+  background: var(--panel);
+}
+
+.lucide-icon-status {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+  min-height: 1.2em;
+}
+
+.lucide-icon-preview-row {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 16px;
+  align-items: start;
+  margin-top: 14px;
+}
+
+.lucide-icon-preview {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.lucide-icon-preview svg {
+  width: 36px;
+  height: 36px;
+}
+
+.lucide-icon-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.lucide-icon-actions .lucide-apply {
+  background: #ffffff !important;
+  color: #111827 !important;
+  border: 1px solid var(--border-strong) !important;
+  font-weight: 600;
+}
+
+.lucide-icon-actions .lucide-apply:hover {
+  background: #f3f4f6 !important;
+  border-color: #9ca3af !important;
+}
+
+.lucide-icon-actions .secondary {
+  background: var(--panel-subtle);
+  color: var(--text);
+  border-color: var(--border-strong);
 }
 
 .cb-label {
@@ -690,6 +894,10 @@ label em {
 }
 
 @media (max-width: 720px) {
+  .lucide-icon-preview-row {
+    grid-template-columns: 1fr;
+  }
+
   .shortcut-row,
   .shortcut-row.customs,
   .row,
@@ -740,6 +948,10 @@ label em {
     padding: 16px;
   }
 
+  .control-bars-group {
+    padding: 16px;
+  }
+
   .site-rule-header {
     grid-template-columns: 1fr;
   }
@@ -788,4 +1000,25 @@ label em {
   textarea:focus {
     border-color: #6b7280;
   }
+
+  .lucide-search-field:focus-within {
+    border-color: #6b7280;
+    box-shadow: 0 0 0 3px rgba(242, 244, 246, 0.12);
+  }
+
+  .lucide-icon-actions .lucide-apply {
+    background: #ffffff !important;
+    color: #111315 !important;
+    border-color: #e5e7eb !important;
+  }
+
+  .lucide-icon-actions .lucide-apply:hover {
+    background: #f3f4f6 !important;
+    border-color: #d1d5db !important;
+  }
+
+  button.lucide-result-tile .lucide-result-thumb {
+    filter: brightness(0) invert(1);
+    opacity: 0.92;
+  }
 }

options.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Speeder Settings</title>
     <link rel="stylesheet" href="options.css" />
+    <script src="ui-icons.js"></script>
+    <script src="lucide-client.js"></script>
     <script src="options.js"></script>
     <script src="importExport.js"></script>
   </head>
@@ -302,12 +304,25 @@
           </div>
         </section>
 
-        <section id="controlBarSettings" class="settings-card">
+        <section
-          <div class="section-heading">
+          id="controlBarsGroup"
-            <h3>Control bar</h3>
+          class="settings-card control-bars-group"
+          aria-labelledby="controlBarsGroupHeading"
+        >
+          <div class="section-heading section-heading-major">
+            <h2 id="controlBarsGroupHeading">Control bars</h2>
             <p class="section-intro">
-              Drag blocks to reorder. Move between Active and Available to show
+              In-page hover bar, extension popup bar, and Lucide icons for
-              or hide buttons.
+              buttons.
+            </p>
+          </div>
+          <div class="control-bars-inner">
+            <section id="controlBarSettings" class="settings-card settings-card-nested">
+              <div class="section-heading">
+                <h3>Hover control bar</h3>
+                <p class="section-intro">
+                  Drag blocks to reorder. Move between Active and Available to
+                  show or hide buttons.
                 </p>
               </div>
               <div class="cb-editor">
@@ -328,7 +343,7 @@
               </div>
             </section>
 
-        <section id="popupControlBarSettings" class="settings-card">
+            <section id="popupControlBarSettings" class="settings-card settings-card-nested">
               <div class="section-heading">
                 <h3>Popup control bar</h3>
                 <p class="section-intro">
@@ -357,6 +372,89 @@
               </div>
             </section>
 
+            <section id="lucideIconSettings" class="settings-card settings-card-nested">
+              <div class="section-heading">
+                <h3>Button icons (Lucide)</h3>
+                <p class="section-intro">
+                  Search icons from the
+                  <a
+                    href="https://lucide.dev"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Lucide</a
+                  >
+                  set (fetched from jsDelivr). Chosen SVGs are cached in local
+                  storage and included in settings export.
+                  <strong>Reset speed</strong> stays numeric text only.
+                </p>
+              </div>
+              <div class="row row-lucide-pair">
+                <label for="lucideIconActionSelect">Controller action</label>
+                <select id="lucideIconActionSelect"></select>
+              </div>
+              <div class="row row-lucide-search-row">
+                <label for="lucideIconSearch" class="lucide-search-label"
+                  >Search icons</label
+                >
+                <div class="lucide-search-field">
+                  <span class="lucide-search-icon" aria-hidden="true">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <circle cx="11" cy="11" r="8" />
+                      <path d="m21 21-4.3-4.3" />
+                    </svg>
+                  </span>
+                  <input
+                    type="search"
+                    id="lucideIconSearch"
+                    class="lucide-search-input"
+                    placeholder="Search by name or tag (e.g. star, arrow, media)…"
+                    autocomplete="off"
+                    spellcheck="false"
+                  />
+                </div>
+              </div>
+              <div
+                id="lucideIconResults"
+                class="lucide-icon-results"
+                role="listbox"
+                aria-label="Matching Lucide icons"
+              ></div>
+              <p id="lucideIconStatus" class="lucide-icon-status" aria-live="polite"></p>
+              <div class="lucide-icon-preview-row">
+                <div
+                  id="lucideIconPreview"
+                  class="lucide-icon-preview"
+                  aria-live="polite"
+                ></div>
+                <div class="lucide-icon-actions">
+                  <button type="button" id="lucideIconApply" class="lucide-apply">
+                    Apply to action
+                  </button>
+                  <button type="button" id="lucideIconClearAction" class="secondary">
+                    Clear this action
+                  </button>
+                  <button type="button" id="lucideIconClearAll" class="secondary">
+                    Clear all custom icons
+                  </button>
+                  <button type="button" id="lucideIconReloadTags" class="secondary">
+                    Refresh icon list from network
+                  </button>
+                </div>
+              </div>
+            </section>
+          </div>
+        </section>
+
         <section id="siteRules" class="settings-card">
           <div class="section-heading">
             <h3>Site rules</h3>

options.js

@@ -138,7 +138,7 @@ var controllerButtonDefs = {
   faster:   { icon: "+",      name: "Increase speed" },
   advance:  { icon: "\u00BB", name: "Advance" },
   display:  { icon: "\u00D7", name: "Close controller" },
-  reset:    { icon: "1.00x", name: "Reset speed" },
+  reset:    { icon: "", name: "Reset speed" },
   fast:     { icon: "\u2605", name: "Preferred speed" },
   nudge:    { icon: "\u2713", name: "Subtitle nudge" },
   settings: { icon: "\u2699", name: "Settings" },
@@ -148,6 +148,27 @@ var controllerButtonDefs = {
   jump:     { icon: "\u21E5", name: "Jump to marker" }
 };
 
+/** Cached custom Lucide SVGs (mirrors chrome.storage.local customButtonIcons). */
+var customButtonIconsLive = {};
+
+function fillControlBarIconElement(icon, buttonId) {
+  if (!icon || !buttonId) return;
+  var custom = customButtonIconsLive[buttonId];
+  if (custom && custom.svg) {
+    icon.innerHTML = custom.svg;
+    return;
+  }
+  if (typeof vscIconSvgString === "function") {
+    var svgHtml = vscIconSvgString(buttonId, 16);
+    if (svgHtml) {
+      icon.innerHTML = svgHtml;
+      return;
+    }
+  }
+  var def = controllerButtonDefs[buttonId];
+  icon.textContent = (def && def.icon) || "?";
+}
+
 function createDefaultBinding(action, key, keyCode, value) {
   return {
     action: action,
@@ -198,6 +219,7 @@ var tcDefaults = {
     {
       pattern: "/^https:\\/\\/(www\\.)?youtube\\.com\\/shorts\\/.*/",
       enabled: true,
+      rememberSpeed: true,
       controllerMarginTop: 60,
       controllerMarginBottom: 85
     }
@@ -847,27 +869,6 @@ function ensureAllDefaultBindings(storage) {
   });
 }
 
-function migrateLegacyBlacklist(storage) {
-  if (!storage.blacklist || typeof storage.blacklist !== "string") {
-    return [];
-  }
-
-  var siteRules = [];
-  var lines = storage.blacklist.split("\n");
-  
-  lines.forEach((line) => {
-    var pattern = line.replace(regStrip, "");
-    if (pattern.length === 0) return;
-    
-    siteRules.push({
-      pattern: pattern,
-      disableExtension: true
-    });
-  });
-
-  return siteRules;
-}
-
 function addSiteRuleShortcut(container, action, binding, value, force) {
   var div = document.createElement("div");
   div.setAttribute("class", "shortcut-row customs");
@@ -1125,7 +1126,7 @@ function createControlBarBlock(buttonId) {
 
   var icon = document.createElement("span");
   icon.className = "cb-icon";
-  icon.textContent = def.icon;
+  fillControlBarIconElement(icon, buttonId);
 
   var label = document.createElement("span");
   label.className = "cb-label";
@@ -1280,8 +1281,207 @@ function initControlBarEditor() {
   });
 }
 
+var lucidePickerSelectedSlug = null;
+var lucideSearchTimer = null;
+
+function setLucideStatus(msg) {
+  var el = document.getElementById("lucideIconStatus");
+  if (el) el.textContent = msg || "";
+}
+
+function repaintAllCbIconsFromCustomMap() {
+  document.querySelectorAll(".cb-block .cb-icon").forEach(function (icon) {
+    var block = icon.closest(".cb-block");
+    if (!block) return;
+    fillControlBarIconElement(icon, block.dataset.buttonId);
+  });
+}
+
+function persistCustomButtonIcons(map, callback) {
+  chrome.storage.local.set({ customButtonIcons: map }, function () {
+    if (chrome.runtime.lastError) {
+      setLucideStatus(
+        "Could not save icons: " + chrome.runtime.lastError.message
+      );
+      return;
+    }
+    customButtonIconsLive = map;
+    if (callback) callback();
+    repaintAllCbIconsFromCustomMap();
+  });
+}
+
+function initLucideButtonIconsUI() {
+  var actionSel = document.getElementById("lucideIconActionSelect");
+  var searchInput = document.getElementById("lucideIconSearch");
+  var resultsEl = document.getElementById("lucideIconResults");
+  var previewEl = document.getElementById("lucideIconPreview");
+  if (!actionSel || !searchInput || !resultsEl || !previewEl) return;
+  if (typeof getLucideTagsMap !== "function") return;
+
+  if (!actionSel.dataset.lucideInit) {
+    actionSel.dataset.lucideInit = "1";
+    actionSel.innerHTML = "";
+    Object.keys(controllerButtonDefs).forEach(function (aid) {
+      if (aid === "reset") return;
+      var o = document.createElement("option");
+      o.value = aid;
+      o.textContent =
+        controllerButtonDefs[aid].name + " (" + aid + ")";
+      actionSel.appendChild(o);
+    });
+  }
+
+  function renderResults(slugs) {
+    resultsEl.innerHTML = "";
+    slugs.forEach(function (slug) {
+      var b = document.createElement("button");
+      b.type = "button";
+      b.className = "lucide-result-tile";
+      b.dataset.slug = slug;
+      b.title = slug;
+      b.setAttribute("aria-label", slug);
+      if (slug === lucidePickerSelectedSlug) {
+        b.classList.add("lucide-picked");
+      }
+      var url =
+        typeof lucideIconSvgUrl === "function" ? lucideIconSvgUrl(slug) : "";
+      if (url) {
+        var img = document.createElement("img");
+        img.className = "lucide-result-thumb";
+        img.src = url;
+        img.alt = "";
+        img.loading = "lazy";
+        b.appendChild(img);
+      } else {
+        b.textContent = slug.slice(0, 3);
+      }
+      b.addEventListener("click", function () {
+        lucidePickerSelectedSlug = slug;
+        Array.prototype.forEach.call(
+          resultsEl.querySelectorAll("button"),
+          function (x) {
+            x.classList.toggle("lucide-picked", x.dataset.slug === slug);
+          }
+        );
+        fetchLucideSvg(slug)
+          .then(function (txt) {
+            var safe = sanitizeLucideSvg(txt);
+            if (!safe) throw new Error("Bad SVG");
+            previewEl.innerHTML = safe;
+            setLucideStatus("Preview: " + slug);
+          })
+          .catch(function (e) {
+            previewEl.innerHTML = "";
+            setLucideStatus(
+              "Could not load: " + slug + " — " + e.message
+            );
+          });
+      });
+      resultsEl.appendChild(b);
+    });
+  }
+
+  if (!searchInput.dataset.lucideBound) {
+    searchInput.dataset.lucideBound = "1";
+    searchInput.addEventListener("input", function () {
+      clearTimeout(lucideSearchTimer);
+      lucideSearchTimer = setTimeout(function () {
+        getLucideTagsMap(chrome.storage.local, false)
+          .then(function (map) {
+            var q = searchInput.value;
+            if (!q.trim()) {
+              resultsEl.innerHTML = "";
+              return;
+            }
+            renderResults(searchLucideSlugs(map, q, 48));
+          })
+          .catch(function (e) {
+            setLucideStatus("Icon list error: " + e.message);
+          });
+      }, 200);
+    });
+  }
+
+  var applyBtn = document.getElementById("lucideIconApply");
+  if (applyBtn && !applyBtn.dataset.lucideBound) {
+    applyBtn.dataset.lucideBound = "1";
+    applyBtn.addEventListener("click", function () {
+      var action = actionSel.value;
+      var slug = lucidePickerSelectedSlug;
+      if (!action || !slug) {
+        setLucideStatus("Pick an action and click an icon first.");
+        return;
+      }
+      fetchLucideSvg(slug)
+        .then(function (txt) {
+          var safe = sanitizeLucideSvg(txt);
+          if (!safe) throw new Error("Sanitize failed");
+          var next = Object.assign({}, customButtonIconsLive);
+          next[action] = { slug: slug, svg: safe };
+          persistCustomButtonIcons(next, function () {
+            setLucideStatus(
+              "Saved " +
+                slug +
+                " for " +
+                action +
+                ". Reload pages for the hover bar."
+            );
+          });
+        })
+        .catch(function (e) {
+          setLucideStatus("Apply failed: " + e.message);
+        });
+    });
+  }
+
+  var clrOne = document.getElementById("lucideIconClearAction");
+  if (clrOne && !clrOne.dataset.lucideBound) {
+    clrOne.dataset.lucideBound = "1";
+    clrOne.addEventListener("click", function () {
+      var action = actionSel.value;
+      if (!action) return;
+      var next = Object.assign({}, customButtonIconsLive);
+      delete next[action];
+      persistCustomButtonIcons(next, function () {
+        setLucideStatus("Cleared custom icon for " + action + ".");
+      });
+    });
+  }
+
+  var clrAll = document.getElementById("lucideIconClearAll");
+  if (clrAll && !clrAll.dataset.lucideBound) {
+    clrAll.dataset.lucideBound = "1";
+    clrAll.addEventListener("click", function () {
+      persistCustomButtonIcons({}, function () {
+        setLucideStatus("All custom icons cleared.");
+      });
+    });
+  }
+
+  var reloadTags = document.getElementById("lucideIconReloadTags");
+  if (reloadTags && !reloadTags.dataset.lucideBound) {
+    reloadTags.dataset.lucideBound = "1";
+    reloadTags.addEventListener("click", function () {
+      getLucideTagsMap(chrome.storage.local, true)
+        .then(function () {
+          setLucideStatus("Icon name list refreshed.");
+        })
+        .catch(function (e) {
+          setLucideStatus("Refresh failed: " + e.message);
+        });
+    });
+  }
+}
+
 function restore_options() {
   chrome.storage.sync.get(tcDefaults, function (storage) {
+    chrome.storage.local.get(["customButtonIcons"], function (loc) {
+      customButtonIconsLive =
+        loc && loc.customButtonIcons && typeof loc.customButtonIcons === "object"
+          ? loc.customButtonIcons
+          : {};
+
     document.getElementById("rememberSpeed").checked = storage.rememberSpeed;
     document.getElementById("forceLastSavedSpeed").checked =
       storage.forceLastSavedSpeed;
@@ -1350,16 +1550,11 @@ function restore_options() {
 
     refreshAddShortcutSelector();
 
-    // Load site rules (use defaults if none in storage or if storage has empty array)
+    // Load site rules (use defaults if none in storage or empty array)
-    var siteRules = Array.isArray(storage.siteRules) && storage.siteRules.length > 0
+    var siteRules =
+      Array.isArray(storage.siteRules) && storage.siteRules.length > 0
         ? storage.siteRules
-      : (storage.blacklist ? migrateLegacyBlacklist(storage) : (tcDefaults.siteRules || []));
+        : tcDefaults.siteRules || [];
-
-    // If we migrated from blacklist, save the new format
-    if (storage.blacklist && siteRules.length > 0) {
-      chrome.storage.sync.set({ siteRules: siteRules });
-      chrome.storage.sync.remove(["blacklist"]);
-    }
 
     document.getElementById("siteRulesContainer").innerHTML = "";
     if (siteRules.length > 0) {
@@ -1383,12 +1578,20 @@ function restore_options() {
       : tcDefaults.popupControllerButtons;
     populatePopupControlBarEditor(popupButtons);
     updatePopupEditorDisabledState();
+
+    initLucideButtonIconsUI();
+    });
   });
 }
 
 function restore_defaults() {
   document.querySelectorAll(".customs:not([id])").forEach((el) => el.remove());
 
+  chrome.storage.local.remove(
+    ["customButtonIcons", "lucideTagsCacheV1", "lucideTagsCacheV1At"],
+    function () {}
+  );
+
   chrome.storage.sync.set(tcDefaults, function () {
     restore_options();
     var status = document.getElementById("status");

popup.css

@@ -159,6 +159,22 @@ button:focus-visible {
   opacity: 0.55;
 }
 
+.popup-control-bar button .vsc-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.popup-control-bar button .vsc-btn-icon svg {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+}
+
 .popup-status {
   font-size: 12px;
   color: var(--muted);

popup.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>Speeder</title>
     <link rel="stylesheet" href="popup.css" />
+    <script src="ui-icons.js"></script>
     <script src="popup.js"></script>
   </head>
   <body>

popup.js

@@ -1,19 +1,20 @@
 document.addEventListener("DOMContentLoaded", function () {
   var regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
 
+  /* `label` is only used if ui-icons.js has no path for this action (fallback). */
   var controllerButtonDefs = {
-    rewind:   { label: "\u00AB", className: "rw" },
+    rewind:   { label: "", className: "rw" },
-    slower:   { label: "\u2212", className: "" },
+    slower:   { label: "", className: "" },
-    faster:   { label: "+",      className: "" },
+    faster:   { label: "", className: "" },
-    advance:  { label: "\u00BB", className: "rw" },
+    advance:  { label: "", className: "rw" },
-    display:  { label: "\u00D7", className: "hideButton" },
+    display:  { label: "", className: "hideButton" },
-    reset:    { label: "1.00x", className: "" },
+    reset:    { label: "", className: "" },
-    fast:     { label: "\u2605", className: "" },
+    fast:     { label: "", className: "" },
-    settings: { label: "\u2699", className: "" },
+    settings: { label: "", className: "" },
-    pause:    { label: "\u23EF", className: "" },
+    pause:    { label: "", className: "" },
-    muted:    { label: "M",      className: "" },
+    muted:    { label: "", className: "" },
-    mark:     { label: "\u2691", className: "" },
+    mark:     { label: "", className: "" },
-    jump:     { label: "\u21E5", className: "" }
+    jump:     { label: "", className: "" }
   };
 
   var defaultButtons = ["rewind", "slower", "faster", "advance", "display"];
@@ -23,14 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
     controllerButtons: defaultButtons,
     popupMatchHoverControls: true,
     popupControllerButtons: defaultButtons,
-    siteRules: [],
+    siteRules: []
-    blacklist: `\
-      www.instagram.com
-      twitter.com
-      vine.co
-      imgur.com
-      teams.microsoft.com
-    `.replace(/^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm, "")
   };
   var renderToken = 0;
 
@@ -39,27 +33,6 @@ document.addEventListener("DOMContentLoaded", function () {
     return str.replace(m, "\\$&");
   }
 
-  function isBlacklisted(url, blacklist) {
-    let b = false;
-    const l = blacklist ? blacklist.split("\n") : [];
-    l.forEach((m) => {
-      if (b) return;
-      m = m.replace(regStrip, "");
-      if (m.length == 0) return;
-      let r;
-      if (m.startsWith("/") && m.lastIndexOf("/") > 0) {
-        try {
-          const ls = m.lastIndexOf("/");
-          r = new RegExp(m.substring(1, ls), m.substring(ls + 1));
-        } catch (e) {
-          return;
-        }
-      } else r = new RegExp(escapeStringRegExp(m));
-      if (r && r.test(url)) b = true;
-    });
-    return b;
-  }
-
   function matchSiteRule(url, siteRules) {
     if (!url || !Array.isArray(siteRules)) return null;
     for (var i = 0; i < siteRules.length; i++) {
@@ -171,20 +144,10 @@ document.addEventListener("DOMContentLoaded", function () {
     if (el) el.textContent = (speed != null ? Number(speed) : 1).toFixed(2);
   }
 
-  function updatePopupResetLabel(resetLabel) {
-    var bar = document.getElementById("popupControlBar");
-    if (!bar || typeof resetLabel !== "string") return;
-    var btn = bar.querySelector('button[data-action="reset"]');
-    if (btn) btn.textContent = resetLabel;
-  }
-
   function applySpeedAndResetFromResponse(response) {
     if (response && response.speed != null) {
       updateSpeedDisplay(response.speed);
     }
-    if (response && response.resetLabel != null) {
-      updatePopupResetLabel(response.resetLabel);
-    }
   }
 
   function pickBestFrameSpeedResult(results) {
@@ -194,18 +157,14 @@ document.addEventListener("DOMContentLoaded", function () {
     var fallback = null;
     for (i = 0; i < results.length; i++) {
       r = results[i];
-      if (
+      if (!r || typeof r.speed !== "number") {
-        !r ||
-        typeof r.speed !== "number" ||
-        typeof r.resetLabel !== "string"
-      ) {
         continue;
       }
       if (r.preferred) {
-        return { speed: r.speed, resetLabel: r.resetLabel };
+        return { speed: r.speed };
       }
       if (!fallback) {
-        fallback = { speed: r.speed, resetLabel: r.resetLabel };
+        fallback = { speed: r.speed };
       }
     }
     return fallback;
@@ -223,9 +182,7 @@ document.addEventListener("DOMContentLoaded", function () {
         function (results) {
           if (chrome.runtime.lastError) {
             sendToActiveTab({ action: "get_speed" }, function (response) {
-              applySpeedAndResetFromResponse(
+              applySpeedAndResetFromResponse(response || { speed: 1 });
-                response || { speed: 1, resetLabel: "1.00x" }
-              );
             });
             return;
           }
@@ -234,9 +191,7 @@ document.addEventListener("DOMContentLoaded", function () {
             applySpeedAndResetFromResponse(best);
           } else {
             sendToActiveTab({ action: "get_speed" }, function (response) {
-              applySpeedAndResetFromResponse(
+              applySpeedAndResetFromResponse(response || { speed: 1 });
-                response || { speed: 1, resetLabel: "1.00x" }
-              );
             });
           }
         }
@@ -244,13 +199,15 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  function buildControlBar(buttons) {
+  function buildControlBar(buttons, customIconsMap) {
     var bar = document.getElementById("popupControlBar");
     if (!bar) return;
 
     var existing = bar.querySelectorAll("button");
     existing.forEach(function (btn) { btn.remove(); });
 
+    var customMap = customIconsMap || {};
+
     buttons.forEach(function (btnId) {
       if (btnId === "nudge") return;
       var def = controllerButtonDefs[btnId];
@@ -258,7 +215,25 @@ document.addEventListener("DOMContentLoaded", function () {
 
       var btn = document.createElement("button");
       btn.dataset.action = btnId;
-      btn.textContent = def.label;
+      var customEntry = customMap[btnId];
+      if (customEntry && customEntry.svg) {
+        var customSpan = document.createElement("span");
+        customSpan.className = "vsc-btn-icon";
+        customSpan.innerHTML = customEntry.svg;
+        btn.appendChild(customSpan);
+      } else if (typeof vscIconSvgString === "function") {
+        var svgStr = vscIconSvgString(btnId, 16);
+        if (svgStr) {
+          var iconSpan = document.createElement("span");
+          iconSpan.className = "vsc-btn-icon";
+          iconSpan.innerHTML = svgStr;
+          btn.appendChild(iconSpan);
+        } else {
+          btn.textContent = def.label || "?";
+        }
+      } else {
+        btn.textContent = def.label || "?";
+      }
       if (def.className) btn.className = def.className;
       btn.title = btnId.charAt(0).toUpperCase() + btnId.slice(1);
 
@@ -335,6 +310,13 @@ document.addEventListener("DOMContentLoaded", function () {
   function renderForActiveTab() {
     var currentRenderToken = ++renderToken;
 
+    chrome.storage.local.get(["customButtonIcons"], function (loc) {
+      if (currentRenderToken !== renderToken) return;
+      var customIconsMap =
+        loc && loc.customButtonIcons && typeof loc.customButtonIcons === "object"
+          ? loc.customButtonIcons
+          : {};
+
       chrome.storage.sync.get(storageDefaults, function (storage) {
         if (currentRenderToken !== renderToken) return;
 
@@ -343,10 +325,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
         var url = context && context.url ? context.url : "";
         var siteRule = matchSiteRule(url, storage.siteRules);
-        var blacklisted = isBlacklisted(url, storage.blacklist);
         var siteDisabled = isSiteRuleDisabled(siteRule);
-        var siteAvailable =
+        var siteAvailable = storage.enabled !== false && !siteDisabled;
-          storage.enabled !== false && !blacklisted && !siteDisabled;
         var showBar = storage.showPopupControlBar !== false;
 
         if (siteRule && siteRule.showPopupControlBar !== undefined) {
@@ -354,20 +334,15 @@ document.addEventListener("DOMContentLoaded", function () {
         }
 
         toggleEnabledUI(storage.enabled !== false);
-        buildControlBar(resolvePopupButtons(storage, siteRule));
+        buildControlBar(
+          resolvePopupButtons(storage, siteRule),
+          customIconsMap
+        );
         setControlBarVisible(siteAvailable && showBar);
 
-        if (blacklisted) {
-          setStatusMessage("Site is blacklisted.");
-          updateSpeedDisplay(1);
-          updatePopupResetLabel("1.00x");
-          return;
-        }
-
         if (siteDisabled) {
           setStatusMessage("Speeder is disabled for this site.");
           updateSpeedDisplay(1);
-          updatePopupResetLabel("1.00x");
           return;
         }
 
@@ -376,10 +351,10 @@ document.addEventListener("DOMContentLoaded", function () {
           querySpeed();
         } else {
           updateSpeedDisplay(1);
-          updatePopupResetLabel("1.00x");
         }
       });
       });
+    });
   }
 
   chrome.tabs.onActivated.addListener(function () {
@@ -394,6 +369,10 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   chrome.storage.onChanged.addListener(function (changes, areaName) {
+    if (areaName === "local" && changes.customButtonIcons) {
+      renderForActiveTab();
+      return;
+    }
     if (areaName !== "sync") return;
     if (
       changes.enabled ||
@@ -401,8 +380,7 @@ document.addEventListener("DOMContentLoaded", function () {
       changes.controllerButtons ||
       changes.popupMatchHoverControls ||
       changes.popupControllerButtons ||
-      changes.siteRules ||
+      changes.siteRules
-      changes.blacklist
     ) {
       renderForActiveTab();
     }

scripts/deploy-amo-stable.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
-# Bump manifest on dev, merge dev→beta→main, push an annotated stable tag (v* without -beta).
+# Squash beta onto main, set manifest version, one release commit, push stable tag (v* without -beta).
+# Does not merge dev or push to beta — promote only what is already on beta.
 # Triggers .github/workflows/deploy.yml: listed AMO submission.
 
 set -euo pipefail
@@ -54,11 +55,11 @@ if [[ -n "$(git status --porcelain)" ]]; then
   exit 1
 fi
 
-git checkout dev
+git checkout beta
-git pull origin dev
+git pull origin beta
 
-echo "Current version in manifest.json: $(manifest_version)"
+echo "Current version on beta (manifest.json): $(manifest_version)"
-read -r -p "New version for manifest.json (e.g. 5.0.4): " SEMVER_IN
+read -r -p "Release version for manifest.json + tag (e.g. 5.0.4): " SEMVER_IN
 SEMVER="$(normalize_semver "$SEMVER_IN")"
 validate_semver "$SEMVER"
 
@@ -71,28 +72,22 @@ fi
 
 echo
 echo "This will:"
-echo "  1. set manifest.json version to $SEMVER and commit on dev"
+echo "  1. checkout main, merge --squash origin/beta (single release commit on main)"
-echo "  2. merge dev → beta and push beta"
+echo "  2. set manifest.json to $SEMVER in that commit (if anything else changed, it is included too)"
-echo "  3. merge beta → main and push main"
+echo "  3. push origin main, create tag $TAG, push tag (triggers listed AMO submit)"
-echo "  4. create tag $TAG on main and push it (triggers listed AMO submit)"
+echo "  4. checkout dev (merge main→dev yourself if you want them aligned)"
-echo "  5. checkout dev"
 read -r -p "Continue? [y/N] " confirm
 [[ "${confirm:-}" =~ ^[yY](es)?$ ]] || { echo "Aborted."; exit 1; }
 
 echo "🚀 Releasing stable $TAG to AMO (listed)"
 
-bump_manifest "$SEMVER"
-git add manifest.json
-git commit -m "Bump version to $SEMVER"
-
-git checkout beta
-git pull origin beta
-git merge dev --no-ff -m "Merge dev ($TAG)"
-git push origin beta
-
 git checkout main
 git pull origin main
-git merge beta --no-ff -m "Merge beta ($TAG)"
+git merge --squash beta
+bump_manifest "$SEMVER"
+git add -A
+git commit -m "Release $TAG"
+
 git push origin main
 
 git tag -a "$TAG" -m "$TAG"
@@ -100,4 +95,4 @@ git push origin "$TAG"
 
 git checkout dev
 
-echo "✅ Done: stable $TAG (manifest $SEMVER, main + tag pushed)"
+echo "✅ Done: main squashed from beta, tagged $TAG (manifest $SEMVER)"

scripts/deploy-beta.sh

@@ -76,10 +76,10 @@ fi
 
 echo
 echo "This will:"
-echo "  1. set manifest.json version to $SEMVER and commit on dev"
+echo "  1. set manifest.json version to $SEMVER, commit on dev, push origin dev"
 echo "  2. checkout beta, merge dev (no-ff), push origin beta"
 echo "  3. create tag $TAG and push it (triggers beta AMO + prerelease)"
-echo "  4. checkout dev"
+echo "  4. checkout dev (main is not modified)"
 read -r -p "Continue? [y/N] " confirm
 [[ "${confirm:-}" =~ ^[yY](es)?$ ]] || { echo "Aborted."; exit 1; }
 
@@ -88,6 +88,7 @@ echo "🚀 Releasing beta $TAG"
 bump_manifest "$SEMVER"
 git add manifest.json
 git commit -m "Bump version to $SEMVER"
+git push origin dev
 
 git checkout beta
 git pull origin beta
@@ -98,5 +99,6 @@ git tag -a "$TAG" -m "$TAG"
 git push origin "$TAG"
 
 git checkout dev
+git pull origin dev
 
-echo "✅ Done: beta $TAG (manifest $SEMVER, merge + tag pushed)"
+echo "✅ Done: beta $TAG (manifest $SEMVER; dev + beta + tag pushed)"

shadow.css

@@ -4,10 +4,17 @@
   font-size: 13px;
 }
 
+/* Global * uses 1.9em line-height; without this, every node inside #controller
+   (including svg) keeps a tall line box and the bar grows + content rides high. */
+#controller * {
+  line-height: 1;
+}
+
 #controller:hover #controls,
 #controller:focus-within #controls,
 :host(:hover) #controls {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 #controller {
@@ -40,8 +47,9 @@
   opacity: 0.7;
 }
 
+/* Space between speed readout and hover buttons — tweak this value (px) as you like */
 #controller:hover > .draggable {
-  margin-right: 0.8em;
+  margin-right: 5px;
 }
 
 /* Center presets: midpoint between left- and right-preset inset lines; center bar on that X. */
@@ -55,25 +63,30 @@
 
 #controls {
   display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 3px;
   white-space: nowrap;
   overflow: visible;
   max-width: none;
 }
 
-#controls > * + * {
+/* Standalone flash next to speed when N is pressed — hidden = no layout footprint */
-  margin-left: 3px;
-}
-
-/* Standalone flash indicator next to speed text — hidden by default,
-   briefly shown when nudge is toggled via N key or click */
 #nudge-flash-indicator {
   display: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
   vertical-align: middle;
   align-items: center;
   justify-content: center;
-  margin-left: 0.3em;
-  padding: 3px 6px;
-  border-radius: 5px;
   font-size: 14px;
   line-height: 14px;
   font-weight: bold;
@@ -81,8 +94,27 @@
   box-sizing: border-box;
 }
 
+/* Same 24×24 footprint as #controls button */
 #nudge-flash-indicator.visible {
   display: inline-flex;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-width: 24px;
+  max-height: 24px;
+  margin-left: 5px;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+  line-height: 0;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 /* Hide flash indicator when hovering — the one in #controls is visible instead */
@@ -100,46 +132,75 @@
 #nudge-flash-indicator[data-enabled="true"] {
   color: #fff;
   background: #4b9135;
-  border: 1px solid #6ec754;
+  border-color: #6ec754;
 }
 
 #nudge-flash-indicator[data-enabled="false"] {
   color: #fff;
   background: #943e3e;
-  border: 1px solid #c06060;
+  border-color: #c06060;
 }
 
+/* Same 24×24 chip as control buttons (Lucide check / x inside) */
 #nudge-indicator {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 3px 6px;
-  border-radius: 5px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: bold;
-  font-family: "Lucida Console", Monaco, monospace;
   box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-height: 24px;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  font-size: 0;
+  line-height: 0;
   cursor: pointer;
-  margin-bottom: 2px;
+  margin: 0;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
 #nudge-indicator[data-enabled="true"] {
   color: #fff;
   background: #4b9135;
-  border: 1px solid #6ec754;
+  border-color: #6ec754;
 }
 
 #nudge-indicator[data-enabled="false"] {
   color: #fff;
   background: #943e3e;
-  border: 1px solid #c06060;
+  border-color: #c06060;
 }
 
 #nudge-indicator[data-supported="false"] {
   opacity: 0.6;
 }
 
+#nudge-flash-indicator.visible .vsc-btn-icon,
+#nudge-indicator .vsc-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+#nudge-flash-indicator.visible .vsc-btn-icon svg,
+#nudge-indicator .vsc-btn-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  transform: translateY(0.5px);
+}
+
 #controller.dragging {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
@@ -148,12 +209,14 @@
 }
 
 #controller.dragging #controls {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 .draggable {
   cursor: -webkit-grab;
   cursor: -moz-grab;
+  vertical-align: middle;
 }
 
 .draggable:active {
@@ -175,6 +238,46 @@ button {
   margin-bottom: 2px;
 }
 
+/* Icon buttons: square targets, compact bar (no extra vertical stretch). */
+#controls button {
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-height: 24px;
+  padding: 0;
+  margin: 0;
+  border-width: 1px;
+  line-height: 0;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+button .vsc-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+button .vsc-btn-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  /* Lucide 24×24 paths sit slightly high in the viewBox */
+  transform: translateY(0.5px);
+}
+
 button:focus {
   outline: 0;
 }

ui-icons.js

@@ -0,0 +1,69 @@
+/**
+ * Inline SVG icons (Lucide-style strokes, compatible with https://lucide.dev — ISC license).
+ * Use stroke="currentColor" so buttons inherit foreground for monochrome UI.
+ */
+var VSC_ICON_SIZE_DEFAULT = 18;
+
+/** Inner SVG markup only (paths / shapes inside <svg>). */
+var vscUiIconPaths = {
+  rewind:
+    '<polygon points="11 19 2 12 11 5 11 19"/><polygon points="22 19 13 12 22 5 22 19"/>',
+  advance:
+    '<polygon points="13 19 22 12 13 5 13 19"/><polygon points="2 19 11 12 2 5 2 19"/>',
+  reset:
+    '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
+  slower: '<line x1="5" y1="12" x2="19" y2="12"/>',
+  faster:
+    '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
+  display:
+    '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
+  fast: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
+  settings:
+    '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  pause:
+    '<rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/>',
+  muted:
+    '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>',
+  mark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
+  jump:
+    '<polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/>',
+  nudge: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+  /** Lucide check — subtitle nudge on */
+  subtitleNudgeOn: '<path d="M20 6 9 17l-5-5"/>',
+  /** Lucide x — subtitle nudge off */
+  subtitleNudgeOff:
+    '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'
+};
+
+/**
+ * @param {number} [size] - width/height in px
+ * @returns {string} full <svg>…</svg>
+ */
+function vscIconSvgString(action, size) {
+  var inner = vscUiIconPaths[action];
+  if (!inner) return "";
+  var s = size != null ? size : VSC_ICON_SIZE_DEFAULT;
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+    s +
+    '" height="' +
+    s +
+    '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    inner +
+    "</svg>"
+  );
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} action
+ * @returns {HTMLElement|null} wrapper span containing svg, or null if no icon
+ */
+function vscIconWrap(doc, action, size) {
+  var html = vscIconSvgString(action, size);
+  if (!html) return null;
+  var span = doc.createElement("span");
+  span.className = "vsc-btn-icon";
+  span.innerHTML = html;
+  return span;
+}