Prevent errors/crashing when multiple installs of DevTools are present

packages/react-devtools-extensions/build.js

@@ -102,6 +102,17 @@ const build = async (tempPath, manifestPath) => {
   }
   manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
 
+  if (process.env.NODE_ENV === 'development') {
+    // When building the local development version of the
+    // extension we want to be able to have a stable extension ID
+    // for the local build (in order to be able to reliably detect
+    // duplicate installations of DevTools).
+    // By specifying a key in the built manifest.json file,
+    // we can make it so the generated extension ID is stable.
+    // For more details see the docs here: https://developer.chrome.com/docs/extensions/mv2/manifest/key/
+    manifest.key = 'reactdevtoolslocalbuilduniquekey';
+  }
+
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension

packages/react-devtools-extensions/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
-    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
+    "build:local": "cross-env NODE_ENV=development yarn run build:chrome:local && yarn run build:firefox:local && yarn run build:edge:local",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
     "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
-    "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:chrome:local": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
-    "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "build:firefox:local": "cross-env NODE_ENV=development node ./firefox/build",
     "build:edge": "cross-env NODE_ENV=production node ./edge/build",
     "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
-    "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
+    "build:edge:local": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",

packages/react-devtools-extensions/src/background.js

@@ -6,6 +6,8 @@ const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
+import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
+
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -116,6 +118,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+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) {

packages/react-devtools-extensions/src/checkForDuplicateInstallations.js

@@ -0,0 +1,129 @@
+/**
+ * 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;
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  EXTENSION_INSTALL_CHECK_MESSAGE,
+  EXTENSION_INSTALLATION_TYPE,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from './constants';
+
+const UNRECOGNIZED_EXTENSION_WARNING =
+  'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
+  'Please make sure you only have a single version of the extension installed or enabled. ' +
+  'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
+
+export function checkForDuplicateInstallations(callback: boolean => void) {
+  switch (EXTENSION_INSTALLATION_TYPE) {
+    case 'public': {
+      // If this is the public extension (e.g. from Chrome Web Store), check if an internal
+      // or local build of the extension is also installed, and if so, disable this extension.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtensions([
+        INTERNAL_EXTENSION_ID,
+        LOCAL_EXTENSION_ID,
+      ]).then(areExtensionsInstalled => {
+        if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'internal': {
+      // If this is the internal extension, check if a local build of the extension
+      // is also installed, and if so, disable this extension.
+      // If the public version of the extension is also installed, that extension
+      // will disable itself.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
+        if (isInstalled) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'local': {
+      if (__DEV__) {
+        // If this is the local extension (i.e. built locally during development),
+        // always keep this one enabled. Other installations disable themselves if
+        // they detect the local build is installed.
+        callback(false);
+        break;
+      }
+
+      // If this extension wasn't built locally during development, we can't reliably
+      // detect if there are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    case 'unknown': {
+      // If we don't know how this extension was built, we can't reliably detect if there
+      // are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    default: {
+      (EXTENSION_INSTALLATION_TYPE: empty);
+    }
+  }
+}
+
+function checkForInstalledExtensions(
+  extensionIds: string[],
+): Promise<boolean[]> {
+  return Promise.all(
+    extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
+  );
+}
+
+function checkForInstalledExtension(extensionId: string): Promise<boolean> {
+  return new Promise(resolve => {
+    chrome.runtime.sendMessage(
+      extensionId,
+      EXTENSION_INSTALL_CHECK_MESSAGE,
+      response => {
+        if (__DEBUG__) {
+          console.log(
+            'checkForDuplicateInstallations: Duplicate installation check responded with',
+            {
+              response,
+              error: chrome.runtime.lastError?.message,
+              currentExtension: EXTENSION_INSTALLATION_TYPE,
+              checkingExtension: extensionId,
+            },
+          );
+        }
+        if (chrome.runtime.lastError != null) {
+          resolve(false);
+        } else {
+          resolve(true);
+        }
+      },
+    );
+  });
+}

packages/react-devtools-extensions/src/constants.js

@@ -0,0 +1,31 @@
+/**
+ * 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 CURRENT_EXTENSION_ID = chrome.runtime.id;
+
+export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
+
+export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
+export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
+
+export const EXTENSION_INSTALLATION_TYPE:
+  | 'public'
+  | 'internal'
+  | 'local'
+  | 'unknown' =
+  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
+    ? 'public'
+    : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
+    ? 'internal'
+    : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
+    ? 'local'
+    : 'unknown';

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, EXTENSION_INSTALLATION_TYPE} 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.`,
+        {
+          currentExtension: EXTENSION_INSTALLATION_TYPE,
+        },
+      );
+    }
+    return;
+  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {
@@ -102,6 +116,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
   window.postMessage({
     source: 'react-devtools-detector',
     reactBuildType,
+    extensionId: "${CURRENT_EXTENSION_ID}",
   }, '*');
 });
 `;