👷 only connect to background script when the extension is actually loaded (#3350)

Author: thomas-lebeau

developer-extension/src/panel/backgroundScriptConnection.ts

@@ -10,9 +10,7 @@ export const onBackgroundDisconnection = new EventListeners<void>()
 
 let backgroundScriptConnection: chrome.runtime.Port | undefined
 
-connectToBackgroundScript()
-
-function connectToBackgroundScript() {
+export function connectToBackgroundScript() {
   try {
     backgroundScriptConnection = chrome.runtime.connect({
       name: `devtools-panel-for-tab-${chrome.devtools.inspectedWindow.tabId}`,

developer-extension/src/panel/components/app.tsx

@@ -2,14 +2,16 @@ import { Button, MantineProvider } from '@mantine/core'
 import type { ReactNode } from 'react'
 import React, { Suspense, useEffect, useState } from 'react'
 import { isDisconnectError } from '../../common/isDisconnectError'
-import { onBackgroundDisconnection } from '../backgroundScriptConnection'
+import { onBackgroundDisconnection, connectToBackgroundScript } from '../backgroundScriptConnection'
 import { Alert } from './alert'
 import { Panel } from './panel'
 
 export function App() {
   const [isDisconnected, setIsDisconnected] = useState(false)
 
   useEffect(() => {
+    connectToBackgroundScript()
+
     const subscription = onBackgroundDisconnection.subscribe(() => setIsDisconnected(true))
     return () => subscription.unsubscribe()
   }, [])