Release v5.2.7

inject.js

@@ -969,8 +969,8 @@ function ensureController(node, parent) {
   }
 
   // href selects site rules; re-run on every new/usable media so margins/opacity match current URL.
-  var siteDisabled = applySiteRuleOverrides();
+  applySiteRuleOverrides();
-  if (!tc.settings.enabled || siteDisabled) {
+  if (!siteRuleUtils.isSpeederActiveForSite(tc.settings.enabled, tc.activeSiteRule)) {
     return null;
   }
   refreshAllControllerGeometry();
@@ -2016,6 +2016,7 @@ function defineVideoController() {
 
 function applySiteRuleOverrides() {
   resetSettingsFromSiteRuleBase();
+  tc.activeSiteRule = null;
 
   if (!Array.isArray(tc.settings.siteRules) || tc.settings.siteRules.length === 0) {
     return false;
@@ -2024,7 +2025,9 @@ function applySiteRuleOverrides() {
   var currentUrl = location.href;
   var matchedRule = siteRuleUtils.matchSiteRule(currentUrl, tc.settings.siteRules);
 
-  if (!matchedRule) return false;
+  if (!matchedRule) {
+    return false;
+  }
 
   tc.activeSiteRule = matchedRule;
   log(`Matched site rule: ${matchedRule.pattern}`, 4);
@@ -2104,8 +2107,10 @@ function refreshAllControllerGeometry() {
 
 /** Re-match site rules for current URL and refresh controller position/opacity on every video. */
 function reapplySiteRulesAndControllerGeometry() {
-  var siteDisabled = applySiteRuleOverrides();
+  applySiteRuleOverrides();
-  if (!tc.settings.enabled || siteDisabled) return;
+  if (!siteRuleUtils.isSpeederActiveForSite(tc.settings.enabled, tc.activeSiteRule)) {
+    return;
+  }
   refreshAllControllerGeometry();
 }
 
@@ -2453,8 +2458,10 @@ function attachNavigationListeners() {
 function initializeNow(doc, forceReinit = false) {
   if ((!forceReinit && vscInitializedDocuments.has(doc)) || !doc.body) return;
 
-  var siteDisabled = applySiteRuleOverrides();
+  applySiteRuleOverrides();
-  if (!tc.settings.enabled || siteDisabled) return;
+  if (!siteRuleUtils.isSpeederActiveForSite(tc.settings.enabled, tc.activeSiteRule)) {
+    return;
+  }
 
   if (!doc.body.classList.contains("vsc-initialized")) {
     doc.body.classList.add("vsc-initialized");

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Speeder",
   "short_name": "Speeder",
-  "version": "5.2.4",
+  "version": "5.2.7.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",

options.css

@@ -343,11 +343,40 @@ label em {
   font-weight: 500;
 }
 
+.shortcut-label em {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  font-style: normal;
+  font-weight: 400;
+}
+
 .customKey,
 .customValue {
   text-align: center;
 }
 
+/* Chevron: native menu indicator is often missing with themed controls */
+#addShortcutSelector,
+.site-add-shortcut-selector {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: var(--panel);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px 16px;
+  padding-right: 38px;
+  cursor: pointer;
+}
+
+#addShortcutSelector:disabled,
+.site-add-shortcut-selector:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
 #addShortcutSelector {
   width: min(220px, 100%);
   margin-top: 12px;
@@ -489,7 +518,7 @@ label em {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 16px;
-  align-items: center;
+  align-items: start;
   font-weight: 600;
   margin-bottom: 8px;
   cursor: pointer;
@@ -502,6 +531,11 @@ label em {
 
 .site-override-lead span {
   margin: 0;
+  font-weight: 600;
+}
+
+.site-override-lead span em {
+  font-weight: 400;
 }
 
 .site-rule-override-section .site-override-fields,
@@ -935,6 +969,10 @@ button.lucide-result-tile.lucide-picked {
   color: var(--text);
 }
 
+.site-rule-split-label span em {
+  font-weight: 400;
+}
+
 .site-rule-split-label input[type="checkbox"] {
   justify-self: end;
   margin-top: 0;
@@ -969,16 +1007,22 @@ button.lucide-result-tile.lucide-picked {
 }
 
 .site-shortcuts-container .shortcut-row {
-  grid-template-columns: minmax(0, 1fr) 110px 110px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) 110px 110px minmax(0, 1fr) 38px;
   padding: 8px 0;
   border-top: 1px solid var(--border);
 }
 
-.site-shortcuts-container .shortcut-row:first-child {
+.site-shortcuts-rows .shortcut-row:first-child {
   padding-top: 0;
   border-top: 0;
 }
 
+.site-add-shortcut-selector {
+  width: min(220px, 100%);
+  align-self: flex-start;
+  margin-top: 0;
+}
+
 .force-label {
   display: flex;
   align-items: center;
@@ -1120,7 +1164,8 @@ button.lucide-result-tile.lucide-picked {
   }
 
   .action-row button,
-  #addShortcutSelector {
+  #addShortcutSelector,
+  .site-add-shortcut-selector {
     width: 100%;
   }
 
@@ -1204,6 +1249,12 @@ button.lucide-result-tile.lucide-picked {
     background: rgba(255, 255, 255, 0.04);
   }
 
+  #addShortcutSelector,
+  .site-add-shortcut-selector {
+    background-color: var(--panel);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+
   input[type="text"]:focus,
   select:focus,
   textarea:focus {

options.html

@@ -96,7 +96,11 @@
         <section id="customs" class="settings-card">
           <div class="section-heading">
             <h3>Shortcuts</h3>
-            <p class="section-intro">Backspace clears a shortcut. Escape disables it.</p>
+            <p class="section-intro">
+              Backspace clears a key. Escape disables optional shortcuts. If a site
+              steals a shortcut, use a site rule with Override shortcuts (and
+              per-key blocking) for that URL.
+            </p>
           </div>
           <div class="shortcuts-grid">
             <div class="shortcut-row" id="display" data-action="display">
@@ -132,7 +136,10 @@
               />
             </div>
             <div class="shortcut-row" id="slower" data-action="slower">
-              <div class="shortcut-label">Decrease speed</div>
+              <div class="shortcut-label">
+                Decrease speed
+                <em>Required: Speeder needs a key for this action.</em>
+              </div>
               <input
                 class="customKey"
                 type="text"
@@ -146,7 +153,10 @@
               />
             </div>
             <div class="shortcut-row" id="faster" data-action="faster">
-              <div class="shortcut-label">Increase speed</div>
+              <div class="shortcut-label">
+                Increase speed
+                <em>Required: Speeder needs a key for this action.</em>
+              </div>
               <input
                 class="customKey"
                 type="text"
@@ -253,11 +263,22 @@
           <h4 class="defaults-sub-heading">General</h4>
 
           <div class="row row-checkbox">
-            <label for="enabled">Enable</label>
+            <label for="enabled"
+              >Enable<br />
+              <em
+                >On: site rules can block sites (blacklist). Off: only matched rules keep Speeder on (whitelist).</em
+              >
+            </label>
             <input id="enabled" type="checkbox" />
           </div>
           <div class="row row-checkbox">
-            <label for="audioBoolean">Work on audio</label>
+            <label for="audioBoolean"
+              >Work on audio<br />
+              <em
+                >Also controls plain HTML5 audio (not just video). Turn off if
+                you only want Speeder on video players.</em
+              >
+            </label>
             <input id="audioBoolean" type="checkbox" />
           </div>
 
@@ -265,7 +286,14 @@
           <h4 class="defaults-sub-heading">Playback</h4>
 
           <div class="row row-checkbox">
-            <label for="rememberSpeed">Remember playback speed</label>
+            <label for="rememberSpeed"
+              >Remember playback speed<br />
+              <em
+                >Stores speed per source so revisiting the same media can restore
+                it. Separate from &ldquo;Force last saved speed,&rdquo; which
+                fights players that reset rate.</em
+              >
+            </label>
             <input id="rememberSpeed" type="checkbox" />
           </div>
           <div class="row row-checkbox">
@@ -283,11 +311,23 @@
           <h4 class="defaults-sub-heading">Controller</h4>
 
           <div class="row row-checkbox">
-            <label for="startHidden">Hide controller by default</label>
+            <label for="startHidden"
+              >Hide controller by default<br />
+              <em
+                >Starts with the overlay hidden; use shortcuts (show/hide,
+                move) or site behavior to reveal it.</em
+              >
+            </label>
             <input id="startHidden" type="checkbox" />
           </div>
           <div class="row">
-            <label for="controllerLocation">Default controller location</label>
+            <label for="controllerLocation"
+              >Default controller location<br />
+              <em
+                >Corner or edge anchor for the hover bar. Site rules can override
+                this for specific URLs.</em
+              >
+            </label>
             <select id="controllerLocation">
               <option value="top-left">Top left</option>
               <option value="top-center">Top center</option>
@@ -300,7 +340,13 @@
             </select>
           </div>
           <div class="row">
-            <label for="controllerOpacity">Controller opacity</label>
+            <label for="controllerOpacity"
+              >Controller opacity<br />
+              <em
+                >0&ndash;1 (decimals). Lower is more transparent. Applies to the
+                in-page controller only.</em
+              >
+            </label>
             <input id="controllerOpacity" type="text" value="" />
           </div>
           <div class="row row-controller-margin">
@@ -416,11 +462,23 @@
                 </p>
               </div>
               <div class="row row-checkbox">
-                <label for="showPopupControlBar">Show popup control bar</label>
+                <label for="showPopupControlBar"
+                  >Show popup control bar<br />
+                  <em
+                    >Shows buttons in the extension popup (toolbar icon). Can be
+                    overridden per site in site rules.</em
+                  >
+                </label>
                 <input id="showPopupControlBar" type="checkbox" />
               </div>
               <div class="row row-checkbox">
-                <label for="popupMatchHoverControls">Match hover controls</label>
+                <label for="popupMatchHoverControls"
+                  >Match hover controls<br />
+                  <em
+                    >When on, the popup copies the hover bar&rsquo;s buttons and
+                    order. When off, customize the popup layout below.</em
+                  >
+                </label>
                 <input id="popupMatchHoverControls" type="checkbox" />
               </div>
               <div id="popupCbEditorWrap" class="cb-editor cb-editor-disabled">
@@ -568,19 +626,36 @@
             <div class="site-rule-body">
               <div class="site-rule-option site-rule-option-checkbox">
                 <label class="site-rule-split-label">
-                  <span>Enable Speeder on this site</span>
+                  <span
+                    >Enable Speeder on this site<br /><em
+                      >For this URL pattern only: off blocks when global Speeder
+                      is on (blacklist); on allows when global is off
+                      (whitelist)&mdash;same pairing as Defaults &rarr;
+                      Enable.</em
+                    ></span
+                  >
                   <input type="checkbox" class="site-enabled" />
                 </label>
               </div>
               <div class="site-rule-content">
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override placement for this site</span>
+                    <span
+                      >Override placement for this site<br /><em
+                        >When on, location and margin below replace general
+                        defaults for matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-placement" />
                   </label>
                   <div class="site-placement-container">
                     <div class="site-rule-option site-rule-option-field">
-                      <label>Default controller location:</label>
+                      <label
+                        >Default controller location:<br /><em
+                          >Corner or edge anchor for the hover bar. Replaces the
+                          general default for matching URLs only.</em
+                        ></label
+                      >
                       <select class="site-controllerLocation">
                         <option value="top-left">Top left</option>
                         <option value="top-center">Top center</option>
@@ -595,7 +670,8 @@
                     <div class="site-rule-option site-rule-margin-option">
                       <label
                         >Controller margin (px):<br /><em
-                          >Shifts the whole control. 0&ndash;200.</em
+                          >Shifts the whole control from its preset position (CSS
+                          margins). Top and bottom. 0&ndash;200.</em
                         ></label
                       >
                       <div class="controller-margin-inputs">
@@ -613,85 +689,163 @@
                 </div>
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override hide-by-default for this site</span>
+                    <span
+                      >Override hide-by-default for this site<br /><em
+                        >When on, the hide-by-default toggle below replaces the
+                        general default for matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-visibility" />
                   </label>
                   <div class="site-visibility-container">
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Hide controller by default:</label>
+                      <label
+                        >Hide controller by default:<br /><em
+                          >Starts with the overlay hidden; use shortcuts
+                          (show/hide, move) or site behavior to reveal it.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-startHidden" />
                     </div>
                   </div>
                 </div>
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override auto-hide for this site</span>
+                    <span
+                      >Override auto-hide for this site<br /><em
+                        >When on, hide-with-controls and timer below replace
+                        general defaults for matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-autohide" />
                   </label>
                   <div class="site-autohide-container">
                     <div class="site-rule-option site-rule-option-checkbox">
                       <label class="site-rule-split-label">
-                        <span>Hide with controls (idle-based)</span>
+                        <span
+                          >Hide with controls (idle-based)<br /><em
+                            >Fade the controller in and out with the video
+                            interface: perfect sync on YouTube, idle-based
+                            elsewhere.</em
+                          ></span
+                        >
                         <input type="checkbox" class="site-hideWithControls" />
                       </label>
                     </div>
                     <div class="site-rule-option site-rule-option-field">
-                      <label>Auto-hide timer (0.1&ndash;15s):</label>
+                      <label
+                        >Auto-hide timer (0.1&ndash;15s):<br /><em
+                          >Seconds of inactivity before hiding: 0.1&ndash;15 for
+                          non-YouTube sites.</em
+                        ></label
+                      >
                       <input type="text" class="site-hideWithControlsTimer" />
                     </div>
                   </div>
                 </div>
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override playback for this site</span>
+                    <span
+                      >Override playback for this site<br /><em
+                        >When on, remember speed / force / audio below replace
+                        general defaults for matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-playback" />
                   </label>
                   <div class="site-playback-container">
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Remember playback speed:</label>
+                      <label
+                        >Remember playback speed:<br /><em
+                          >Stores speed per source so revisiting the same media
+                          can restore it. Separate from &ldquo;Force last saved
+                          speed,&rdquo; which fights players that reset
+                          rate.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-rememberSpeed" />
                     </div>
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Force last saved speed:</label>
+                      <label
+                        >Force last saved speed:<br /><em
+                          >Useful when a video player tries to override the speed
+                          you set in Speeder.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-forceLastSavedSpeed" />
                     </div>
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Work on audio:</label>
+                      <label
+                        >Work on audio:<br /><em
+                          >Also controls plain HTML5 audio (not just video). Turn
+                          off if you only want Speeder on video players.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-audioBoolean" />
                     </div>
                   </div>
                 </div>
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override opacity for this site</span>
+                    <span
+                      >Override opacity for this site<br /><em
+                        >When on, opacity below replaces the general default for
+                        matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-opacity" />
                   </label>
                   <div class="site-opacity-container">
                     <div class="site-rule-option site-rule-option-field">
-                      <label>Controller opacity:</label>
+                      <label
+                        >Controller opacity:<br /><em
+                          >0&ndash;1 (decimals). Lower is more transparent.
+                          Applies to the in-page controller only.</em
+                        ></label
+                      >
                       <input type="text" class="site-controllerOpacity" />
                     </div>
                   </div>
                 </div>
                 <div class="site-rule-override-section">
                   <label class="site-override-lead">
-                    <span>Override subtitle nudge for this site</span>
+                    <span
+                      >Override subtitle nudge for this site<br /><em
+                        >When on, nudge options below replace general defaults for
+                        matching URLs.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-subtitleNudge" />
                   </label>
                   <div class="site-subtitleNudge-container">
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Enable subtitle nudge:</label>
+                      <label
+                        >Enable subtitle nudge:<br /><em
+                          >Makes tiny playback changes to help keep subtitles
+                          aligned.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-enableSubtitleNudge" />
                     </div>
                     <div class="site-rule-option site-rule-option-field">
-                      <label>Nudge interval (10&ndash;1000ms):</label>
+                      <label
+                        >Nudge interval (10&ndash;1000ms):<br /><em
+                          >How often to nudge: 10&ndash;1000. Smaller values are
+                          more frequent. Default: 50.</em
+                        ></label
+                      >
                       <input type="text" class="site-subtitleNudgeInterval" placeholder="50" />
                     </div>
                   </div>
                 </div>
                 <div class="site-rule-controlbar">
                   <label class="site-override-lead">
-                    <span>Override in-player control bar for this site</span>
+                    <span
+                      >Override in-player control bar for this site<br /><em
+                        >Same idea as Hover control bar: drag blocks between
+                        Active and Available for matching URLs only.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-controlbar" />
                   </label>
                   <div class="site-controlbar-container">
@@ -709,12 +863,22 @@
                 </div>
                 <div class="site-rule-controlbar">
                   <label class="site-override-lead">
-                    <span>Override extension popup for this site</span>
+                    <span
+                      >Override extension popup for this site<br /><em
+                        >Popup layout for matching URLs; mirrors the global Popup
+                        control bar when you customize it here.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-popup-controlbar" />
                   </label>
                   <div class="site-popup-controlbar-container">
                     <div class="site-rule-option site-rule-option-checkbox">
-                      <label>Show popup control bar</label>
+                      <label
+                        >Show popup control bar<br /><em
+                          >Shows buttons in the extension popup (toolbar icon).
+                          Replaces the general default for this pattern.</em
+                        ></label
+                      >
                       <input type="checkbox" class="site-showPopupControlBar" />
                     </div>
                     <div class="cb-editor">
@@ -731,10 +895,23 @@
                 </div>
                 <div class="site-rule-shortcuts">
                   <label class="site-override-lead">
-                    <span>Override shortcuts for this site</span>
+                    <span
+                      >Override shortcuts for this site<br /><em
+                        >Add shortcuts from the menu; none by default. Leave off
+                        to use global Shortcuts.</em
+                      ></span
+                    >
                     <input type="checkbox" class="override-shortcuts" />
                   </label>
-                  <div class="site-shortcuts-container"></div>
+                  <div class="site-shortcuts-container">
+                    <div class="site-shortcuts-rows"></div>
+                    <select
+                      class="site-add-shortcut-selector"
+                      aria-label="Add shortcut for this site"
+                    >
+                      <option value="">Add shortcut&hellip;</option>
+                    </select>
+                  </div>
                 </div>
               </div>
             </div>

options.js

@@ -233,7 +233,7 @@ const actionLabels = {
 };
 
 const speedBindingActions = ["slower", "faster", "fast", "softer", "louder"];
-const requiredShortcutActions = new Set(["display", "slower", "faster"]);
+const requiredShortcutActions = new Set(["slower", "faster"]);
 
 function formatSpeedBindingDisplay(action, value) {
   if (!speedBindingActions.includes(action)) {
@@ -319,6 +319,70 @@ function refreshAddShortcutSelector() {
   }
 }
 
+function refreshSiteRuleAddShortcutSelector(ruleEl) {
+  if (!ruleEl) return;
+  var selector = ruleEl.querySelector(".site-add-shortcut-selector");
+  if (!selector) return;
+
+  while (selector.options.length > 1) {
+    selector.remove(1);
+  }
+
+  var usedActions = new Set();
+  ruleEl.querySelectorAll(".site-shortcuts-rows .shortcut-row.customs").forEach(function (row) {
+    var action = row.dataset.action;
+    if (action) usedActions.add(action);
+  });
+
+  Object.keys(actionLabels).forEach(function (action) {
+    if (!usedActions.has(action)) {
+      var option = document.createElement("option");
+      option.value = action;
+      option.textContent = actionLabels[action];
+      selector.appendChild(option);
+    }
+  });
+
+  var overrideShortcutsOn =
+    ruleEl.querySelector(".override-shortcuts") &&
+    ruleEl.querySelector(".override-shortcuts").checked;
+
+  if (selector.options.length === 1) {
+    selector.disabled = true;
+    selector.options[0].text = "All shortcuts added";
+  } else {
+    selector.disabled = !overrideShortcutsOn;
+    selector.options[0].text = "Add shortcut\u2026";
+  }
+}
+
+function getGlobalBindingSnapshotForSiteShortcut(action) {
+  var row = document.querySelector(
+    '#customs .shortcut-row[data-action="' + action + '"]'
+  );
+  if (row) {
+    var keyInput = row.querySelector(".customKey");
+    var binding = normalizeStoredBinding(keyInput && keyInput.vscBinding);
+    if (binding) {
+      var valueInput = row.querySelector(".customValue");
+      var value = customActionsNoValues.includes(action)
+        ? 0
+        : Number(valueInput && valueInput.value);
+      return { binding: binding, value: value };
+    }
+  }
+  var def = tcDefaults.keyBindings.find(function (b) {
+    return b.action === action;
+  });
+  if (def) {
+    return {
+      binding: normalizeStoredBinding(def),
+      value: def.value
+    };
+  }
+  return { binding: null, value: undefined };
+}
+
 function ensureDefaultBinding(storage, action, code, value) {
   if (storage.keyBindings.some((item) => item.action === action)) return;
 
@@ -942,35 +1006,18 @@ function ensureAllDefaultBindings(storage) {
   });
 }
 
-function addSiteRuleShortcut(container, action, binding, value, force) {
+function addSiteRuleShortcut(rowsEl, action, binding, value, force) {
+  if (!rowsEl) return;
+
   var div = document.createElement("div");
   div.setAttribute("class", "shortcut-row customs");
   div.dataset.action = action;
 
   var actionLabel = document.createElement("div");
   actionLabel.className = "shortcut-label";
-  var actionLabels = {
-    display: "Show/hide controller",
-    move: "Move controller",
-    slower: "Decrease speed",
-    faster: "Increase speed",
-    rewind: "Rewind",
-    advance: "Advance",
-    reset: "Reset speed",
-    fast: "Preferred speed",
-    toggleSubtitleNudge: "Toggle subtitle nudge",
-    pause: "Play / Pause",
-    muted: "Mute / Unmute",
-    louder: "Increase volume",
-    softer: "Decrease volume",
-    mark: "Set marker",
-    jump: "Jump to marker"
-  };
   var actionLabelText = actionLabels[action] || action;
   if (action === "toggleSubtitleNudge") {
-    // Check if the site rule is for YouTube.
+    var ruleEl = rowsEl.closest(".site-rule");
-    // We look up the pattern from the site rule element this container belongs to.
-    var ruleEl = container.closest(".site-rule");
     var pattern = ruleEl ? ruleEl.querySelector(".site-pattern").value : "";
     if (!pattern.toLowerCase().includes("youtube.com")) {
       actionLabelText += " (only for YouTube embeds)";
@@ -1014,12 +1061,18 @@ function addSiteRuleShortcut(container, action, binding, value, force) {
   forceLabel.appendChild(forceCheckbox);
   forceLabel.appendChild(forceText);
 
+  var removeButton = document.createElement("button");
+  removeButton.className = "removeParent";
+  removeButton.type = "button";
+  removeButton.textContent = "\u00d7";
+
   div.appendChild(actionLabel);
   div.appendChild(keyInput);
   div.appendChild(valueInput);
   div.appendChild(forceLabel);
+  div.appendChild(removeButton);
 
-  container.appendChild(div);
+  rowsEl.appendChild(div);
 }
 
 function createSiteRule(rule) {
@@ -1157,56 +1210,24 @@ function createSiteRule(rule) {
     rule && Array.isArray(rule.shortcuts) && rule.shortcuts.length > 0
   );
   ruleEl.querySelector(".override-shortcuts").checked = hasShortcutOverride;
-  var container = ruleEl.querySelector(".site-shortcuts-container");
+  var rowsEl = ruleEl.querySelector(".site-shortcuts-rows");
   if (hasShortcutOverride) {
     rule.shortcuts.forEach((shortcut) => {
       addSiteRuleShortcut(
-        container,
+        rowsEl,
         shortcut.action,
         shortcut,
         shortcut.value,
         shortcut.force
       );
     });
-  } else {
-    populateDefaultSiteShortcuts(container);
   }
   applySiteRuleOverrideState(ruleEl, "override-shortcuts", "site-shortcuts-container");
+  refreshSiteRuleAddShortcutSelector(ruleEl);
 
   document.getElementById("siteRulesContainer").appendChild(ruleEl);
 }
 
-function populateDefaultSiteShortcuts(container) {
-  var bindings = [];
-  document.querySelectorAll("#customs .shortcut-row").forEach((row) => {
-    var action = row.dataset.action;
-    if (!action) return;
-
-    var keyInput = row.querySelector(".customKey");
-    var binding = normalizeStoredBinding(keyInput && keyInput.vscBinding);
-    if (!binding) return;
-
-    var valueInput = row.querySelector(".customValue");
-    bindings.push({
-      action: action,
-      code: binding.code,
-      disabled: binding.disabled === true,
-      value: customActionsNoValues.includes(action)
-        ? 0
-        : Number(valueInput && valueInput.value),
-      force: false
-    });
-  });
-
-  if (bindings.length === 0) {
-    bindings = tcDefaults.keyBindings.slice();
-  }
-
-  bindings.forEach((binding) => {
-    addSiteRuleShortcut(container, binding.action, binding, binding.value, false);
-  });
-}
-
 function createControlBarBlock(buttonId) {
   var def = controllerButtonDefs[buttonId];
   if (!def) return null;
@@ -1780,8 +1801,13 @@ document.addEventListener("DOMContentLoaded", function () {
 
     var removeParentButton = targetEl.closest(".removeParent");
     if (removeParentButton) {
-      removeParentButton.parentNode.remove();
+      var removedRow = removeParentButton.parentNode;
+      var siteRuleForShortcut = removedRow.closest(".site-rule");
+      removedRow.remove();
       refreshAddShortcutSelector();
+      if (siteRuleForShortcut) {
+        refreshSiteRuleAddShortcutSelector(siteRuleForShortcut);
+      }
       return;
     }
     var removeSiteRuleButton = targetEl.closest(".remove-site-rule");
@@ -1808,6 +1834,26 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     }
 
+    if (event.target.classList.contains("site-add-shortcut-selector")) {
+      var action = event.target.value;
+      if (!action) return;
+      var siteRuleRoot = event.target.closest(".site-rule");
+      var rows = siteRuleRoot && siteRuleRoot.querySelector(".site-shortcuts-rows");
+      if (rows) {
+        var snap = getGlobalBindingSnapshotForSiteShortcut(action);
+        addSiteRuleShortcut(
+          rows,
+          action,
+          snap.binding,
+          snap.value,
+          false
+        );
+        refreshSiteRuleAddShortcutSelector(siteRuleRoot);
+      }
+      event.target.value = "";
+      return;
+    }
+
     // Site rule: show/hide optional override sections
     var siteOverrideContainers = {
       "override-placement": "site-placement-container",
@@ -1829,6 +1875,9 @@ document.addEventListener("DOMContentLoaded", function () {
         if (targetBox) {
           setSiteOverrideContainerState(targetBox, event.target.checked);
         }
+        if (ocb === "override-shortcuts") {
+          refreshSiteRuleAddShortcutSelector(siteRuleRoot);
+        }
         return;
       }
     }

popup.css

@@ -210,21 +210,63 @@ button:focus-visible {
 
 .donate-split {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.donate-split button {
+.donate-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 6px 4px;
+  background: var(--panel);
+  border: 1px solid var(--border-strong);
+  color: var(--text);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.donate-icon-btn:hover {
+  background: #f8f9fb;
+  border-color: #c5ccd5;
+}
+
+.donate-icon-btn:active {
+  background: #f1f3f5;
+}
+
+.donate-icon-btn:focus-visible {
+  outline: 2px solid rgba(17, 24, 39, 0.14);
+  outline-offset: 2px;
+  position: relative;
+  z-index: 1;
+}
+
+.donate-icon-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.donate-icon-btn--kofi img {
+  display: block;
+  height: 22px;
   width: auto;
-  border-radius: 0;
+  max-width: 40px;
-  min-height: 28px;
+  object-fit: contain;
 }
 
-.donate-split button:first-child {
+.donate-icon-btn:first-child {
   border-radius: 8px 0 0 8px;
-  border-right: 0;
+  border-right-width: 0;
 }
 
-.donate-split button:last-child {
+.donate-icon-btn:nth-child(2) {
+  border-radius: 0;
+  border-right-width: 0;
+}
+
+.donate-icon-btn:last-child {
   border-radius: 0 8px 8px 0;
 }
 
@@ -266,4 +308,13 @@ button:focus-visible {
     background: #dfe3e8;
     border-color: #dfe3e8;
   }
+
+  .donate-icon-btn:hover {
+    background: #1f2226;
+    border-color: #4a515a;
+  }
+
+  .donate-icon-btn:active {
+    background: #252a2f;
+  }
 }

popup.html

@@ -35,8 +35,67 @@
         <div id="donateWrap" class="donate-wrap">
           <button id="donate" class="secondary">Donate</button>
           <div id="donateOptions" class="donate-split hide">
-            <button id="donateKofi" class="secondary">Ko-fi</button>
+            <a
-            <button id="donateGithub" class="secondary">Sponsors</button>
+              id="donateGithub"
+              class="donate-icon-btn donate-icon-btn--github"
+              href="https://github.com/sponsors/SoPat712"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Sponsor on GitHub (opens in new tab)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="22"
+                height="22"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+            </a>
+            <a
+              id="donateKofi"
+              class="donate-icon-btn donate-icon-btn--kofi"
+              href="https://ko-fi.com/joshpatra"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Support on Ko-fi (opens in new tab)"
+            >
+              <img
+                src="images/kofi_symbol.svg"
+                width="28"
+                height="22"
+                alt=""
+                decoding="async"
+              />
+            </a>
+            <a
+              id="donateBmc"
+              class="donate-icon-btn donate-icon-btn--bmc"
+              href="https://buymeacoffee.com/treeman183"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Support on Buy Me a Coffee (opens in new tab)"
+            >
+              <svg
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="22"
+                height="22"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  fill="currentColor"
+                  d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"
+                />
+              </svg>
+            </a>
           </div>
         </div>
       </div>

popup.js

@@ -230,14 +230,6 @@ document.addEventListener("DOMContentLoaded", function () {
     document.querySelector("#donateOptions").classList.remove("hide");
   });
 
-  document.querySelector("#donateKofi").addEventListener("click", function () {
-    window.open("https://ko-fi.com/joshpatra");
-  });
-
-  document.querySelector("#donateGithub").addEventListener("click", function () {
-    window.open("https://github.com/sponsors/SoPat712");
-  });
-
   document.querySelector("#enable").addEventListener("click", function () {
     toggleEnabled(true, settingsSavedReloadMessage);
   });
@@ -279,7 +271,10 @@ document.addEventListener("DOMContentLoaded", function () {
         var url = context && context.url ? context.url : "";
         var siteRule = matchSiteRule(url, storage.siteRules);
         var siteDisabled = isSiteRuleDisabled(siteRule);
-        var siteAvailable = storage.enabled !== false && !siteDisabled;
+        var siteAvailable = siteRuleUtils.isSpeederActiveForSite(
+          storage.enabled,
+          siteRule
+        );
         var showBar = storage.showPopupControlBar !== false;
 
         if (siteRule && siteRule.showPopupControlBar !== undefined) {

shared/site-rules.js

@@ -60,10 +60,28 @@
     );
   }
 
+  /**
+   * Whether Speeder should run on this URL given global enabled and the matched rule (if any).
+   * - No rule: follows global (enabled unless explicitly false).
+   * - Rule with site "off" / disableExtension: always inactive (blacklist).
+   * - Rule with site "on": active even when global is off (whitelist).
+   */
+  function isSpeederActiveForSite(globalEnabled, siteRule) {
+    var globalOn = globalEnabled !== false;
+    if (!siteRule) {
+      return globalOn;
+    }
+    if (isSiteRuleDisabled(siteRule)) {
+      return false;
+    }
+    return true;
+  }
+
   return {
     compileSiteRulePattern: compileSiteRulePattern,
     escapeStringRegExp: escapeStringRegExp,
     isSiteRuleDisabled: isSiteRuleDisabled,
+    isSpeederActiveForSite: isSpeederActiveForSite,
     matchSiteRule: matchSiteRule
   };
 });

tests/inject.test.js

@@ -51,6 +51,28 @@ async function bootInject({ sync = {}, local = {} } = {}) {
 }
 
 describe("inject runtime", () => {
+  it("treats a matching site rule with site enabled as active when global enable is off", async () => {
+    await bootInject({
+      sync: {
+        enabled: false,
+        siteRules: [{ pattern: "example.org", enabled: true }]
+      }
+    });
+
+    expect(window.tc.settings.enabled).toBe(false);
+    window.captureSiteRuleBase();
+    window.applySiteRuleOverrides();
+    expect(window.tc.activeSiteRule).toEqual(
+      expect.objectContaining({ pattern: "example.org", enabled: true })
+    );
+    expect(
+      window.SpeederShared.siteRules.isSpeederActiveForSite(
+        window.tc.settings.enabled,
+        window.tc.activeSiteRule
+      )
+    ).toBe(true);
+  });
+
   it("keeps subtitle nudge disabled when the effective setting is off", async () => {
     await bootInject({
       sync: {

tests/options.integration.test.js

@@ -96,6 +96,32 @@ describe("options page", () => {
     expect(toggle.getAttribute("aria-label")).toBe("Collapse site rule");
   });
 
+  it("site rule shortcut override shows no rows by default and adds via selector", async () => {
+    await setupOptions({ sync: { siteRules: [] } });
+
+    globalThis.createSiteRule({ pattern: "example.com" });
+    const rule = document.getElementById("siteRulesContainer").lastElementChild;
+    const rows = rule.querySelector(".site-shortcuts-rows");
+    const selector = rule.querySelector(".site-add-shortcut-selector");
+
+    expect(rows.querySelectorAll(".shortcut-row").length).toBe(0);
+    expect(selector).not.toBeNull();
+    expect(selector.disabled).toBe(true);
+
+    rule.querySelector(".override-shortcuts").checked = true;
+    rule.querySelector(".override-shortcuts").dispatchEvent(
+      new Event("change", { bubbles: true })
+    );
+
+    expect(selector.disabled).toBe(false);
+    expect(selector.options.length).toBeGreaterThan(1);
+
+    selector.value = "pause";
+    selector.dispatchEvent(new Event("change", { bubbles: true }));
+
+    expect(rows.querySelectorAll('.shortcut-row[data-action="pause"]').length).toBe(1);
+  });
+
   it("keeps site override settings visible but disabled until enabled", async () => {
     await setupOptions({ sync: { siteRules: [] } });
 

tests/popup.integration.test.js

@@ -36,6 +36,22 @@ describe("popup UI", () => {
     ).toBeGreaterThan(0);
   });
 
+  it("shows controls when globally disabled but a whitelist site rule matches", async () => {
+    await setupPopup({
+      sync: {
+        enabled: false,
+        siteRules: [{ pattern: "example.com", enabled: true }]
+      }
+    });
+
+    expect(document.getElementById("status").classList.contains("hide")).toBe(
+      true
+    );
+    expect(document.getElementById("popupControlBar").style.display).not.toBe(
+      "none"
+    );
+  });
+
   it("shows disabled state for a matching site rule", async () => {
     await setupPopup({
       sync: {

tests/shared.test.js

@@ -24,6 +24,20 @@ describe("shared helpers", () => {
     expect(siteRules.isSiteRuleDisabled({ enabled: false })).toBe(true);
   });
 
+  it("combines global enabled with matched site rules (whitelist / blacklist)", () => {
+    const allowSite = { pattern: "good.test", enabled: true };
+    const blockSite = { pattern: "bad.test", enabled: false };
+
+    expect(siteRules.isSpeederActiveForSite(true, null)).toBe(true);
+    expect(siteRules.isSpeederActiveForSite(false, null)).toBe(false);
+
+    expect(siteRules.isSpeederActiveForSite(true, blockSite)).toBe(false);
+    expect(siteRules.isSpeederActiveForSite(false, blockSite)).toBe(false);
+
+    expect(siteRules.isSpeederActiveForSite(true, allowSite)).toBe(true);
+    expect(siteRules.isSpeederActiveForSite(false, allowSite)).toBe(true);
+  });
+
   it("sanitizes and resolves popup button orders", () => {
     const controllerButtonDefs = {
       rewind: {},