Chrome does not allow extensions to modify other extensions, so React DevTools are not available in the Chrome DevTools interface when inspecting a Chrome extension interface. The React team has provided a standalone app that can be connected manually, but it requires some setup. The React DevTools readme includes some instructions, but they leave out an important step if you're debugging within a Chrome extension.
Here's an overview of how to set this up locally for an extension:
The easiest way to start the standalone app is:
npx react-devtools
You can also install the NPM package globally with npm or yarn and run the executable from your shell if you'd like. Instructions for that are in the readme.
In the HTML for the extension interface, insert the following script tag:
<script src="http://localhost:8097"></script>The standalone app will also provide these instructions, with an alternative using your local IP address, and allow you to copy and paste the HTML for this script tag.
Note that this script needs to be loaded before the script that loads react-dom. The bottom of the <head> is recommended in the React DevTools docs.
Chrome extensions enforce a very strict content security policy (CSP) by default. To allow the React DevTools script, you'll need to add or modify the existing content_security_policy key in the manifest.json file:
"content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'"