fix: different tabs overriding each other

pixijs · Jul 29, 2024 · 0b367f4 · 0b367f4
1 parent 75efd0c
commit 0b367f4
Showing 1 changed file with 56 additions and 21 deletions.
diff --git a/packages/devtool-chrome/src/background/index.ts b/packages/devtool-chrome/src/background/index.ts
@@ -24,40 +24,75 @@ function setIconAndPopup(type: DevtoolMessage, tabId: number) {
   chrome.action.setTitle({ tabId, title });
 }
 
-let devToolsConnection: chrome.runtime.Port | null = null;
+const devtoolConnections: Record<string, chrome.runtime.Port> = {};
 
+// Create a connection to the background page
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.name !== 'devtools-connection') return;
+
+  const extensionListener = function (message: any) {
+    // The original connection event doesn't include the tab ID of the
+    // DevTools page, so we need to send it explicitly.
+    if (message.name == 'init') {
+      devtoolConnections[message.tabId] = port;
+      return;
+    }
+  };
+
+  // Listen to messages sent from the DevTools page
+  port.onMessage.addListener(extensionListener);
+
+  port.onDisconnect.addListener(function (port) {
+    port.onMessage.removeListener(extensionListener);
+
+    const tabs = Object.keys(devtoolConnections);
+    for (let i = 0, len = tabs.length; i < len; i++) {
+      if (devtoolConnections[tabs[i]] === port) {
+        delete devtoolConnections[tabs[i]];
+        break;
+      }
+    }
+  });
+});
+
+// Receive message from content script and relay to the devTools page for the
+// current tab
 chrome.runtime.onMessage.addListener((request: Message, sender: chrome.runtime.MessageSender) => {
   const converted = convertPostMessageData(request);
   if (converted.method === DevtoolMessage.active) {
     setIconAndPopup(DevtoolMessage.active, sender.tab?.id ?? 0);
   }
 
-  if (devToolsConnection) {
-    const message = convertPostMessage(converted.method, converted.data);
-    devToolsConnection?.postMessage({
-      id: 'pixi-devtools',
-      ...message,
-    });
+  // Messages from content scripts should have sender.tab set
+  if (sender.tab) {
+    const tabId = sender.tab.id!;
+    if (tabId in devtoolConnections) {
+      const message = convertPostMessage(converted.method, converted.data);
+      devtoolConnections[tabId].postMessage({
+        id: 'pixi-devtools',
+        tabId: sender.tab?.id,
+        ...message,
+      });
+    } else {
+      console.log('Tab not found in connection list.');
+    }
+  } else {
+    console.log('sender.tab not defined.');
   }
-});
-
-chrome.runtime.onConnect.addListener(function (port) {
-  if (port.name !== 'devtools-connection') return;
-
-  devToolsConnection = port;
-  devToolsConnection.onDisconnect.addListener(function () {
-    devToolsConnection = null;
-  });
+  return true;
 });
 
 // update icon and popup when the active tab changes
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (tab.active && changeInfo.status === 'loading') {
     setIconAndPopup(DevtoolMessage.inactive, tabId);
-    const message = convertPostMessage(DevtoolMessage.inactive, {});
-    devToolsConnection?.postMessage({
-      id: 'pixi-devtools',
-      ...message,
-    });
+    if (tabId in devtoolConnections) {
+      const message = convertPostMessage(DevtoolMessage.inactive, {});
+      devtoolConnections[tabId].postMessage({
+        id: 'pixi-devtools',
+        tabId,
+        ...message,
+      });
+    }
   }
 });