added back context menu with port cleanup after window close

Author: garrettlchow

README.md

@@ -176,12 +176,22 @@ These updates make Reactime more powerful, reliable, and user-friendly than ever
 - React Developer Tools extension must be installed
 - Chrome browser (version 80 or higher recommended)
 
-### Launch Reactime
+### Launch Reactime\
+
+There are two ways to open the Reactime panel:
+
+1. **DevTools**
 
 - Open Chrome DevTools (F12 or ⌘+⌥+I)
 - Navigate to the "Reactime" tab
 - This will open Reactime as a panel within Chrome DevTools, integrated alongside your other development tools
 
+2. **Context Menu**
+
+- Right-click anywhere on your React application
+- Select "Reactime" from the context menu
+- This will open Reactime in a separate popup window which you can resize and position independently
+
 Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics.
 <br>
 <br>

src/extension/background.js

@@ -880,3 +880,45 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     sendResponse({ success: true });
   }
 });
+
+// when reactime is installed
+// create a context menu that will open our devtools in a new window
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'reactime',
+    title: 'Reactime',
+    contexts: ['page', 'selection', 'image', 'link'],
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'reactime') {
+    chrome.windows
+      .create({
+        url: chrome.runtime.getURL('panel.html'),
+        type: 'popup',
+        width: 1200,
+        height: 800,
+      })
+      .then((window) => {
+        // Listen for window close
+        chrome.windows.onRemoved.addListener(function windowClosedListener(windowId) {
+          if (windowId === window.id) {
+            // Cleanup when window is closed
+            portsArr.forEach((port) => {
+              try {
+                port.disconnect();
+              } catch (error) {
+                console.warn('Error disconnecting port:', error);
+              }
+            });
+            // Clear the ports array
+            portsArr.length = 0;
+
+            // Remove this specific listener
+            chrome.windows.onRemoved.removeListener(windowClosedListener);
+          }
+        });
+      });
+  }
+});

src/extension/build/manifest.json

@@ -24,6 +24,6 @@
       "matches": ["<all_urls>"]
     }
   ],
-  "permissions": ["tabs", "activeTab", "scripting", "debugger", "alarms"],
+  "permissions": ["contextMenus", "tabs", "activeTab", "scripting", "debugger", "alarms"],
   "host_permissions": ["<all_urls>"]
 }