[DevTools] RFC: Prevent errors/crashing when multiple installations o…

…f DevTools
facebook · Oct 8, 2021 · fec96f8 · fec96f8
1 parent 5fa4d79
commit fec96f8
Show file tree

Hide file tree

Showing 4 changed files with 459 additions and 353 deletions.
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
@@ -6,6 +6,11 @@ const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
+import {
+  IS_CHROME_WEBSTORE_EXTENSION,
+  EXTENSION_INSTALL_CHECK_MESSAGE,
+} from './constants';
+
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -116,6 +121,16 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+if (IS_CHROME_WEBSTORE_EXTENSION) {
+  chrome.runtime.onMessageExternal.addListener(
+    (request, sender, sendResponse) => {
+      if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
+        sendResponse(true);
+      }
+    },
+  );
+}
+
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {

diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+declare var chrome: any;
+
+export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const CURRENT_EXTENSION_ID = chrome.runtime.id;
+export const IS_CHROME_WEBSTORE_EXTENSION =
+  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID;
+export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -2,7 +2,11 @@
 
 import nullthrows from 'nullthrows';
 import {installHook} from 'react-devtools-shared/src/hook';
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+} from 'react-devtools-shared/src/constants';
+import {CURRENT_EXTENSION_ID, IS_CHROME_WEBSTORE_EXTENSION} from './constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
@@ -27,7 +31,17 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-
+  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+    if (__DEBUG__) {
+      console.log(
+        `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
+        {
+          currentIsChromeWebstoreExtension: IS_CHROME_WEBSTORE_EXTENSION,
+        },
+      );
+    }
+    return;
+  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {