Merge pull request #34 from netjeff/main

Minor improvements to README.md
2026-04-23 05:12:37 -04:00 · 2026-04-21 10:30:27 -04:00 · 2026-04-16 10:43:57 -06:00 · 2026-04-12 14:17:56 -04:00 · 2026-04-12 14:15:56 -04:00
14 changed files with 624 additions and 133 deletions
@@ -1,8 +1,8 @@
-# Available for Firefox  
+# Available for Firefox
+
 [![Add to Firefox](https://img.shields.io/badge/Add%20to-Firefox-orange?logo=firefox&logoColor=white)](https://addons.mozilla.org/firefox/addon/speeder/)

-
-# The science of accelerated playback
+## The science of accelerated playback

 **TL;DR: faster playback translates to better engagement and retention.**

@@ -33,9 +33,11 @@ last point to listen to it a few more times.

 ![Player](https://cloud.githubusercontent.com/assets/2400185/24076745/5723e6ae-0c41-11e7-820c-1d8e814a2888.png)

-#### *Install [Chrome](https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk) or [Firefox](https://addons.mozilla.org/en-us/firefox/addon/speeder/) Extension*
+## Using the extension

-\*\* Once the extension is installed simply navigate to any page that offers
+[![Add to Firefox](https://img.shields.io/badge/Add%20to-Firefox-orange?logo=firefox&logoColor=white)](https://addons.mozilla.org/firefox/addon/speeder/)
+
+Once the extension is installed simply navigate to any page that offers
 HTML5 video ([example](https://www.youtube.com/watch?v=E9FxNzv1Tr8)), and you'll
 see a speed indicator in top left corner. Hover over the indicator to reveal the
 controls to accelerate, slowdown, and quickly rewind or advance the video. Or,
@@ -65,21 +67,25 @@ listens both for lower and upper case values (i.e. you can use
 key. This is not a perfect solution, as some sites may listen to both, but works
 most of the time.

-### FAQ
+## FAQ

-**The video controls are not showing up?** This extension is only compatible
+### The video controls are not showing up?
+
+This extension is only compatible
 with HTML5 video. If you don't see the controls showing up, chances are you are
 viewing a Flash video. If you want to confirm, try right-clicking on the video
 and inspect the menu: if it mentions flash, then that's the issue. That said,
 most sites will fallback to HTML5 if they detect that Flash is not available.
 You can try manually disabling Flash from the browser.

-**What is this fork all about?** This is a fork of 
-[CodeBicycle's Video Speed Controller extension for Firefox](https://github.com/codebicycle/videospeed) 
+### What is this fork all about?
+
+This is a fork of
+[CodeBicycle's Video Speed Controller extension for Firefox](https://github.com/codebicycle/videospeed)
 which is a fork of [Igrigorik's Video Speed Controller extension for Chromium](https://github.com/igrigorik/videospeed).

 The goal of this fork is fix bugs in the upstream code as well as add new features.

-### License
+## License

 (GPLv3) - Copyright (c) 2025 Josh Patra
@@ -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();
-  if (!tc.settings.enabled || siteDisabled) {
+  applySiteRuleOverrides();
+  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();
-  if (!tc.settings.enabled || siteDisabled) return;
+  applySiteRuleOverrides();
+  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();
-  if (!tc.settings.enabled || siteDisabled) return;
+  applySiteRuleOverrides();
+  if (!siteRuleUtils.isSpeederActiveForSite(tc.settings.enabled, tc.activeSiteRule)) {
+    return;
+  }

  if (!doc.body.classList.contains("vsc-initialized")) {
    doc.body.classList.add("vsc-initialized");
@@ -1,7 +1,7 @@
 {
  "name": "Speeder",
  "short_name": "Speeder",
-  "version": "5.2.4",
+  "version": "5.2.8",
  "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",
@@ -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 {
@@ -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>
@@ -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.
-    // We look up the pattern from the site rule element this container belongs to.
-    var ruleEl = container.closest(".site-rule");
+    var ruleEl = rowsEl.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;
      }
    }
@@ -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;
-  min-height: 28px;
+  max-width: 40px;
+  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;
+  }
 }
@@ -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>
-            <button id="donateGithub" class="secondary">Sponsors</button>
+            <a
+              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>
@@ -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) {
@@ -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
  };
 });
@@ -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: {
@@ -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: [] } });

@@ -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: {
@@ -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: {},
Author	SHA1	Message	Date
joshpatra	7e1678ec4b	Merge pull request #34 from netjeff/main Minor improvements to README.md	2026-04-21 10:30:27 -04:00
netjeff	113c3b2896	Minor improvements to README.md Delete chrome store link to original upstream Video Speed Controller by igrigorik. Also some minor formatting improvements.	2026-04-16 10:43:57 -06:00
joshpatra	d6f9a03946	Release v5.2.8	2026-04-12 14:17:56 -04:00
joshpatra	014e05998d	Release v5.2.7	2026-04-12 14:15:56 -04:00