fix: action icon now fits to currently active tab

package.json

@@ -3,7 +3,7 @@
     "description": "Replace Maps iframes with OSM",
     "author": "nobkd",
     "license": "Unlicense",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "type": "module",
     "homepage": "https://github.com/nobkd/replace-maps#readme",
     "bugs": {

public/manifest.json

@@ -2,7 +2,7 @@
     "description": "Replace Maps iframes with OSM",
     "manifest_version": 2,
     "name": "Replace Maps",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "homepage_url": "https://github.com/nobkd/replace-maps",
     "icons": {
         "48": "icons/48.png",
@@ -15,6 +15,7 @@
         }
     },
     "permissions": [
+        "tabs",
         "storage",
         "webRequest",
         "webRequestBlocking",

src/bg/action.ts

@@ -1,28 +1,14 @@
-import { runtime, browserAction, tabs, type Tabs } from 'webextension-polyfill';
-import { disabledHosts, getHostname, invertHostState } from './utils/storage';
+import { browserAction, tabs, type Tabs } from 'webextension-polyfill';
+import { getHostname, invertHostState } from './utils/storage';
+import { updateIcon } from './utils/actionIcon';
 
 browserAction.onClicked.addListener(async (tab: Tabs.Tab) => {
     if (!tab.url) return;
 
     let hostname = getHostname(tab.url);
     await invertHostState(hostname);
 
-    // TODO: having to fix that icon fits to current tab...
-    if (disabledHosts.includes(hostname)) {
-        browserAction.setIcon({
-            path: {
-                '48': runtime.getURL('/icons/48-grey.png'),
-                '96': runtime.getURL('/icons/96-grey.png'),
-            },
-        });
-    } else {
-        browserAction.setIcon({
-            path: {
-                '48': runtime.getURL('/icons/48.png'),
-                '96': runtime.getURL('/icons/96.png'),
-            },
-        });
-    }
+    updateIcon(hostname);
 
     // TODO: reload only frames (that have gmaps url), not full page
     tabs.reload(tab.id, { bypassCache: true });

src/bg/bg.ts

@@ -1,5 +1,6 @@
-import { runtime, webRequest, type WebRequest } from 'webextension-polyfill';
+import { runtime, tabs, windows, webRequest, type WebRequest } from 'webextension-polyfill';
 import { disabledHosts, getHostname } from './utils/storage';
+import { updateActiveTabIcon } from './utils/actionIcon';
 
 const patterns: string[] = [
     'http://*/maps/embed*?*',
@@ -33,3 +34,15 @@ webRequest.onBeforeRequest.addListener(
     },
     ['blocking']
 );
+
+// listen to tab URL changes
+tabs.onUpdated.addListener(updateActiveTabIcon);
+
+// listen to tab switching
+tabs.onActivated.addListener(updateActiveTabIcon);
+
+// listen for window switching
+windows.onFocusChanged.addListener(updateActiveTabIcon);
+
+// run at startup
+updateActiveTabIcon();

src/bg/utils/actionIcon.ts

@@ -0,0 +1,27 @@
+import { browserAction, tabs } from 'webextension-polyfill';
+import { disabledHosts, getHostname } from './storage';
+
+export function updateIcon(hostname: string) {
+    let disabled = disabledHosts.includes(hostname);
+
+    browserAction.setIcon({
+        path: !disabled
+            ? {
+                  48: '/icons/48.png',
+                  96: '/icons/96.png',
+              }
+            : {
+                  48: '/icons/48-grey.png',
+                  96: '/icons/96-grey.png',
+              },
+    });
+}
+
+export async function updateActiveTabIcon() {
+    let browserTabs = await tabs.query({ active: true, currentWindow: true });
+
+    let tab = browserTabs[0];
+    if (tab && tab.url) {
+        updateIcon(getHostname(tab.url));
+    }
+}