Yay a devtools!

devtools/background.js

@@ -1,24 +1,54 @@
 console.log("background.js loaded");
 
-// Listen for messages from the devtools panel
 browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  // You could add a check to see if the message is from the devtools panel.
   if (message.type === "GET_CONTEXT_STACK") {
-    // Forward the message to the content script running in the active tab.
-    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-      if (tabs.length) {
-        browser.tabs.sendMessage(tabs[0].id, message).then(sendResponse);
-      }
-    });
-    // Return true to indicate you wish to send a response asynchronously
+    browser.tabs.sendMessage(message.tabId, message)
+      .then((res) => {
+        console.log("RESPONSE", res);
+        sendResponse(res);
+      })
+      .catch((err) => {
+        console.log("Error sending message to content script:", err);
+        sendResponse({ error: err });
+      });
+    // browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+    //   if (tabs.length) {
+    //   }
+    // });
     return true;
   } else if (message.type === "UPDATE_CONTEXT_VALUE") {
-    // Forward update messages similarly
-    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-      if (tabs.length) {
-        browser.tabs.sendMessage(tabs[0].id, message).then(sendResponse);
-      }
-    });
+    browser.tabs.sendMessage(message.tabId, message).then(sendResponse);
+    // browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+    //   if (tabs.length) {
+    //   }
+    // });
     return true;
   }
 });
+
+let devtoolsPort = null;
+
+browser.runtime.onConnect.addListener((port) => {
+  if (port.name === "devtools") {
+    devtoolsPort = port;
+    console.log("Devtools panel connected.");
+
+    // port.onMessage.addListener((msg) => {
+    //   console.log("Received message from devtools panel:", msg);
+    // });
+
+    port.onDisconnect.addListener(() => {
+      devtoolsPort = null;
+    });
+  }
+});
+
+// Relay messages from content scripts to the devtools panel.
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "PAGE_LOADED") {
+    console.log("Background received PAGE_LOADED message from content script.");
+    if (devtoolsPort) {
+      devtoolsPort.postMessage({ type: "PAGE_LOADED" });
+    }
+  }
+});