Feature request: Browser extension "Open your Hoarder saves" #188

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"]
 }

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);

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);
+  });
+}

apps/browser-extension/tsconfig.json

@@ -6,6 +6,8 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
+    "types": ["chrome"],
+
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,