New icon (#3)

* Added support for changing the icon depending on whether PP is enabled or disabled

* Adding new extension icon

* version bump

---------

Co-authored-by: Fernando Virdia <[email protected]>

CHANGELOG.md

@@ -1,6 +1,18 @@
 
 # Change Log
 
+## [1.0.2] - 2025-02-12
+
+### Added
+
+- Extension icon now reflects whether Privacy Pass is in use or not.
+
+### Changed
+
+- Extension icon.
+
+### Fixed
+
 ## [1.0.1] - 2025-02-11
 
 ### Added

src/background.js

@@ -3,6 +3,10 @@ import {
   time
 } from './popup/utils.js'
 
+import {
+  update_extension_icon
+} from './scripts/icon.js'
+
 import {
   DOMAIN_PORT,
   ONION_DOMAIN_PORT,

src/chrome_manifest.json

@@ -2,23 +2,19 @@
   "manifest_version": 3,
   "name": "Kagi Privacy Pass",
   "description": "Enables use of Privacy Pass to authenticate Kagi search.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "action": {
     "default_popup": "popup/popup.html",
-    "default_icon": "images/icon-64.png"
+    "default_icon": "images/icons/disabled/icon-64.png"
   },
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },
   "icons": {
-    "16": "images/icon-16.png",
-    "32": "images/icon-32.png",
-    "48": "images/icon-48.png",
-    "64": "images/icon-64.png",
-    "96": "images/icon-96.png",
-    "128": "images/icon-128.png",
-    "256": "images/icon-256.png",
-    "512": "images/icon-512.png"
+    "16": "images/icons/enabled/icon-16.png",
+    "32": "images/icons/enabled/icon-32.png",
+    "64": "images/icons/enabled/icon-64.png",
+    "128": "images/icons/enabled/icon-128.png"
   },
   "permissions": [
     "declarativeNetRequestWithHostAccess",

src/firefox_manifest.json

@@ -2,23 +2,19 @@
   "manifest_version": 3,
   "name": "Kagi Privacy Pass",
   "description": "Enables use of Privacy Pass to authenticate Kagi search.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "action": {
     "default_popup": "popup/popup.html",
-    "default_icon": "images/icon-32.png"
+    "default_icon": "images/icons/disabled/icon-64.png"
   },
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },
   "icons": {
-    "16": "images/icon-16.png",
-    "32": "images/icon-32.png",
-    "48": "images/icon-48.png",
-    "64": "images/icon-64.png",
-    "96": "images/icon-96.png",
-    "128": "images/icon-128.png",
-    "256": "images/icon-256.png",
-    "512": "images/icon-512.png"
+    "16": "images/icons/enabled/icon-16.png",
+    "32": "images/icons/enabled/icon-32.png",
+    "64": "images/icons/enabled/icon-64.png",
+    "128": "images/icons/enabled/icon-128.png"
   },
   "permissions": [
     "declarativeNetRequestWithHostAccess",

src/popup/clear.js

@@ -2,6 +2,10 @@ import {
     range
 } from '../scripts/headers.js'
 
+import {
+    update_extension_icon
+} from '../scripts/icon.js'
+
 async function clearState() {
     // clear local storage (includes status, tokens, kagi_session, etc)
     await browser.storage.local.clear();
@@ -10,6 +14,7 @@ async function clearState() {
         addRules: [],
         removeRuleIds: range(999)
     });
+    await update_extension_icon(false);
 }
 
 export {

src/popup/enable_toggle.js

@@ -1,11 +1,18 @@
+import {
+  update_extension_icon
+} from '../scripts/icon.js'
+
 const enabled_checkbox = document.querySelector("#kagipp-enabled")
 const status_message_indicator = document.querySelector("#status-message-indicator")
 
-async function update_indicator_opacity() {
+async function update_indicator_opacity(enabled) {
   if (!status_message_indicator) {
     return;
   }
-  const { enabled } = await browser.storage.local.get({ 'enabled': false })
+  if (typeof enabled === "undefined") {
+    const { _enabled } = await browser.storage.local.get({ 'enabled': false })
+    enabled = _enabled;
+  }
   if (enabled) {
     status_message_indicator.style.opacity = 1;
   } else {
@@ -19,7 +26,7 @@ async function is_enabled() {
   }
   const { enabled } = await browser.storage.local.get({ 'enabled': false })
   enabled_checkbox.checked = enabled;
-  await update_indicator_opacity();
+  await update_indicator_opacity(enabled);
 }
 
 async function set_enabled() {
@@ -30,7 +37,7 @@ async function set_enabled() {
   const enabled = enabled_checkbox.checked;
   await browser.storage.local.set({ 'enabled': enabled })
   browser.runtime.sendMessage('enabled_changed')
-  await update_indicator_opacity();
+  await update_indicator_opacity(enabled);
 }
 
 export {

src/scripts/icon.js

@@ -0,0 +1,19 @@
+async function update_extension_icon(enabled) {
+  if (typeof enabled === "undefined") {
+    const { _enabled } = await browser.storage.local.get({ 'enabled': false })
+    enabled = _enabled;
+  }
+  const path = enabled ? "enabled" : "disabled";
+  await chrome.action.setIcon({
+    path: {
+      16: `../images/icons/${path}/icon-16.png`,
+      32: `../images/icons/${path}/icon-32.png`,
+      64: `../images/icons/${path}/icon-64.png`,
+      128: `../images/icons/${path}/icon-128.png`
+    }
+  });
+}
+
+export {
+    update_extension_icon
+}

src/scripts/toggle.js

@@ -15,6 +15,10 @@ import {
     selfRemovingUnsetRefererHeadersListener
 } from './headers.js'
 
+import {
+    update_extension_icon
+} from './icon.js'
+
 import {
     VERBOSE,
     REDEMPTION_ENDPOINTS,
@@ -67,6 +71,7 @@ async function setEnabled() {
         } catch (ex) {
             await logError(`${ex}`);
             await browser.storage.local.set({ 'enabled': false })
+            await update_extension_icon(false);
             await sendPPModeStatus();
             return;
         }
@@ -93,6 +98,7 @@ async function setEnabled() {
         },
         []
     )
+    await update_extension_icon(true);
 }
 
 async function setDisabled() {
@@ -112,6 +118,7 @@ async function setDisabled() {
         { urls: ["<all_urls>"] },
         ["responseHeaders"]
     )
+    await update_extension_icon(false);
 }
 
 export {