Detect and warn if multiple copies of React DevTools are installed #22486
Assignees
Labels
Comments
|
@jstejada This is all yours! |
|
@bvaughn cool! i'll be working on this today |
bvaughn
pushed a commit
that referenced
this issue
Oct 14, 2021
#22517) ## Summary This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension. Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case. ### Detecting Duplicate Installations - First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build. - If the extension is from the **Chrome Web Store**: - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs. - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID. - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all. - If the extension is the **Internal Build**: - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID. - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that version. This means we don't initialize the frontend or the backend at all. - If the extension is a **Local Dev Build**: - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled. This behavior means that the order of priority for keeping an extension enabled is the following: 1. Local build 2. Internal build 3. Public build ### Preventing duplicate backend initialization Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice. In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend. ### Other approaches - I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal. - I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap. ### Rollout - This commit needs to be published and rolled out to the Chrome Web Store first. - After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version. ### Next Steps - In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected. Part of #22486 ## How did you test this change? ### Basic Testing - yarn flow - yarn test - yarn test-build-devtools ### Double installation testing Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version). In order to simulate duplicate extensions installed, I did the following process: - Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds. - Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs. With this set up in place, I tested the following on pages both with and without React: - When only the local extension enabled, DevTools works normally. - When only the "internal" extension enabled, DevTools works normally. - When only the "public" extension enabled, DevTools works normally. - When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally. - When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally. - When we can't recognize what type of build the extension corresponds to, we show an error. - When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.
KamranAsif
pushed a commit
to KamranAsif/react
that referenced
this issue
Nov 4, 2021
facebook#22517) ## Summary This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension. Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case. ### Detecting Duplicate Installations - First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build. - If the extension is from the **Chrome Web Store**: - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs. - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID. - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all. - If the extension is the **Internal Build**: - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID. - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that version. This means we don't initialize the frontend or the backend at all. - If the extension is a **Local Dev Build**: - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled. This behavior means that the order of priority for keeping an extension enabled is the following: 1. Local build 2. Internal build 3. Public build ### Preventing duplicate backend initialization Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice. In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend. ### Other approaches - I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal. - I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap. ### Rollout - This commit needs to be published and rolled out to the Chrome Web Store first. - After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version. ### Next Steps - In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected. Part of facebook#22486 ## How did you test this change? ### Basic Testing - yarn flow - yarn test - yarn test-build-devtools ### Double installation testing Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version). In order to simulate duplicate extensions installed, I did the following process: - Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds. - Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs. With this set up in place, I tested the following on pages both with and without React: - When only the local extension enabled, DevTools works normally. - When only the "internal" extension enabled, DevTools works normally. - When only the "public" extension enabled, DevTools works normally. - When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally. - When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally. - When we can't recognize what type of build the extension corresponds to, we show an error. - When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.
zhengjitf
pushed a commit
to zhengjitf/react
that referenced
this issue
Apr 15, 2022
facebook#22517) ## Summary This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension. Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case. ### Detecting Duplicate Installations - First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build. - If the extension is from the **Chrome Web Store**: - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs. - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID. - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all. - If the extension is the **Internal Build**: - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID. - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that version. This means we don't initialize the frontend or the backend at all. - If the extension is a **Local Dev Build**: - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled. This behavior means that the order of priority for keeping an extension enabled is the following: 1. Local build 2. Internal build 3. Public build ### Preventing duplicate backend initialization Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice. In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend. ### Other approaches - I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal. - I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap. ### Rollout - This commit needs to be published and rolled out to the Chrome Web Store first. - After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version. ### Next Steps - In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected. Part of facebook#22486 ## How did you test this change? ### Basic Testing - yarn flow - yarn test - yarn test-build-devtools ### Double installation testing Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version). In order to simulate duplicate extensions installed, I did the following process: - Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds. - Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs. With this set up in place, I tested the following on pages both with and without React: - When only the local extension enabled, DevTools works normally. - When only the "internal" extension enabled, DevTools works normally. - When only the "public" extension enabled, DevTools works normally. - When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally. - When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally. - When we can't recognize what type of build the extension corresponds to, we show an error. - When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you have more than one copy of React DevTools installed and enabled (e.g. the version in the Chrome store and a locally built version) they can interfere with each other.
DevTools should detect this case and warn by showing a dialog in the DevTools UI and/or by logging to the console.
Note that we should not warn if a related tool like Fast Refresh is present, only another copy of DevTools.
The text was updated successfully, but these errors were encountered: