feature(extension): Add a context menu to open your hoarder saves. Fixes #188 (#206)

* Feature request: Browser extension "Open your Hoarder saves" #188
Adds a context menu entry when a hoarder instance is configured and removes it again, if it is not configured anymore

* Feature request: Browser extension "Open your Hoarder saves" #188
moved storage related functions to settings.ts
fixed issues with context menu registration

* only fire callback when the settings change

---------

Co-authored-by: kamtschatka <simon.schatka@gmx.at>
Co-authored-by: MohamedBassem <me@mbassem.com>

4 files changed, 66 insertions, 1 deletions

diff --git a/apps/browser-extension/manifest.json b/apps/browser-extension/manifest.json
index 19379068..a31885fa 100644
--- a/apps/browser-extension/manifest.json
+++ b/apps/browser-extension/manifest.json
@@ -11,6 +11,9 @@
   "action": {
     "default_popup": "index.html"
   },
+  "background": {
+    "service_worker": "src/background/background.ts"
+  },
   "options_ui": {
     "page": "index.html#options",
     "open_in_tab": false
@@ -23,5 +26,5 @@
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'"
   },
-  "permissions": ["storage", "tabs"]
+  "permissions": ["storage", "tabs", "contextMenus"]
 }
diff --git a/apps/browser-extension/src/background/background.ts b/apps/browser-extension/src/background/background.ts
new file mode 100644
index 00000000..9c4604af
--- /dev/null
+++ b/apps/browser-extension/src/background/background.ts
@@ -0,0 +1,49 @@
+import {

+  getPluginSettings,

+  Settings,

+  subscribeToSettingsChanges,

+} from "../utils/settings.ts";

+

+const OPEN_HOARDER_ID = "open-hoarder";

+

+function checkSettingsState(settings: Settings) {

+  if (settings?.address) {

+    registerContextMenu();

+  } else {

+    chrome.contextMenus.remove(OPEN_HOARDER_ID);

+  }

+}

+

+/**

+ * Registers a context menu button to open a tab with the currently configured hoarder instance

+ */

+function registerContextMenu() {

+  chrome.contextMenus.create({

+    id: OPEN_HOARDER_ID,

+    title: "Open Hoarder",

+    contexts: ["action"],

+  });

+}

+

+/**

+ * Reads the current settings and opens a new tab with hoarder

+ * @param info the information about the click in the context menu

+ */

+function handleContextMenuClick(info: chrome.contextMenus.OnClickData) {

+  const { menuItemId } = info;

+  if (menuItemId === OPEN_HOARDER_ID) {

+    getPluginSettings().then((settings: Settings) => {

+      chrome.tabs.create({ url: settings.address, active: true });

+    });

+  }

+}

+

+getPluginSettings().then((settings: Settings) => {

+  checkSettingsState(settings);

+});

+

+subscribeToSettingsChanges((settings) => {

+  checkSettingsState(settings);

+});

+

+chrome.contextMenus.onClicked.addListener(handleContextMenuClick);

diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index ef290555..76ff0f61 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -21,3 +21,14 @@ export default function usePluginSettings() {
 export async function getPluginSettings() {
   return (await chrome.storage.sync.get("settings")).settings as Settings;
 }
+
+export function subscribeToSettingsChanges(
+  callback: (settings: Settings) => void,
+) {
+  chrome.storage.sync.onChanged.addListener((changes) => {
+    if (changes.settings === undefined) {
+      return;
+    }
+    callback(changes.settings.newValue as Settings);
+  });
+}
diff --git a/apps/browser-extension/tsconfig.json b/apps/browser-extension/tsconfig.json
index d1cd8091..f77e7f00 100644
--- a/apps/browser-extension/tsconfig.json
+++ b/apps/browser-extension/tsconfig.json
@@ -6,6 +6,8 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
+    "types": ["chrome"],
+
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,