Add a badge to the extension icon that shows the number of items saved.

source/background.ts

@@ -8,7 +8,8 @@ import {
   QItem,
   QMessage,
   removeQItem,
-  saveSettings
+  saveSettings,
+  updateBadge
 } from '.';
 
 let timeoutID: number | null = null;
@@ -46,6 +47,12 @@ browser.browserAction.onClicked.addListener(async () => {
   }
 });
 
+browser.runtime.onMessage.addListener(async (request: QMessage<unknown>) => {
+  if (request.action === 'queue update badge') {
+    await updateBadge();
+  }
+});
+
 browser.runtime.onInstalled.addListener(async () => {
   const manifest = getManifest();
   const settings = await getSettings();
@@ -100,5 +107,6 @@ browser.contextMenus.onClicked.addListener(async (info, _tab) => {
     });
 
     await saveSettings(settings);
+    await updateBadge(settings);
   }
 });

source/content-scripts.ts

@@ -1,3 +1,8 @@
+import {browser} from 'webextension-polyfill-ts';
 import {initializeBackgroundMessageHandler} from '.';
 
 initializeBackgroundMessageHandler();
+
+(async () => {
+  await browser.runtime.sendMessage({action: 'queue update badge'});
+})();

source/index.ts

@@ -1,6 +1,6 @@
 import {html} from 'htm/preact';
 
-type QMessageAction = 'queue open url';
+type QMessageAction = 'queue open url' | 'queue update badge';
 
 export type QMessage<T> = {
   action: QMessageAction;

source/manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 2,
   "name": "Queue",
   "description": "A WebExtension for queueing links.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "permissions": [
     "contextMenus",
     "storage",

source/utilities/components/page-main.ts

@@ -1,5 +1,6 @@
 import {html} from 'htm/preact';
 import {useState} from 'preact/hooks';
+import {browser} from 'webextension-polyfill-ts';
 import {
   ConfirmButton,
   Link,
@@ -19,6 +20,7 @@ export function PageMain(props: MainProps): QComponent {
   const _removeQItem = async (id: number) => {
     const updated = await removeQItem(id);
     updateQueue(updated.queue);
+    await browser.runtime.sendMessage({action: 'queue update badge'});
   };
 
   const qItems: QComponent[] = queue

source/utilities/index.ts

@@ -1,5 +1,5 @@
 import {browser, Manifest} from 'webextension-polyfill-ts';
-import {QItem, QMessage} from '..';
+import {getSettings, QItem, QMessage, Settings} from '..';
 
 /**
  * Initializes the background message handler.
@@ -45,5 +45,33 @@ export function error(thing: unknown) {
   console.error('[Queue]', thing);
 }
 
+/**
+ * Updates the extension icon badge with the number of saved items. This can
+ * only be run from the background script.
+ * @param settings Optional user settings to use.
+ */
+export async function updateBadge(settings?: Settings): Promise<void> {
+  if (settings === undefined) {
+    settings = await getSettings();
+  }
+
+  let text: string | null = null;
+  if (settings.queue.length > 0) {
+    text = settings.queue.length.toString();
+  }
+
+  await Promise.all([
+    browser.browserAction.setBadgeBackgroundColor({
+      color: '#2a2041'
+    }),
+    browser.browserAction.setBadgeTextColor({
+      color: '#f2efff'
+    }),
+    browser.browserAction.setBadgeText({
+      text
+    })
+  ]);
+}
+
 export * from './components';
 export * from './settings';