fix: using background js to open popup link #11

EINDEX · EINDEX · commit 70acd5eacb76 · 2023-03-30T21:38:51.000+08:00
Signed-off-by: EINDEX &lt;snowstarlbk@gmail.com&gt;
diff --git a/src/components/LogseqBlock.tsx b/src/components/LogseqBlock.tsx
@@ -12,12 +12,7 @@ type LogseqBlockProps = {
 export const LogseqBlock = ({
   graph,
   block,
-  isPopUp = false,
 }: LogseqBlockProps) => {
-  const click = (e: any) => {
-    if (isPopUp) setTimeout(window.close, 10);
-  };
-
   if (block.html) {
     return (
       <div className={`${styles.block}`}>
@@ -29,13 +24,11 @@ export const LogseqBlock = ({
           <a
             className={styles.toBlock}
             href={`logseq://graph/${graph}?block-id=${block.uuid}`}
-            onClick={click}
           >
             <span className={'tie tie-block'}></span>
             To block
           </a>
           <LogseqPageLink
-            isPopUp={isPopUp}
             graph={graph}
             page={block.page}
           ></LogseqPageLink>
diff --git a/src/components/LogseqPage.tsx b/src/components/LogseqPage.tsx
@@ -11,11 +11,7 @@ type LogseqPageLinkProps = {
 const LogseqPageLink = ({
   page,
   graph,
-  isPopUp = false,
 }: LogseqPageLinkProps) => {
-  const click = (e: any) => {
-    if (isPopUp) setTimeout(window.close, 10);
-  };
 
   if (page === undefined || page?.name === undefined) {
     return <></>;
@@ -25,7 +21,6 @@ const LogseqPageLink = ({
       <a
         className={styles.logseqPageLink}
         href={`logseq://graph/${graph}?page=${page?.name}`}
-        onClick={click}
       >
         <span className="tie tie-page"></span>
         {page?.name}
diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
@@ -3,7 +3,7 @@ import Browser from 'webextension-polyfill';
 import { getLogseqCopliotConfig } from '../../config';
 import { removeUrlHash } from '@/utils';
 import { setExtensionBadge } from './utils';
-import { debounce } from 'lodash';
+import { debounce, delay } from 'lodash';
 
 const logseqClient = new LogseqClient();
 
@@ -20,12 +20,24 @@ Browser.runtime.onConnect.addListener((port) => {
       Browser.runtime.openOptionsPage();
     } else if (msg.type === 'quick-capture') {
       quickCapture(msg.data);
+    } else if (msg.type === 'open-page') {
+      openPage(msg.url);
     } else {
       console.debug(msg);
     }
   });
 });
 
+const openPage = async (url: string) => {
+  await delay(() => {}, 50); // delay 50 to back the active tab.
+
+  const tab = await Browser.tabs.query({ active: true, currentWindow: true });
+  if (!tab) return;
+  const activeTab = tab[0];
+  if (activeTab.url !== url)
+    await Browser.tabs.update(activeTab.id, { url: url });
+};
+
 const quickCapture = async (data: string) => {
   const tab = await Browser.tabs.query({ active: true, currentWindow: true });
   if (!tab) return;
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -10,6 +10,8 @@ import { LogseqBlock } from '@components/LogseqBlock';
 
 import styles from './index.module.scss';
 
+const connect = Browser.runtime.connect();
+
 const client = new LogseqClient();
 
 export default function Popup() {
@@ -30,6 +32,17 @@ export default function Popup() {
       const result = await client.blockSearch(url);
       if (result.status !== 200) return;
       setLogseqSearchResult(result.response!);
+      setTimeout(() => {
+        document.querySelectorAll('a').forEach((e) => {
+          e.onclick = () => {
+            connect.postMessage({
+              type: 'open-page',
+              url: e.href,
+            });
+            window.close();
+          };
+        });
+      }, 100);
     });
   });
 
diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Popups</title>
     <link rel="stylesheet" href="popup.css">
-    
   </head>
 
   <body>
