From be82f282a4d3cc6443b93f9f92001fc456fda53e Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alexbodurri1117@gmail.com>
Date: Mon, 6 May 2024 19:06:31 -0400
Subject: [PATCH] fix(devtools): catch invalidated extension error to prevent
 devtools from spamming console (#55697)

When a browser extension is updated it becomes invalidated on currently open pages. If that extension then tries to send a message to those pages through `chrome.runtime.sendMessage(..)` then an error is thrown in the console

For Angular DevTools, this results in spamming the console with "Uncaught Error: Extension context invalidated." errors.

This commit catches that error and removes the event listener that triggers the `chrome.runtime.sendMessage(...)` call.

PR Close #55697
---
 .../shell-browser/src/app/content-script.ts   | 19 +++++++++++++++++++
 .../shell-browser/src/app/ng-validate.ts      |  6 ------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/devtools/projects/shell-browser/src/app/content-script.ts b/devtools/projects/shell-browser/src/app/content-script.ts
index 8b168fbb933..86271521ebd 100644
--- a/devtools/projects/shell-browser/src/app/content-script.ts
+++ b/devtools/projects/shell-browser/src/app/content-script.ts
@@ -90,3 +90,22 @@ if (!backendInitialized) {
   };
   retry();
 }
+
+const proxyEventFromWindowToDevToolsExtension = (event: MessageEvent) => {
+  if (event.source === window && event.data) {
+    try {
+      chrome.runtime.sendMessage(event.data);
+    } catch (e) {
+      const {message} = e as Error;
+      if (message.includes('Extension context invalidated.')) {
+        console.error(
+          'Angular DevTools: Disconnecting content script due to invalid extension context. Please reload the page.',
+        );
+        window.removeEventListener('message', proxyEventFromWindowToDevToolsExtension);
+      }
+      throw e;
+    }
+  }
+};
+
+window.addEventListener('message', proxyEventFromWindowToDevToolsExtension);
diff --git a/devtools/projects/shell-browser/src/app/ng-validate.ts b/devtools/projects/shell-browser/src/app/ng-validate.ts
index 6d41ba06c4b..178e360120a 100644
--- a/devtools/projects/shell-browser/src/app/ng-validate.ts
+++ b/devtools/projects/shell-browser/src/app/ng-validate.ts
@@ -8,12 +8,6 @@
 
 /// <reference types="chrome"/>
 
-window.addEventListener('message', (event: MessageEvent) => {
-  if (event.source === window && event.data) {
-    chrome.runtime.sendMessage(event.data);
-  }
-});
-
 if (document.contentType === 'text/html') {
   const script = document.createElement('script');
   script.src = chrome.runtime.getURL('app/detect_angular_for_extension_icon_bundle.js');