fix(devtools): set extension icon and popup only on DevTools background message

The script handles messages globally, for all extensions running on the page. I this case, we don't want to do anything if the message does not come from Angular DevTools itself.

projects/shell-chrome/src/app/background.ts

@@ -100,6 +100,9 @@ const getPopUpName = (ng: AngularDetection) => {
 };
 
 chrome.runtime.onMessage.addListener((req, sender) => {
+  if (!req.isAngularDevTools) {
+    return;
+  }
   if (sender && sender.tab) {
     chrome.browserAction.setPopup({
       tabId: sender.tab.id,

projects/shell-chrome/src/app/ng-validate.ts

@@ -1,4 +1,10 @@
 export interface AngularDetection {
+  // This is necessary because the runtime
+  // message listener handles messages globally
+  // including from other extensions. We don't
+  // want to set icon and/or popup based on
+  // a message coming from an unrelated extension.
+  isAngularDevTools: true;
   isIvy: boolean;
   isAngular: boolean;
   isDebugMode: boolean;
@@ -34,6 +40,7 @@ function detectAngular(win: Window): void {
       isAngular,
       isDebugMode,
       isSupportedAngularVersion,
+      isAngularDevTools: true,
     } as AngularDetection,
     '*'
   );