From 7fbaa88fbca1ba24473eb1e00c0b887991fe6e1f Mon Sep 17 00:00:00 2001
From: Kayla Fitzsimmons <kayla@Kaylas-MacBook-Pro.local>
Date: Mon, 9 Sep 2024 19:08:35 -0700
Subject: [PATCH 1/2] wip pushing with errors

---
 .../src/pages/background/index.ts             | 17 ++++++++
 .../src/pages/content/mocksi-extension.tsx    | 41 +++++++++++--------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
index cce5b8b..6fbd8b0 100644
--- a/apps/mocksi-lite-next/src/pages/background/index.ts
+++ b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -8,6 +8,17 @@ let prevRequest = {
   message: "INIT",
 };
 
+let port: chrome.runtime.Port;
+
+chrome.runtime.onConnectExternal.addListener((t) => {
+  port = t;
+  console.log("port:", t);
+  t.onMessage.addListener((res) => {
+    console.log("sw recieved message:", res);
+    port.postMessage("hello from backgrounds script!");
+  });
+});
+
 const getAuth = async (): Promise<null | {
   accessToken: string;
   email: string;
@@ -83,6 +94,7 @@ addEventListener("install", () => {
 
 // when user clicks toolbar mount extension
 chrome.action.onClicked.addListener((tab) => {
+  console.log("port on icon click:", port);
   if (!tab?.id) {
     console.log("No tab found, could not mount extension");
     return;
@@ -107,6 +119,11 @@ chrome.action.onClicked.addListener((tab) => {
 
 chrome.runtime.onMessage.addListener(
   (request, _sender, sendResponse): boolean => {
+    console.log(request);
+
+    if (request === "close") {
+      port.postMessage("close!");
+    }
     sendResponse({
       data: request.data,
       message: request.message,
diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
index a488369..bda78f4 100644
--- a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
+++ b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -5,6 +5,24 @@ import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { getHighlighter } from "./highlighter";
 
+// function mountTopToolbar() {
+//   const el = document.createElement("div");
+//   el.id = "mocksi-toolbar";
+//   el.style.width = "100%";
+//   el.style.height = "50px";
+//   el.style.background = "pink";
+//   document.body.prepend(el);
+
+//   const host = document.querySelector("#mocksi-toolbar");
+//   const shadow = host?.attachShadow({ mode: "open" });
+//   const span = document.createElement("button");
+//   span.addEventListener("click", () => {
+//     chrome.runtime.sendMessage("close");
+//   });
+//   span.innerText = "close";
+//   shadow.appendChild(span);
+// }
+
 const STORAGE_CHANGE_EVENT = "MOCKSI_STORAGE_CHANGE";
 
 const div = document.createElement("div");
@@ -172,12 +190,6 @@ chrome.runtime.onMessage.addListener((request) => {
             (async () => {
               let data = null;
 
-              if (request.message === "CHAT_NEW_MESSAGE") {
-                sendResponse({
-                  message: request.message,
-                  status: "ok",
-                });
-              }
               // reactor
               if (request.message === "EDITING" || request.message === "PLAY") {
                 for (const mod of request.data.edits) {
@@ -214,19 +226,9 @@ chrome.runtime.onMessage.addListener((request) => {
                   Object.assign(iframeRef.current.style, styles);
                 }
               }
-
-              if (request.message === "CHAT") {
-                sendResponse({
-                  data: reactor.exportDOM(),
-                  message: request.message,
-                  status: "ok",
-                });
-              }
-
               if (request.message === "CHAT") {
                 reactor.attach(document, getHighlighter());
               }
-
               if (request.message === "CHAT_MESSAGE") {
                 data = reactor.exportDOM();
               }
@@ -250,6 +252,13 @@ chrome.runtime.onMessage.addListener((request) => {
 
       return (
         <div>
+          <button
+            onClick={() => {
+              chrome.runtime.sendMessage("close");
+            }}
+          >
+            Message Iframe
+          </button>
           {ReactDOM.createPortal(
             <>
               <iframe

From 89b7f0d2ec0cc83a8f18ad60387dd5cbad44d4df Mon Sep 17 00:00:00 2001
From: Kayla Fitzsimmons <kayla@Kaylas-MacBook-Pro.local>
Date: Tue, 10 Sep 2024 15:18:14 -0700
Subject: [PATCH 2/2] cleanup

---
 .../src/pages/background/index.ts             | 19 +----
 .../src/pages/content/mocksi-extension.tsx    | 84 +++++--------------
 2 files changed, 22 insertions(+), 81 deletions(-)

diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
index 6fbd8b0..484536c 100644
--- a/apps/mocksi-lite-next/src/pages/background/index.ts
+++ b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -8,17 +8,6 @@ let prevRequest = {
   message: "INIT",
 };
 
-let port: chrome.runtime.Port;
-
-chrome.runtime.onConnectExternal.addListener((t) => {
-  port = t;
-  console.log("port:", t);
-  t.onMessage.addListener((res) => {
-    console.log("sw recieved message:", res);
-    port.postMessage("hello from backgrounds script!");
-  });
-});
-
 const getAuth = async (): Promise<null | {
   accessToken: string;
   email: string;
@@ -94,7 +83,6 @@ addEventListener("install", () => {
 
 // when user clicks toolbar mount extension
 chrome.action.onClicked.addListener((tab) => {
-  console.log("port on icon click:", port);
   if (!tab?.id) {
     console.log("No tab found, could not mount extension");
     return;
@@ -119,11 +107,6 @@ chrome.action.onClicked.addListener((tab) => {
 
 chrome.runtime.onMessage.addListener(
   (request, _sender, sendResponse): boolean => {
-    console.log(request);
-
-    if (request === "close") {
-      port.postMessage("close!");
-    }
     sendResponse({
       data: request.data,
       message: request.message,
@@ -167,7 +150,7 @@ chrome.runtime.onMessageExternal.addListener(
         }
       } else {
         const tab = await getCurrentTab();
-        if (!tab.id) {
+        if (!tab?.id) {
           sendResponse({ message: request.message, status: "no-tab" });
           console.log("No active tab found, could not send message");
           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
index bda78f4..8bce402 100644
--- a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
+++ b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -5,24 +5,6 @@ import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { getHighlighter } from "./highlighter";
 
-// function mountTopToolbar() {
-//   const el = document.createElement("div");
-//   el.id = "mocksi-toolbar";
-//   el.style.width = "100%";
-//   el.style.height = "50px";
-//   el.style.background = "pink";
-//   document.body.prepend(el);
-
-//   const host = document.querySelector("#mocksi-toolbar");
-//   const shadow = host?.attachShadow({ mode: "open" });
-//   const span = document.createElement("button");
-//   span.addEventListener("click", () => {
-//     chrome.runtime.sendMessage("close");
-//   });
-//   span.innerText = "close";
-//   shadow.appendChild(span);
-// }
-
 const STORAGE_CHANGE_EVENT = "MOCKSI_STORAGE_CHANGE";
 
 const div = document.createElement("div");
@@ -103,25 +85,8 @@ function getIframeStyles(message: string): Partial<CSSStyleDeclaration> {
         display: "block",
         height: "150px",
         inset: "0px 10px auto auto",
-        width: "400px",
-      };
-    case "CHAT":
-      return {
-        bottom: "0px",
-        display: "block",
-        height: "500px",
-        left: "calc(50%-150px)",
-        right: "auto",
-        top: "auto",
         width: "300px",
       };
-    case "DEMO_ACTIVE":
-      return {
-        display: "block",
-        height: "250px",
-        inset: "88% 42% 0px",
-        width: "200px",
-      };
     case "EDITING":
     case "INIT":
     case "LIST":
@@ -214,18 +179,7 @@ chrome.runtime.onMessage.addListener((request) => {
                 reactor.detach();
               }
 
-              // Resize iframe with the new styles
-              if (iframeRef.current) {
-                if (request.data?.iframe) {
-                  // v1 iframe size / position pattern
-                  const styles = getIframeSizePosition(request.data.iframe);
-                  Object.assign(iframeRef.current.style, styles);
-                } else {
-                  // v0+
-                  const styles = getIframeStyles(request.message);
-                  Object.assign(iframeRef.current.style, styles);
-                }
-              }
+              // chat actions
               if (request.message === "CHAT") {
                 reactor.attach(document, getHighlighter());
               }
@@ -239,6 +193,18 @@ chrome.runtime.onMessage.addListener((request) => {
                 );
               }
 
+              // Resize iframe with the new styles
+              if (iframeRef.current) {
+                if (request.data?.iframe) {
+                  // v1 iframe size / position pattern
+                  const styles = getIframeSizePosition(request.data.iframe);
+                  Object.assign(iframeRef.current.style, styles);
+                } else {
+                  // v0+
+                  const styles = getIframeStyles(request.message);
+                  Object.assign(iframeRef.current.style, styles);
+                }
+              }
               sendResponse({
                 data,
                 message: request.message,
@@ -252,34 +218,26 @@ chrome.runtime.onMessage.addListener((request) => {
 
       return (
         <div>
-          <button
-            onClick={() => {
-              chrome.runtime.sendMessage("close");
-            }}
-          >
-            Message Iframe
-          </button>
           {ReactDOM.createPortal(
             <>
               <iframe
-                loading="lazy"
                 ref={iframeRef}
                 seamless={true}
                 src={`${import.meta.env.VITE_NEST_APP}/extension`}
                 style={{
+                  backgroundColor: "transparent",
+                  border: "none",
+                  bottom: "10px",
+                  boxShadow: "none",
                   colorScheme: "light",
-                  position: "fixed",
                   display: "block",
                   height: "600px",
-                  width: "500px",
-                  top: "auto",
-                  right: "10px",
-                  bottom: "10px",
                   left: "auto",
-                  boxShadow: "none",
+                  position: "fixed",
+                  right: "10px",
+                  top: "auto",
+                  width: "500px",
                   zIndex: 99998,
-                  border: "none",
-                  backgroundColor: "transparent",
                 }}
               />
             </>,