fix: improve disabled icon handling

drodil · Mar 10, 2025 · 2fb2887 · 2fb2887
1 parent f4a4f9a
commit 2fb2887
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 51 deletions.
diff --git a/manifests/chrome.json b/manifests/chrome.json
@@ -2,16 +2,8 @@
   "name": "Video Auto Pause",
   "version": "1.11.1",
   "description": "Stops multiple video services on tab unfocus and continues on focus",
-  "permissions": [
-    "tabs",
-    "storage",
-    "activeTab",
-    "scripting",
-    "idle"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
+  "permissions": ["tabs", "storage", "activeTab", "scripting", "idle"],
+  "host_permissions": ["<all_urls>"],
   "homepage_url": "https://github.com/drodil/video_auto_pause",
   "options_ui": {
     "page": "options.html",
@@ -26,10 +18,10 @@
   "action": {
     "default_popup": "options.html",
     "default_icon": {
-      "16": "images/icon_16.png",
-      "32": "images/icon_32.png",
-      "64": "images/icon_64.png",
-      "128": "images/icon_128.png"
+      "16": "images/icon_disabled_16.png",
+      "32": "images/icon_disabled_32.png",
+      "64": "images/icon_disabled_64.png",
+      "128": "images/icon_disabled_128.png"
     }
   },
   "background": {

diff --git a/manifests/firefox.json b/manifests/firefox.json
@@ -2,22 +2,14 @@
   "name": "Video Auto Pause",
   "version": "1.11.1",
   "description": "Stops various video services on tab unfocus and continues on focus",
-  "permissions": [
-    "tabs",
-    "storage",
-    "activeTab",
-    "scripting",
-    "idle"
-  ],
+  "permissions": ["tabs", "storage", "activeTab", "scripting", "idle"],
   "browser_specific_settings": {
     "gecko": {
       "id": "drodil@youtube_auto_pause",
       "strict_min_version": "127.0"
     }
   },
-  "host_permissions": [
-    "<all_urls>"
-  ],
+  "host_permissions": ["<all_urls>"],
   "homepage_url": "https://github.com/drodil/video_auto_pause",
   "options_ui": {
     "page": "options.html",
@@ -32,16 +24,14 @@
   "action": {
     "default_popup": "options.html",
     "default_icon": {
-      "16": "images/icon_16.png",
-      "32": "images/icon_32.png",
-      "64": "images/icon_64.png",
-      "128": "images/icon_128.png"
+      "16": "images/icon_disabled_16.png",
+      "32": "images/icon_disabled_32.png",
+      "64": "images/icon_disabled_64.png",
+      "128": "images/icon_disabled_128.png"
     }
   },
   "background": {
-    "scripts": [
-      "vap_bs.js"
-    ]
+    "scripts": ["vap_bs.js"]
   },
   "commands": {
     "toggle-extension": {

diff --git a/src/vap_bs.js b/src/vap_bs.js
@@ -118,26 +118,33 @@ function toggle_mute(tab) {
   sendMessage(tab, { action: "toggle_mute" });
 }
 
+let iconTimeout;
 function changeIcon(disabled) {
-  if (disabled) {
-    env.action.setIcon({
-      path: {
-        16: "/images/icon_disabled_16.png",
-        32: "/images/icon_disabled_32.png",
-        64: "/images/icon_disabled_64.png",
-        128: "/images/icon_disabled_128.png",
-      },
-    });
-  } else {
-    env.action.setIcon({
-      path: {
-        16: "/images/icon_16.png",
-        32: "/images/icon_32.png",
-        64: "/images/icon_64.png",
-        128: "/images/icon_128.png",
-      },
-    });
+  if (iconTimeout) {
+    clearTimeout(iconTimeout);
   }
+
+  iconTimeout = setTimeout(() => {
+    if (disabled) {
+      env.action.setIcon({
+        path: {
+          16: "/images/icon_disabled_16.png",
+          32: "/images/icon_disabled_32.png",
+          64: "/images/icon_disabled_64.png",
+          128: "/images/icon_disabled_128.png",
+        },
+      });
+    } else {
+      env.action.setIcon({
+        path: {
+          16: "/images/icon_16.png",
+          32: "/images/icon_32.png",
+          64: "/images/icon_64.png",
+          128: "/images/icon_128.png",
+        },
+      });
+    }
+  }, 100);
 }
 
 // Listen options changes
@@ -185,6 +192,12 @@ env.tabs.onActivated.addListener(async function (info) {
   previous_tab = info.tabId;
 });
 
+env.tabs.onCreated.addListener(async function (tab) {
+  if (!tab.url) {
+    changeIcon(true);
+  }
+});
+
 // Tab update listener
 env.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
   sendMessage(tab, { action: "check" });

diff --git a/src/video_auto_pause.js b/src/video_auto_pause.js
@@ -134,6 +134,10 @@ if (window.autoPauseInjected !== true) {
     false
   );
 
+  const hasVideos = () => {
+    return document.getElementsByTagName("video").length >= 1;
+  };
+
   // Listen media commands from the service worker
   env.runtime.onMessage.addListener(async function (
     request,
@@ -146,7 +150,7 @@ if (window.autoPauseInjected !== true) {
     debugLog(`Received message: ${JSON.stringify(request)}`);
 
     const videoElements = document.getElementsByTagName("video");
-    sendMessage({ hasVideos: videoElements.length >= 1 });
+    sendMessage({ hasVideos: hasVideos() });
 
     if (document.fullscreenElement && options.disableOnFullscreen) {
       debugLog(`Document is in fullscreen mode, ignoring all commands`);
@@ -234,7 +238,7 @@ if (window.autoPauseInjected !== true) {
 
     // Start observing video elements
     let videoElements = document.getElementsByTagName("video");
-    sendMessage({ hasVideos: videoElements.length >= 1 });
+    sendMessage({ hasVideos: hasVideos() });
 
     for (let i = 0; i < videoElements.length; i++) {
       intersection_observer.observe(videoElements[i]);