[extension] Add context menu item in the browser extension. Fixes #155 (#278)

* Add context menu item in the browser extension #155
Added a context menu entry to add links directly to hoarder

* Formalize protocol between extension and service worker, add support for text/images beside links

* fix build

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 35 insertions, 15 deletions

diff --git a/apps/browser-extension/src/SavePage.tsx b/apps/browser-extension/src/SavePage.tsx
index c6f85b3b..06530f9d 100644
--- a/apps/browser-extension/src/SavePage.tsx
+++ b/apps/browser-extension/src/SavePage.tsx
@@ -1,7 +1,13 @@
 import { useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 
-import { BookmarkTypes } from "../../../packages/shared/types/bookmarks";
+import {
+  BookmarkTypes,
+  ZNewBookmarkRequest,
+  zNewBookmarkRequestSchema,
+} from "@hoarder/shared/types/bookmarks";
+
+import { NEW_BOOKMARK_REQUEST_KEY_NAME } from "./background/protocol";
 import Spinner from "./Spinner";
 import { api } from "./utils/trpc";
 
@@ -19,23 +25,37 @@ export default function SavePage() {
   });
 
   useEffect(() => {
+    async function getNewBookmarkRequestFromBackgroundScriptIfAny(): Promise<ZNewBookmarkRequest | null> {
+      const { [NEW_BOOKMARK_REQUEST_KEY_NAME]: req } =
+        await chrome.storage.session.get(NEW_BOOKMARK_REQUEST_KEY_NAME);
+      if (!req) {
+        return null;
+      }
+      // Delete the request immediately to avoid issues with lingering values
+      await chrome.storage.session.remove(NEW_BOOKMARK_REQUEST_KEY_NAME);
+      return zNewBookmarkRequestSchema.parse(req);
+    }
+
     async function runSave() {
-      let currentUrl;
-      const [currentTab] = await chrome.tabs.query({
-        active: true,
-        lastFocusedWindow: true,
-      });
-      if (currentTab?.url) {
-        currentUrl = currentTab.url;
-      } else {
-        setError("Couldn't find the URL of the current tab");
-        return;
+      let newBookmarkRequest =
+        await getNewBookmarkRequestFromBackgroundScriptIfAny();
+      if (!newBookmarkRequest) {
+        const [currentTab] = await chrome.tabs.query({
+          active: true,
+          lastFocusedWindow: true,
+        });
+        if (currentTab?.url) {
+          newBookmarkRequest = {
+            type: BookmarkTypes.LINK,
+            url: currentTab.url,
+          };
+        } else {
+          setError("Couldn't find the URL of the current tab");
+          return;
+        }
       }
 
-      createBookmark({
-        type: BookmarkTypes.LINK,
-        url: currentUrl,
-      });
+      createBookmark(newBookmarkRequest);
     }
     runSave();
   }, [createBookmark]);