feat: integrate @webext-core/messaging for improved message handling in background and content scripts

Signed-off-by: EINDEX <snowstarlbk@gmail.com>

Author: EINDEX

package.json

@@ -37,6 +37,7 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tabler/icons-react": "^2.47.0",
+    "@webext-core/messaging": "^2.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^2.30.0",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { changeOptionsHostToHostNameAndPort } from './upgrade';
 import { getLogseqService } from './logseq/tool';
 import { SearchEngineConfigMigration } from '@/utils/migration';
 import { templates } from '@/utils/storage';
+import { onMessage, sendMessage } from '@/types/messaging';
 
 export default defineBackground({
   // Set manifest options
@@ -19,49 +20,76 @@ export default defineBackground({
   main() {
     // Executed when background is loaded, CANNOT BE ASYNC
 
-    browser.runtime.onConnect.addListener((port) => {
-      port.onMessage.addListener((msg) => {
-        if (msg.type === 'query') {
-          const promise = new Promise(async () => {
-            const logseqService = await getLogseqService();
-            const searchRes = await logseqService.search(msg.query);
-            console.debug('search result', searchRes);
-            port.postMessage(searchRes);
-          });
-
-          promise.catch((err) => console.error(err));
-        } else if (msg.type === 'open-options') {
-          browser.runtime.openOptionsPage();
-        } else {
-          console.debug(msg);
-        }
-      });
+    // Register message handlers using @webext-core/messaging
+    onMessage('logseq:search', async ({ data }) => {
+      const logseqService = await getLogseqService();
+      const searchRes = await logseqService.search(data);
+      console.debug('search result', searchRes);
+      return searchRes;
     });
 
-    browser.runtime.onMessage.addListener((msg, sender) => {
-      if (msg.type === 'open-options') {
-        browser.runtime.openOptionsPage();
-      } else if (msg.type === 'clip-with-selection') {
-        quickCapture(msg.data);
-      } else if (msg.type === 'clip-page') {
-        quickCapture('');
-      } else if (msg.type === 'open-page') {
-        openPage(msg.url);
-      } else if (msg.type === 'change-block-marker') {
-        changeBlockMarker(msg.uuid, msg.marker);
-      } else {
-        console.debug(msg);
-      }
+    onMessage('logseq:urlSearch', async ({ data }) => {
+      const logseqService = await getLogseqService();
+      const url = new URL(data.url);
+      const searchRes = await logseqService.urlSearch(url, data.options);
+      return searchRes;
+    });
+
+    onMessage('app:openOptions', async () => {
+      browser.runtime.openOptionsPage();
+    });
+
+    onMessage('logseq:clipWithSelection', async ({ data }) => {
+      await quickCapture(data);
+    });
+
+    onMessage('logseq:clipPage', async () => {
+      await quickCapture('');
+    });
+
+    onMessage('app:openPage', async ({ data }) => {
+      await openPage(data.url);
+    });
+
+    onMessage('logseq:changeBlockMarker', async ({ data }) => {
+      const result = await changeBlockMarker(data.uuid, data.marker);
+      return result;
     });
 
     const changeBlockMarker = async (uuid: string, marker: string) => {
       const tab = await getCurrentTab();
       if (!tab) {
-        return;
+        return {
+          type: 'change-block-marker-result',
+          uuid,
+          status: 'error',
+          marker,
+          msg: 'No active tab found',
+        };
       }
       const logseqService = await getLogseqService();
       const result = await logseqService.changeBlockMarker(uuid, marker);
-      browser.tabs.sendMessage(tab.id!, result);
+
+      // Send result to content script
+      await sendMessage(
+        'content:blockMarkerChanged',
+        {
+          type: 'change-block-marker-result',
+          uuid,
+          status: 'success',
+          marker,
+          msg: result.msg,
+        },
+        { tabId: tab.id! },
+      );
+
+      return {
+        type: 'change-block-marker-result',
+        uuid,
+        status: 'success',
+        marker,
+        msg: result.msg,
+      };
     };
 
     const getCurrentTab = async () => {
@@ -180,7 +208,13 @@ export default defineBackground({
     }
 
     browser.contextMenus.onClicked.addListener((info, tab) => {
-      browser.tabs.sendMessage(tab!.id!, { type: info.menuItemId }, {});
+      if (info.menuItemId === 'clip-with-selection') {
+        sendMessage('content:quickCaptureWithSelection', undefined, {
+          tabId: tab!.id!,
+        });
+      } else if (info.menuItemId === 'clip-page') {
+        sendMessage('content:quickCapturePage', undefined, { tabId: tab!.id! });
+      }
     });
 
     browser.runtime.onInstalled.addListener(async (event) => {
@@ -198,7 +232,7 @@ export default defineBackground({
 
     browser.commands.onCommand.addListener((command, tab) => {
       if (command === 'clip' && tab !== undefined) {
-        browser.tabs.sendMessage(tab.id!, { type: 'clip' });
+        sendMessage('content:quickCapture', undefined, { tabId: tab.id! });
       }
     });
 

src/entrypoints/background/index.ts

@@ -2,13 +2,14 @@ import React from 'react';
 import { LogseqSearchResult } from '@/types/logseqBlock';
 import { LogseqResponseType } from '@/entrypoints/background/logseq/client';
 import LogseqCopilot from '@/components/LogseqCopilot';
-import { browser, type Browser } from 'wxt/browser';
+import { browser } from 'wxt/browser';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { IconSettings, IconAlertCircle, IconExternalLink } from '@tabler/icons-react';
 import { ThemeProvider } from '@/components/ThemeProvider';
+import { sendMessage, onMessage } from '@/types/messaging';
 import '@/assets/globals.css';
 
 // Import theme test function for debugging
@@ -20,41 +21,45 @@ if (import.meta.env.DEV) {
 }
 
 type LogseqCopliotProps = {
-  connect: Browser.runtime.Port;
+  query: string;
 };
 
 type LoadingState = 'loading' | 'success' | 'error' | 'disconnected';
 
-const LogseqCopliotContent = ({ connect }: LogseqCopliotProps) => {
+const LogseqCopliotContent = ({ query }: LogseqCopliotProps) => {
   const [state, setState] = React.useState<LoadingState>('loading');
   const [errorMessage, setErrorMessage] = React.useState<string>('');
   const [logseqSearchResult, setLogseqSearchResult] = React.useState<LogseqSearchResult>();
 
   React.useEffect(() => {
-    const handleMessage = (resp: LogseqResponseType<LogseqSearchResult>) => {
-      if (resp.msg === 'success') {
-        setState('success');
-        setLogseqSearchResult(resp.response);
-        setErrorMessage('');
-      } else if (resp.msg === 'Loading...') {
-        setState('loading');
-        setErrorMessage('');
-      } else {
+    const performSearch = async () => {
+      setState('loading');
+      setErrorMessage('');
+
+      try {
+        const result = await sendMessage('logseq:search', query);
+
+        if (result.msg === 'success') {
+          setState('success');
+          setLogseqSearchResult(result.response);
+          setErrorMessage('');
+        } else {
+          setState('error');
+          setErrorMessage(result.msg);
+          setLogseqSearchResult(undefined);
+        }
+      } catch (err) {
         setState('error');
-        setErrorMessage(resp.msg);
+        setErrorMessage(err instanceof Error ? err.message : 'Search failed');
         setLogseqSearchResult(undefined);
       }
     };
 
-    connect.onMessage.addListener(handleMessage);
-
-    return () => {
-      connect.onMessage.removeListener(handleMessage);
-    };
-  }, [connect]);
+    performSearch();
+  }, [query]);
 
   const handleOpenOptions = () => {
-    browser.runtime.sendMessage({ type: 'open-options' });
+    sendMessage('app:openOptions');
   };
 
   const handleOpenLogseq = () => {
@@ -235,10 +240,10 @@ const LogseqCopliotContent = ({ connect }: LogseqCopliotProps) => {
   );
 };
 
-export const LogseqCopliot = ({ connect }: LogseqCopliotProps) => {
+export const LogseqCopliot = ({ query }: LogseqCopliotProps) => {
   return (
     <ThemeProvider>
-      <LogseqCopliotContent connect={connect} />
+      <LogseqCopliotContent query={query} />
     </ThemeProvider>
   );
 };