🐛 [devext] synchronize network rules on extension start (DataDog#3560)

Author: BenoitZugmeyer

developer-extension/src/panel/backgroundScriptConnection.ts

@@ -10,13 +10,17 @@ export const onBackgroundDisconnection = new EventListeners<void>()
 
 let backgroundScriptConnection: chrome.runtime.Port | undefined
 
+// Buffer messages while the background script is not connected
+const backgroundScriptMessageBuffer: DevtoolsToBackgroundMessage[] = []
+
 export function connectToBackgroundScript() {
   try {
     backgroundScriptConnection = chrome.runtime.connect({
       name: `devtools-panel-for-tab-${chrome.devtools.inspectedWindow.tabId}`,
     })
 
     backgroundScriptConnection.onDisconnect.addListener(() => {
+      backgroundScriptConnection = undefined
       // The background script can be disconnected for (at least) two main reasons:
       // * the extension is updated and its context is invalidated
       // * the background script has been idle for too long
@@ -35,7 +39,12 @@ export function connectToBackgroundScript() {
     backgroundScriptConnection.onMessage.addListener((backgroundMessage) =>
       onBackgroundMessage.notify(backgroundMessage)
     )
+
+    for (const message of backgroundScriptMessageBuffer.splice(0)) {
+      backgroundScriptConnection.postMessage(message)
+    }
   } catch (error) {
+    backgroundScriptConnection = undefined
     if (isDisconnectError(error)) {
       onBackgroundDisconnection.notify()
     } else {
@@ -47,5 +56,7 @@ export function connectToBackgroundScript() {
 export function sendMessageToBackground(message: DevtoolsToBackgroundMessage) {
   if (backgroundScriptConnection) {
     backgroundScriptConnection.postMessage(message)
+  } else {
+    backgroundScriptMessageBuffer.push(message)
   }
 }