Add a star badge for already bookmarked websites

src/background.js

@@ -1,4 +1,4 @@
-import { getBrowser, getCurrentTabInfo } from "./browser";
+import { getBrowser, getCurrentTabInfo, showBadge, removeBadge } from "./browser";
 import { loadTabMetadata } from "./cache";
 import { getConfiguration, isConfigurationComplete } from "./configuration";
 import { LinkdingApi } from "./linkding";
@@ -25,6 +25,16 @@ async function initApi() {
   return api !== null;
 }
 
+/* Dynamic badge */
+async function setDynamicBadge(tabId, tabMetadata) {
+  // Set badge if tab is bookmarked
+  if (tabMetadata?.bookmark) {
+    showBadge(tabId);
+  } else {
+    removeBadge(tabId);
+  }
+}
+
 /* Omnibox / Search integration */
 
 browser.omnibox.onInputStarted.addListener(async () => {
@@ -90,9 +100,10 @@ browser.omnibox.onInputEntered.addListener(async (content, disposition) => {
 
 /* Precache bookmark / website metadata when tab or URL changes */
 
-browser.tabs.onActivated.addListener(async () => {
+browser.tabs.onActivated.addListener(async (activeInfo) => {
   const tabInfo = await getCurrentTabInfo();
-  await loadTabMetadata(tabInfo.url, true);
+  let tabMetadata = await loadTabMetadata(tabInfo.url, true);
+  setDynamicBadge(activeInfo.tabId, tabMetadata);
 });
 
 browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
@@ -102,5 +113,6 @@ browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
     return;
   }
 
-  await loadTabMetadata(tab.url, true);
+  let tabMetadata = await loadTabMetadata(tab.url, true);
+  setDynamicBadge(tabId, tabMetadata);
 });

src/browser.js

@@ -7,6 +7,7 @@ export async function getCurrentTabInfo() {
   const tab = tabs && tabs[0];
 
   return {
+    id: tab ? tab.id : "",
     url: tab ? tab.url : "",
     title: tab ? tab.title : ""
   };
@@ -37,4 +38,18 @@ export function setStorageItem(key, value) {
 export function openOptions() {
   getBrowser().runtime.openOptionsPage();
   window.close();
+}
+
+export function showBadge(tabId) {
+  const browser = getBrowser();
+  const action = browser.browserAction || browser.action;
+  action.setBadgeText({ text: "★", tabId: tabId });
+  action.setBadgeTextColor({ color: "#FFE234", tabId: tabId });
+  action.setBadgeBackgroundColor({ color: "rgba(100,100,100,1)", tabId: tabId });
+}
+
+export function removeBadge(tabId) {
+  const browser = getBrowser();
+  const action = browser.browserAction || browser.action;
+  action.setBadgeText({ text: "", tabId: tabId });
 }

src/cache.js

@@ -5,6 +5,9 @@ import { LinkdingApi } from "./linkding";
 const TAB_METADATA_CACHE_KEY = "ld_tab_metadata_cache";
 
 export async function loadTabMetadata(url, precacheRequest = false) {
+  // the function should be called with precacheRequest = true
+  // anytime before the user has conciously decided to bookmark it.
+  // see https://github.com/sissbruecker/linkding-extension/issues/36
   const configuration = await getConfiguration();
   const hasCompleteConfiguration = isConfigurationComplete(configuration);
 

src/form.svelte

@@ -1,8 +1,9 @@
 <script>
   import TagAutocomplete from './TagAutocomplete.svelte'
-  import {getCurrentTabInfo, openOptions} from "./browser";
+  import {getCurrentTabInfo, openOptions, showBadge} from "./browser";
   import {loadTabMetadata, clearCachedTabMetadata} from "./cache";
   import {getProfile, updateProfile} from "./profile";
+  import {getConfiguration} from "./configuration";
 
   export let api;
   export let configuration;
@@ -22,6 +23,8 @@
   let bookmarkExists = false;
   let editNotes = false;
   let profile = null;
+  let tabInfo = null;
+  let extensionConfiguration = null;
 
   $: {
     if (api && configuration) {
@@ -45,10 +48,11 @@
 
     // Initialize bookmark form
     await initForm();
+    extensionConfiguration = await getConfiguration();
   }
 
   async function initForm() {
-    const tabInfo = await getCurrentTabInfo();
+    tabInfo = await getCurrentTabInfo();
     url = tabInfo.url;
 
     const tabMetadata = await loadTabMetadata(url);
@@ -88,6 +92,12 @@
       await api.saveBookmark(bookmark);
       await clearCachedTabMetadata();
       saveState = "success";
+      // Show star badge on the tab to indicate that it's now bookmarked
+      // but only if precaching is enabled, since the badge will never
+      // show when browsing without precaching
+      if (extensionConfiguration?.precacheEnabled) {
+        showBadge(tabInfo.id);
+      }
     } catch (e) {
       saveState = "error";
       errorMessage = e.toString();

src/options.svelte

@@ -78,6 +78,11 @@
       bookmark popup. Otherwise the page title and description will be fetched after opening popup, which can take a
       moment for them to show up.
       <br>
+      <br>
+      Enabling this will also enable the extension to show a starred linkding logo if the website
+      in question is already bookmarked.
+      <br>
+      <br>
       <strong>Note:</strong> This will send the URL of all websites that you visit to your Linkding server, which will
       also be stored in the server logs.
     </div>