only attach debugger when editing starts (#96)

* only attach debugger when editing starts * formatting
Mocksi · Jul 12, 2024 · 9eca730 · 9eca730
1 parent 096c642
commit 9eca730
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 33 deletions.
diff --git a/apps/mocksi-lite/background.ts b/apps/mocksi-lite/background.ts
@@ -59,18 +59,12 @@ addEventListener("install", () => {
 });
 
 chrome.action.onClicked.addListener((activeTab) => {
-	let { id: currentTabId } = activeTab;
-	if (currentTabId) {
-		try {
-			chrome.debugger.detach({ tabId: currentTabId });
-		} catch (e) {
-			currentTabId = -1;
-		}
-	}
+	const { id: currentTabId } = activeTab;
 
 	if (currentTabId && currentTabId < 0) {
 		return;
 	}
+
 	let activeTabUrl = "";
 	try {
 		activeTabUrl = activeTab?.url || "";
@@ -88,30 +82,9 @@ chrome.action.onClicked.addListener((activeTab) => {
 		chrome.action.enable();
 	}
 
-	const version = "1.0";
-	if (!currentTabId) {
-		return;
-	}
-
-	try {
-		chrome.debugger.attach(
-			{ tabId: currentTabId },
-			version,
-			onAttach.bind(null, currentTabId),
-		);
-		chrome.debugger.onDetach.addListener(debuggerDetachHandler);
-		chrome.tabs.sendMessage(currentTabId || 0, {
-			text: "clickedIcon",
-		});
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-	} catch (e: any) {
-		console.error("Error attaching debugger", e);
-		if (e.message === "Cannot access a chrome:// URL") {
-			console.log("Cannot attach to this target");
-			return;
-		}
-		MocksiRollbar.error("Error attaching debugger", e);
-	}
+	chrome.tabs.sendMessage(currentTabId || 0, {
+		text: "clickedIcon",
+	});
 });
 
 interface DataPayload {
@@ -249,6 +222,59 @@ function debuggerDetachHandler() {
 	requests.clear();
 }
 
+async function attachDebugger() {
+	console.log("attaching");
+	const version = "1.0";
+
+	const [activeTab] = await chrome.tabs.query({
+		active: true,
+		lastFocusedWindow: true,
+	});
+
+	if (!activeTab || !activeTab.id) {
+		console.error("Cannot find active tab ID to attach debugger");
+		return;
+	}
+
+	try {
+		chrome.debugger.attach(
+			{ tabId: activeTab.id },
+			version,
+			onAttach.bind(null, activeTab.id),
+		);
+		chrome.debugger.onDetach.addListener(debuggerDetachHandler);
+		chrome.tabs.sendMessage(currentTabId || 0, {
+			text: "clickedIcon",
+		});
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	} catch (e: any) {
+		console.error("Error attaching debugger", e);
+		if (e.message === "Cannot access a chrome:// URL") {
+			console.log("Cannot attach to this target");
+			return;
+		}
+		MocksiRollbar.error("Error attaching debugger", e);
+	}
+}
+
+async function detachDebugger() {
+	const [activeTab] = await chrome.tabs.query({
+		active: true,
+		lastFocusedWindow: true,
+	});
+
+	if (!activeTab || !activeTab.id) {
+		console.error("Cannot find active tab ID to detach debugger");
+		return;
+	}
+
+	try {
+		await chrome.debugger.detach({ tabId: activeTab.id });
+	} catch (e) {
+		console.error("Error detaching debugger", e);
+	}
+}
+
 async function createDemo(body: Record<string, unknown>) {
 	const defaultBody = {
 		created_timestamp: new Date(),
@@ -499,6 +525,16 @@ chrome.runtime.onMessage.addListener(
 			return true;
 		}
 
+		if (request.message === "attachDebugger") {
+			attachDebugger();
+			return true;
+		}
+
+		if (request.message === "detachDebugger") {
+			detachDebugger();
+			return true;
+		}
+
 		if (request.message === "Chat") {
 			return true;
 		}

diff --git a/apps/mocksi-lite/content/EditMode/editMode.ts b/apps/mocksi-lite/content/EditMode/editMode.ts
@@ -1,10 +1,15 @@
 import { MOCKSI_RECORDING_ID } from "../../consts";
-import { persistModifications, undoModifications } from "../../utils";
+import {
+	persistModifications,
+	sendMessage,
+	undoModifications,
+} from "../../utils";
 import { applyImageChanges, cancelEditWithoutChanges } from "./actions";
 import { decorate } from "./decorator";
 
 export const setEditorMode = async (turnOn: boolean, recordingId?: string) => {
 	if (turnOn) {
+		sendMessage("attachDebugger");
 		if (recordingId) {
 			await chrome.storage.local.set({ [MOCKSI_RECORDING_ID]: recordingId });
 		}
@@ -18,6 +23,7 @@ export const setEditorMode = async (turnOn: boolean, recordingId?: string) => {
 		await persistModifications(recordingId);
 	}
 
+	sendMessage("detachDebugger");
 	undoModifications();
 	await chrome.storage.local.remove(MOCKSI_RECORDING_ID);
 	document.body.removeEventListener("dblclick", onDoubleClickText);