Keep icon badge up-to-date

src/@/components/BookmarkForm.tsx

@@ -16,7 +16,7 @@ import { Input } from './ui/Input.tsx';
 import { Button } from './ui/Button.tsx';
 import { TagInput } from './TagInput.tsx';
 import { Textarea } from './ui/Textarea.tsx';
-import { checkDuplicatedItem, getCurrentTabInfo } from '../lib/utils.ts';
+import { checkDuplicatedItem, getCurrentTabInfo, updateBadge } from '../lib/utils.ts';
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { getConfig, isConfigured } from '../lib/config.ts';
@@ -103,6 +103,10 @@ const BookmarkForm = () => {
       return;
     },
     onSuccess: () => {
+      // Update badge to show link is saved
+      getCurrentTabInfo().then(({ id }) => {
+        updateBadge(id);
+      });
       setTimeout(() => {
         window.close();
         // I want to show some confirmation before it's closed...
@@ -117,7 +121,8 @@ const BookmarkForm = () => {
   const { handleSubmit, control } = form;
 
   useEffect(() => {
-    getCurrentTabInfo().then(({ url, title }) => {
+    getCurrentTabInfo().then(({ id, url, title }) => {
+      updateBadge(id);
       getConfig().then((config) => {
         form.setValue('url', url ? url : '');
         form.setValue('name', title ? title : '');

src/@/lib/utils.ts

@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { getLinksFetch } from './actions/links.ts';
+import { getLinksFetch, checkLinkExists } from './actions/links.ts';
 import { getConfig } from './config.ts';
 
 export function cn(...inputs: ClassValue[]) {
@@ -12,10 +12,14 @@ export interface TabInfo {
   title: string;
 }
 
-export async function getCurrentTabInfo(): Promise<{ title: string | undefined; url: string | undefined }> {
+export async function getCurrentTabInfo(): Promise<{
+  id: number | undefined;
+  title: string | undefined;
+  url: string | undefined
+}> {
   const tabs = await getBrowser().tabs.query({ active: true, currentWindow: true });
-  const { url, title } = tabs[0];
-  return { url, title };
+  const { id, url, title } = tabs[0];
+  return { id, url, title };
 }
 
 export function getBrowser() {
@@ -57,3 +61,31 @@ export async function setStorageItem(key: string, value: string) {
 export function openOptions() {
   getBrowser().runtime.openOptionsPage();
 }
+
+export async function updateBadge(tabId: number | undefined) {
+  if (!tabId) return;
+
+  const cachedConfig = await getConfig();
+  const linkExists = await checkLinkExists(
+    cachedConfig.baseUrl,
+    cachedConfig.apiKey
+  );
+  if (linkExists) {
+    if (browser.action) {
+      browser.action.setBadgeText({ tabId, text: '✓' });
+      browser.action.setBadgeBackgroundColor({ tabId, color: '#4688F1' });
+    } else {
+      browser.browserAction.setBadgeText({ tabId, text: '✓' });
+      browser.browserAction.setBadgeBackgroundColor({
+        tabId,
+        color: '#4688F1',
+      });
+    }
+  } else {
+    if (browser.action) {
+      browser.action.setBadgeText({ tabId, text: '' });
+    } else {
+      browser.browserAction.setBadgeText({ tabId, text: '' });
+    }
+  }
+}

src/pages/Background/index.ts

@@ -1,8 +1,11 @@
-import { getBrowser, getCurrentTabInfo } from '../../@/lib/utils.ts';
+import {
+  getBrowser,
+  getCurrentTabInfo,
+  updateBadge
+} from '../../@/lib/utils.ts';
 // import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
 import { getConfig, isConfigured } from '../../@/lib/config.ts';
 import {
-  checkLinkExists,
   // deleteLinkFetch,
   // updateLinkFetch,
   postLinkFetch,
@@ -272,7 +275,7 @@ async function genericOnClick(
       }
   }
 }
-browser.runtime.onInstalled.addListener(function () {
+browser.runtime.onInstalled.addListener(async function () {
   // Create one test item for each context type.
   const contexts: ContextType[] = [
     'page',
@@ -296,32 +299,17 @@ browser.runtime.onInstalled.addListener(function () {
     title: 'Save all tabs to Linkwarden',
     contexts: ['page'],
   });
+
+  const { id: tabId } = await getCurrentTabInfo();
+  await updateBadge(tabId);
 });
 
 browser.tabs.onActivated.addListener(async ({ tabId }) => {
-  const cachedConfig = await getConfig();
-  const linkExists = await checkLinkExists(
-    cachedConfig.baseUrl,
-    cachedConfig.apiKey
-  );
-  if (linkExists) {
-    if (browser.action) {
-      browser.action.setBadgeText({ tabId, text: '✓' });
-      browser.action.setBadgeBackgroundColor({ tabId, color: '#4688F1' });
-    } else {
-      browser.browserAction.setBadgeText({ tabId, text: '✓' });
-      browser.browserAction.setBadgeBackgroundColor({
-        tabId,
-        color: '#4688F1',
-      });
-    }
-  } else {
-    if (browser.action) {
-      browser.action.setBadgeText({ tabId, text: '' });
-    } else {
-      browser.browserAction.setBadgeText({ tabId, text: '' });
-    }
-  }
+  await updateBadge(tabId);
+});
+
+browser.tabs.onUpdated.addListener(async (tabId) => {
+  await updateBadge(tabId);
 });
 
 // Omnibox implementation