fix: import/export

inject.js

@@ -1065,6 +1065,8 @@ chrome.storage.sync.get(tc.settings, function (storage) {
             }
           }
           sendResponse({ speed: speed });
+        } else if (request.action === "get_page_context") {
+          sendResponse({ url: location.href });
         } else if (request.action === "run_action") {
           var value = request.value;
           if (value === undefined || value === null) {
@@ -1793,7 +1795,7 @@ function applySiteRuleOverrides() {
     }
   });
 
-  if (Array.isArray(matchedRule.controllerButtons) && matchedRule.controllerButtons.length > 0) {
+  if (Array.isArray(matchedRule.controllerButtons)) {
     log(`Overriding controllerButtons for site`, 4);
     tc.settings.controllerButtons = matchedRule.controllerButtons;
   }

manifest.json

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

@@ -932,7 +932,7 @@ function createSiteRule(rule) {
     }
   });
 
-  if (rule && Array.isArray(rule.controllerButtons) && rule.controllerButtons.length > 0) {
+  if (rule && Array.isArray(rule.controllerButtons)) {
     ruleEl.querySelector(".override-controlbar").checked = true;
     var cbContainer = ruleEl.querySelector(".site-controlbar-container");
     cbContainer.style.display = "block";
@@ -943,7 +943,7 @@ function createSiteRule(rule) {
     );
   }
 
-  if (rule && Array.isArray(rule.popupControllerButtons) && rule.popupControllerButtons.length > 0) {
+  if (rule && Array.isArray(rule.popupControllerButtons)) {
     ruleEl.querySelector(".override-popup-controlbar").checked = true;
     var popupCbContainer = ruleEl.querySelector(".site-popup-controlbar-container");
     popupCbContainer.style.display = "block";
@@ -1085,9 +1085,16 @@ function getDragAfterElement(container, x, y) {
 }
 
 function initControlBarEditor() {
-  var zones = document.querySelectorAll(".cb-dropzone");
   var draggedBlock = null;
 
+  function clearControlBarDropTargets(activeZone) {
+    document.querySelectorAll(".cb-dropzone.cb-over").forEach(function (zone) {
+      if (zone !== activeZone) {
+        zone.classList.remove("cb-over");
+      }
+    });
+  }
+
   document.addEventListener("dragstart", function (e) {
     var block = e.target.closest(".cb-block");
     if (!block) return;
@@ -1104,36 +1111,40 @@ function initControlBarEditor() {
     if (!block) return;
     block.classList.remove("cb-dragging");
     draggedBlock = null;
-    zones.forEach(function (zone) {
-      zone.classList.remove("cb-over");
-    });
+    clearControlBarDropTargets(null);
   });
 
-  zones.forEach(function (zone) {
-    zone.addEventListener("dragover", function (e) {
-      e.preventDefault();
+  document.addEventListener("dragover", function (e) {
+    var zone = e.target.closest(".cb-dropzone");
+    if (!zone) {
+      clearControlBarDropTargets(null);
+      return;
+    }
+
+    e.preventDefault();
+    if (e.dataTransfer) {
       e.dataTransfer.dropEffect = "move";
-      zone.classList.add("cb-over");
+    }
+    clearControlBarDropTargets(zone);
+    zone.classList.add("cb-over");
 
-      if (!draggedBlock) return;
+    if (!draggedBlock) return;
 
-      var afterEl = getDragAfterElement(zone, e.clientX, e.clientY);
-      if (afterEl) {
-        zone.insertBefore(draggedBlock, afterEl);
-      } else {
-        zone.appendChild(draggedBlock);
-      }
-    });
+    var afterEl = getDragAfterElement(zone, e.clientX, e.clientY);
+    if (afterEl) {
+      zone.insertBefore(draggedBlock, afterEl);
+    } else {
+      zone.appendChild(draggedBlock);
+    }
+  });
 
-    zone.addEventListener("dragleave", function (e) {
-      if (zone.contains(e.relatedTarget)) return;
-      zone.classList.remove("cb-over");
-    });
-
-    zone.addEventListener("drop", function (e) {
+  document.addEventListener("drop", function (e) {
+    var zone = e.target.closest(".cb-dropzone");
+    if (zone) {
       e.preventDefault();
-      zone.classList.remove("cb-over");
-    });
+    }
+
+    clearControlBarDropTargets(null);
   });
 }
 
@@ -1223,21 +1234,17 @@ function restore_options() {
       });
     }
 
-    var controllerButtons =
-      Array.isArray(storage.controllerButtons) &&
-      storage.controllerButtons.length > 0
-        ? storage.controllerButtons
-        : tcDefaults.controllerButtons;
+    var controllerButtons = Array.isArray(storage.controllerButtons)
+      ? storage.controllerButtons
+      : tcDefaults.controllerButtons;
     populateControlBarEditor(controllerButtons);
 
     document.getElementById("popupMatchHoverControls").checked =
       storage.popupMatchHoverControls !== false;
 
-    var popupButtons =
-      Array.isArray(storage.popupControllerButtons) &&
-      storage.popupControllerButtons.length > 0
-        ? storage.popupControllerButtons
-        : tcDefaults.popupControllerButtons;
+    var popupButtons = Array.isArray(storage.popupControllerButtons)
+      ? storage.popupControllerButtons
+      : tcDefaults.popupControllerButtons;
     populatePopupControlBarEditor(popupButtons);
     updatePopupEditorDisabledState();
   });
@@ -1368,10 +1375,16 @@ document.addEventListener("DOMContentLoaded", function () {
       if (event.target.checked) {
         cbContainer.style.display = "block";
         var activeZone = cbContainer.querySelector(".site-cb-active");
-        if (activeZone && activeZone.children.length === 0) {
+        var availableZone = cbContainer.querySelector(".site-cb-available");
+        if (
+          activeZone &&
+          availableZone &&
+          activeZone.children.length === 0 &&
+          availableZone.children.length === 0
+        ) {
           populateControlBarZones(
             activeZone,
-            cbContainer.querySelector(".site-cb-available"),
+            availableZone,
             getControlBarOrder()
           );
         }
@@ -1387,10 +1400,16 @@ document.addEventListener("DOMContentLoaded", function () {
       if (event.target.checked) {
         popupCbContainer.style.display = "block";
         var popupActiveZone = popupCbContainer.querySelector(".site-popup-cb-active");
-        if (popupActiveZone && popupActiveZone.children.length === 0) {
+        var popupAvailableZone = popupCbContainer.querySelector(".site-popup-cb-available");
+        if (
+          popupActiveZone &&
+          popupAvailableZone &&
+          popupActiveZone.children.length === 0 &&
+          popupAvailableZone.children.length === 0
+        ) {
           populateControlBarZones(
             popupActiveZone,
-            popupCbContainer.querySelector(".site-popup-cb-available"),
+            popupAvailableZone,
             getPopupControlBarOrder()
           );
         }

popup.js

@@ -17,6 +17,22 @@ document.addEventListener("DOMContentLoaded", function () {
   };
 
   var defaultButtons = ["rewind", "slower", "faster", "advance", "display"];
+  var storageDefaults = {
+    enabled: true,
+    showPopupControlBar: true,
+    controllerButtons: defaultButtons,
+    popupMatchHoverControls: true,
+    popupControllerButtons: defaultButtons,
+    siteRules: [],
+    blacklist: `\
+      www.instagram.com
+      twitter.com
+      vine.co
+      imgur.com
+      teams.microsoft.com
+    `.replace(/^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm, "")
+  };
+  var renderToken = 0;
 
   function escapeStringRegExp(str) {
     const m = /[|\\{}()[\]^$+*?.]/g;
@@ -67,6 +83,35 @@ document.addEventListener("DOMContentLoaded", function () {
     return null;
   }
 
+  function isSiteRuleDisabled(rule) {
+    return Boolean(
+      rule &&
+      (rule.enabled === false || rule.disableExtension === true)
+    );
+  }
+
+  function resolvePopupButtons(storage, siteRule) {
+    if (siteRule && Array.isArray(siteRule.popupControllerButtons)) {
+      return siteRule.popupControllerButtons;
+    }
+
+    if (storage.popupMatchHoverControls) {
+      if (siteRule && Array.isArray(siteRule.controllerButtons)) {
+        return siteRule.controllerButtons;
+      }
+
+      if (Array.isArray(storage.controllerButtons)) {
+        return storage.controllerButtons;
+      }
+    }
+
+    if (Array.isArray(storage.popupControllerButtons)) {
+      return storage.popupControllerButtons;
+    }
+
+    return defaultButtons;
+  }
+
   function setControlBarVisible(visible) {
     var bar = document.getElementById("popupControlBar");
     var dividers = document.querySelectorAll(".popup-divider");
@@ -90,6 +135,37 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
+  function getActiveTabContext(callback) {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      var activeTab = tabs && tabs[0] ? tabs[0] : null;
+      if (!activeTab || !activeTab.id) {
+        if (callback) callback({ tab: null, url: "" });
+        return;
+      }
+
+      var tabUrl = typeof activeTab.url === "string" ? activeTab.url : "";
+      if (tabUrl.length > 0) {
+        if (callback) callback({ tab: activeTab, url: tabUrl });
+        return;
+      }
+
+      chrome.tabs.sendMessage(
+        activeTab.id,
+        { action: "get_page_context" },
+        function (response) {
+          if (chrome.runtime.lastError) {
+            if (callback) callback({ tab: activeTab, url: "" });
+            return;
+          }
+
+          var pageUrl =
+            response && typeof response.url === "string" ? response.url : "";
+          if (callback) callback({ tab: activeTab, url: pageUrl });
+        }
+      );
+    });
+  }
+
   function updateSpeedDisplay(speed) {
     var el = document.getElementById("popupSpeed");
     if (el) el.textContent = (speed != null ? Number(speed) : 1).toFixed(2);
@@ -193,56 +269,80 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   });
 
-  chrome.storage.sync.get(
-    {
-      enabled: true,
-      showPopupControlBar: true,
-      controllerButtons: defaultButtons,
-      popupMatchHoverControls: true,
-      popupControllerButtons: defaultButtons,
-      siteRules: [],
-      blacklist: `\
-      www.instagram.com
-      twitter.com
-      vine.co
-      imgur.com
-      teams.microsoft.com
-    `.replace(/^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm, "")
-    },
-    function (storage) {
-      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-        const url = tabs[0]?.url || "";
-        const blacklisted = isBlacklisted(url, storage.blacklist);
-        toggleEnabledUI(storage.enabled && !blacklisted);
-        if (blacklisted) {
-          setStatusMessage("Site is blacklisted.");
-        }
+  function renderForActiveTab() {
+    var currentRenderToken = ++renderToken;
 
+    chrome.storage.sync.get(storageDefaults, function (storage) {
+      if (currentRenderToken !== renderToken) return;
+
+      getActiveTabContext(function (context) {
+        if (currentRenderToken !== renderToken) return;
+
+        var url = context && context.url ? context.url : "";
         var siteRule = matchSiteRule(url, storage.siteRules);
-
-        var buttons = storage.popupMatchHoverControls
-          ? storage.controllerButtons
-          : storage.popupControllerButtons;
-
-        if (siteRule && Array.isArray(siteRule.popupControllerButtons) && siteRule.popupControllerButtons.length > 0) {
-          buttons = siteRule.popupControllerButtons;
-        }
-
-        if (!Array.isArray(buttons) || buttons.length === 0) {
-          buttons = defaultButtons;
-        }
-
-        buildControlBar(buttons);
-        querySpeed();
-
+        var blacklisted = isBlacklisted(url, storage.blacklist);
+        var siteDisabled = isSiteRuleDisabled(siteRule);
+        var siteAvailable =
+          storage.enabled !== false && !blacklisted && !siteDisabled;
         var showBar = storage.showPopupControlBar !== false;
+
         if (siteRule && siteRule.showPopupControlBar !== undefined) {
           showBar = siteRule.showPopupControlBar;
         }
-        setControlBarVisible(showBar);
+
+        toggleEnabledUI(storage.enabled !== false);
+        buildControlBar(resolvePopupButtons(storage, siteRule));
+        setControlBarVisible(siteAvailable && showBar);
+
+        if (blacklisted) {
+          setStatusMessage("Site is blacklisted.");
+          updateSpeedDisplay(1);
+          return;
+        }
+
+        if (siteDisabled) {
+          setStatusMessage("Speeder is disabled for this site.");
+          updateSpeedDisplay(1);
+          return;
+        }
+
+        clearStatusMessage();
+        if (siteAvailable) {
+          querySpeed();
+        } else {
+          updateSpeedDisplay(1);
+        }
       });
+    });
+  }
+
+  chrome.tabs.onActivated.addListener(function () {
+    renderForActiveTab();
+  });
+
+  chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+    if (!tab || tab.active !== true) return;
+    if (changeInfo.url !== undefined || changeInfo.status === "complete") {
+      renderForActiveTab();
     }
-  );
+  });
+
+  chrome.storage.onChanged.addListener(function (changes, areaName) {
+    if (areaName !== "sync") return;
+    if (
+      changes.enabled ||
+      changes.showPopupControlBar ||
+      changes.controllerButtons ||
+      changes.popupMatchHoverControls ||
+      changes.popupControllerButtons ||
+      changes.siteRules ||
+      changes.blacklist
+    ) {
+      renderForActiveTab();
+    }
+  });
+
+  renderForActiveTab();
 
   function toggleEnabled(enabled, callback) {
     chrome.storage.sync.set({ enabled: enabled }, function () {
@@ -276,4 +376,10 @@ document.addEventListener("DOMContentLoaded", function () {
     status_element.classList.toggle("hide", false);
     status_element.innerText = str;
   }
+
+  function clearStatusMessage() {
+    const status_element = document.querySelector("#status");
+    status_element.classList.toggle("hide", true);
+    status_element.innerText = "";
+  }
 });