Configure HMR and enhance side panel reliability

package.json

@@ -8,7 +8,7 @@
         "url": "https://github.com/sensasi-delight/vertical-tabs-crx/issues"
     },
     "dependencies": {
-        "jotai": "^2.15.1",
+        "jotai": "^2.15.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0"
     },
@@ -20,15 +20,15 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@types/chrome": "^0.1.31",
+        "@types/chrome": "^0.1.32",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
         "babel-plugin-react-compiler": "^1.0.0",
         "jsdom": "^27.2.0",
         "typescript": "~5.8.3",
-        "vite": "^7.2.4",
+        "vite": "^7.2.6",
         "vite-plugin-zip-pack": "^1.2.4",
         "vitest": "^4.0.14"
     },
@@ -60,5 +60,5 @@
         "test": "vitest run"
     },
     "type": "module",
-    "version": "0.0.3"
+    "version": "0.0.4"
 }

src/service-worker.ts

@@ -3,43 +3,60 @@ const processingWindows = new Set<number>()
 
 const openSidePanel = async (tabId: number, windowId: number) => {
     if (processingWindows.has(windowId)) return
+
     processingWindows.add(windowId)
 
-    try {
-        await chrome.sidePanel.open({
+    chrome.sidePanel
+        .open({
             tabId,
             windowId,
         })
-    } catch (error) {
-        console.error('Failed to open side panel:', error)
-        processingWindows.delete(windowId)
-    }
+        .finally(() => {
+            processingWindows.delete(windowId)
+        })
 }
 
 const closeSidePanel = (windowId: number) => {
     if (processingWindows.has(windowId)) return
 
     const port = ports.get(windowId)
+
     if (port) {
         processingWindows.add(windowId)
         port.postMessage({ type: 'CLOSE_SIDE_PANEL' })
+    } else {
+        throw new Error('Port not found')
     }
 }
 
 // Listen for port connections from side panel
 chrome.runtime.onConnect.addListener(port => {
     if (port.name === 'side-panel') {
-        const windowId = port.sender?.tab?.windowId
+        const tab = port.sender?.tab
 
-        if (typeof windowId === 'number') {
-            ports.set(windowId, port)
-            processingWindows.delete(windowId)
+        if (tab?.windowId) {
+            ports.set(tab.windowId, port)
+            processingWindows.delete(tab.windowId)
 
             // When port disconnects, side panel is closed
             port.onDisconnect.addListener(() => {
-                ports.delete(windowId)
-                processingWindows.delete(windowId)
+                ports.delete(tab.windowId)
+                processingWindows.delete(tab.windowId)
             })
+        } else {
+            chrome.tabs
+                .query({ active: true, currentWindow: true })
+                .then(tabs => {
+                    const [tab] = tabs
+                    ports.set(tab.windowId, port)
+                    processingWindows.delete(tab.windowId)
+
+                    // When port disconnects, side panel is closed
+                    port.onDisconnect.addListener(() => {
+                        ports.delete(tab.windowId)
+                        processingWindows.delete(tab.windowId)
+                    })
+                })
         }
     }
 })

src/side-panel/use-register-listener.ts

@@ -12,6 +12,12 @@ export function useRegisterListener() {
         // This allows service worker to detect when side panel is closed
         const port = chrome.runtime.connect({ name: 'side-panel' })
 
+        port.onMessage.addListener((message: { type: 'CLOSE_SIDE_PANEL' }) => {
+            if (message.type === 'CLOSE_SIDE_PANEL') {
+                window.close()
+            }
+        })
+
         return () => {
             port.disconnect()
         }
@@ -31,21 +37,6 @@ export function useRegisterListener() {
         })
     }, [setTabs, setActiveTab])
 
-    // ✉️ ON MESSAGE
-    useEffect(() => {
-        const handleMessage = (message: { type: string }) => {
-            if (message.type === 'CLOSE_SIDE_PANEL') {
-                window.close()
-            }
-        }
-
-        chrome.runtime.onMessage.addListener(handleMessage)
-
-        return () => {
-            chrome.runtime.onMessage.removeListener(handleMessage)
-        }
-    }, [])
-
     // 🆕 ON TAB CREATED
     useEffect(() => {
         const handleTabCreated = (tab: chrome.tabs.Tab) => {

vite.config.ts

@@ -25,5 +25,11 @@ export default defineConfig({
         cors: {
             origin: [/chrome-extension:\/\//],
         },
+
+        hmr: {
+            host: 'localhost',
+            port: 5173,
+            protocol: 'ws',
+        },
     },
 })