Added icons

src/background.ts

@@ -11,10 +11,7 @@ function startUp() {
     if (data.mode && typeof data.mode === "object") {
       currentModeIndex = (data.mode as Mode).index
     }
-    void chrome.action.setBadgeText({ text: MODES[currentModeIndex].text })
-    void chrome.action.setBadgeBackgroundColor({
-      color: MODES[currentModeIndex].color,
-    })
+    void chrome.action.setIcon({ path: MODES[currentModeIndex].icon })
   })
 }
 

src/constants.ts

@@ -3,6 +3,7 @@ export interface Mode {
   id: string
   text: string
   color: string
+  icon: string
 }
 
 export interface Message {
@@ -24,12 +25,14 @@ export const MODES: Mode[] = [
     id: "off",
     text: "off",
     color: "#AAAAAA",
+    icon: "blurry_gray_16.png",
   },
   {
     index: 1,
     id: "on",
     text: "blur",
     color: "#008C20",
+    icon: "blurry_green_16.png",
   },
 ]
 

src/popup.ts

@@ -8,8 +8,7 @@ chrome.storage.sync.get(null, (data) => {
   const config = data as StoredConfig
   checkbox.checked = !(config.mode?.id === "off")
   const mode = config.mode ?? MODES[1]
-  void chrome.action.setBadgeText({ text: mode.text })
-  void chrome.action.setBadgeBackgroundColor({ color: mode.color })
+  void chrome.action.setIcon({ path: mode.icon })
   const literals: string[] = config.literals ?? []
 
   // Loop over NUMBER_OF_LITERALS elements and listen to each one.
@@ -57,8 +56,7 @@ checkbox.addEventListener("change", (event) => {
   if (event.target instanceof HTMLInputElement) {
     const mode = event.target.checked ? MODES[1] : MODES[0]
     void chrome.storage.sync.set({ mode: mode })
-    void chrome.action.setBadgeText({ text: mode.text })
-    void chrome.action.setBadgeBackgroundColor({ color: mode.color })
+    void chrome.action.setIcon({ path: mode.icon })
     // Send message to content script in all tabs
     chrome.tabs
       .query({})

static/manifest.json

@@ -3,6 +3,10 @@
   "name": "OpenBlur",
   "version": "0.5.0",
   "description": "Hide and blur sensitive information on any webpage. Blur your secrets such as personal emails, public IP addresses, and more.",
+  "icons": {
+    "48": "blurry_purple_48.png",
+    "128": "blurry_purple_128.png"
+  },
   "action": {
     "default_popup": "popup.html"
   },