Filter by domain - pass domain to ext in iframe (#159)

* send url iframe is mounted in to nest/extension * fix ts errors * grab tab right before use * merge cleanup --------- Co-authored-by: Kayla Fitzsimmons <[email protected]>
Mocksi · Aug 23, 2024 · e87a9df · e87a9df
1 parent dbb85c9
commit e87a9df
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -24,25 +24,33 @@ const clearAuth = async (): Promise<void> => {
   }
 };
 
-const showAuthTab = async (): Promise<void> => {
-  return new Promise((resolve) => {
-    chrome.tabs.query({}, function(tabs) {
+async function getCurrentTab() {
+  const queryOptions = { active: true, lastFocusedWindow: true };
+  // `tab` will either be a `tabs.Tab` instance or `undefined`.
+  const [tab] = await chrome.tabs.query(queryOptions);
+  return tab;
+}
+
+function showAuthTab() {
+  return new Promise((resolve: (value?: unknown) => void) => {
+    chrome.tabs.query({}, function (tabs) {
       let tabExists = false;
-      for (let tab of tabs) {
-          const loadUrl = new URL(import.meta.env.VITE_NEST_APP);
-          const tabUrl = new URL(tab.url || tab.pendingUrl);
-          if (loadUrl.href === tabUrl.href) {
-              tabExists = true;
-              break;
-          }
+      for (const tab of tabs) {
+        const tabUrlStr = tab.url || tab.pendingUrl || "";
+        const loadUrl = new URL(import.meta.env.VITE_NEST_APP);
+        const tabUrl = new URL(tabUrlStr);
+        if (loadUrl.href === tabUrl.href) {
+          tabExists = true;
+          break;
+        }
       }
       if (!tabExists) {
-          chrome.tabs.create({ url: import.meta.env.VITE_NEST_APP }, resolve);
+        chrome.tabs.create({ url: import.meta.env.VITE_NEST_APP }, resolve);
       } else {
         resolve();
       }
     });
-  })
+  });
 }
 
 addEventListener("install", () => {
@@ -84,8 +92,9 @@ chrome.runtime.onMessageExternal.addListener(
         const auth = await getAuth();
         if (auth) {
           const { accessToken, email } = auth;
+          const tab = await getCurrentTab();
           sendResponse({
-            message: { accessToken, email },
+            message: { accessToken, email, url: tab.url },
             status: "ok",
           });
         } else {
@@ -103,22 +112,25 @@ chrome.runtime.onMessageExternal.addListener(
           status: "ok",
         });
       } else {
-        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-          if (tabs[0].id) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-              data: request.data,
-              message: request.message,
-            }, (response) => {
-              sendResponse(response);
-            });
-          } else {
-            sendResponse({ message: request.message, status: "no-tab" });
-            console.log("No active tab found, could not send message");
-          }
-        });
+        const tab = await getCurrentTab();
+        if (!tab.id) {
+          sendResponse({ message: request.message, status: "no-tab" });
+          console.log("No active tab found, could not send message");
+          return;
+        }
+        chrome.tabs.sendMessage(
+          tab.id,
+          {
+            data: request.data,
+            message: request.message,
+          },
+          (response) => {
+            sendResponse(response);
+          },
+        );
       }
     })();
-    
+
     return true;
   },
 );
diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -1,5 +1,5 @@
+import { AppliedModifications, Reactor } from "@repo/reactor";
 import type { ModificationRequest } from "@repo/reactor";
-import { Reactor, AppliedModifications } from "@repo/reactor";
 import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -63,7 +63,6 @@ chrome.runtime.onMessage.addListener((request) => {
       React.useEffect(() => {
         chrome.runtime.onMessage.addListener(
           (request, _sender, sendResponse) => {
-
             // execute in async block so that we return true
             // synchronously, telling chrome to wait for the response
             (async () => {
@@ -76,12 +75,10 @@ chrome.runtime.onMessage.addListener((request) => {
               if (request.message === "NEW_EDIT") {
                 if (request.data) {
                   const { find, highlightEdits, replace } = request.data;
-                  await findReplaceAll(
-                    find,
-                    replace,
-                    highlightEdits,
+                  await findReplaceAll(find, replace, highlightEdits);
+                  data = Array.from(reactor.getAppliedModifications()).map(
+                    (mod) => mod.modificationRequest,
                   );
-                  data = Array.from(reactor.getAppliedModifications()).map((mod) => mod.modificationRequest);
                 }
               }
               if (request.message === "STOP_EDITING") {
@@ -122,7 +119,11 @@ chrome.runtime.onMessage.addListener((request) => {
                 Object.assign(iframeRef.current.style, styles);
               }
 
-              sendResponse({ data: data, message: request.message, status: "ok" });
+              sendResponse({
+                data,
+                message: request.message,
+                status: "ok",
+              });
             })();
             return true;
           },