Devtools tabs should not appear in chrome-extension pages when using react-devtools as an entry point

[nickserv]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

The React devtools tabs in Chrome devtools can be displayed in extension pages, even though modifying extensions in other extensions is not supported by Chrome, and React devtools are therefore broken.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

1. Install Chrome and React devtools
2. Open devtools in a chrome-extension page implemented with React

Example: prettier-chrome-extension (install from source and open extension options)

What is the expected behavior?

React devtools should not appear when it's not supported, just like when devtools are opened on a page that doesn't use React.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• React 16.11.0
• React Developer Tools 4.2.0 (10/3/2019)
• Chrome 78.0.3904.70
• macOS 10.15

[threepointone]

Assigning to myself because I'm interested.

[nickserv]

This comment on a similar issue could be useful:

The intuitive way [to detect chrome-extension pages] is to check location.protocol.

https://github.com/facebook/react/issues/8409#issuecomment-319755594

There's also a pull request: https://github.com/facebook/react/pull/10359

[bvaughn]

I'm not able to reproduce this behavior.

[nickserv]

I can reproduce with a fresh install of the example: prettier-chrome-extension (install from source and open extension options)

[bvaughn]

Sorry, still can't reproduce this. May need more info.

[nickserv]

Sorry, I just realized I changed the example I gave previously in a way that no longer reproduces the issue.

Here's a new minimal reproduction: https://gist.github.com/nickmccurdy/5d53943c3c31587991713b29a04c8009

It seems like this is specifically an issue with adding react-devtools as an entry point in webpack. It works if I remove the entry point and import "react-devtools", but the docs suggest that both should work and I'd prefer to toggle devtools support in development/production with entry points. I'm not sure if the source of the issue is my webpack configuration or a bug in React Devtools, so I'd appreciate help figuring that out.

Steps to reproduce

1. Clone/download example
2. Run yarn
3. Install Chrome and React Devtools Extension (chrome://extensions/)
4. Open Chrome extension settings
5. Enable developer mode
6. Load unpacked extension
7. Select path to dist directory
8. Open extension details
9. Open extension options
10. Open Chrome Devtools
11. Open Components tab of React Devtools

[bvaughn]

That's...a really specific and unusual set of steps. Why is your extension importing react-devtools?

[nickserv]

I can't use React devtools extension because Chrome doesn’t support extensions (like React devtools) injecting devtools into extension pages (like my extension’s options page which uses React). I also can’t run a separate webpack dev server because my React components rely on Chrome extension APIs. As a result, I’m using the standalone react-devtools command and adding it as a webpack entry so I can conditionally enable it in development (following Usage with React DOM).

Here's a screenshot which shows the broken React devtools tab (which is missing the App component):

I also built a zip file if you'd like to test this without building from source:

1. Install Chrome and React Devtools Extension
2. Open Chrome extension settings (chrome://extensions/)
3. Enable developer mode
4. Download and unzip dist.zip
5. Click load unpacked and select the unzipped directory
6. Open extension details
7. Open extension options
8. Open Chrome Devtools
9. Open Components tab of React Devtools

[bvaughn]

Thanks for the added context.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[nickserv]

Bumping, I think this would improve the DX of React extension development

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[bvaughn]

@nickmccurdy Realistically, I don't think anyone is going to work on this issue considering how unusual the use case is. If it's important to you, you might need to pick it up.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[aspiers]

I have just seen this same problem of the react-devtools Components tab incorrectly appearing in the inspector of my extension's options page when it shouldn't. However in my case it was triggered with rollup+vite and import 'react-devtools' in the options page's index.tsx rather than via a webpack entry point.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!