How to add react-devtools for chrome extension development?

Question

I am inserting a react component into a web page - Everything seems to work well but im not able to get the react dev tools working.

After reading online it seems like this could be caused by:

1. React devtools injects a script and it doesn't have the required permissions
2. Extensions can not communicate with eachover

Things i have tried:

• Checking that the REACT_DEVTOOLS_GLOBAL_HOOK is present on the window object, Its present on the window when targeted through the browser but not when i try to grab it from within my extension

• I have tried give any required permissions by doing:

"content_security_policy": "connect-src ws://localhost:8097", // to my manifest
// and
"script-src http://localhost:8097"
//and 
"content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'",

Which would give me an error that the value is invalid - So i went to a manifest v2. That did fix that error and then i was able to run

yarn add react-devtools
yarn react-devtools

Which caused the devtools to pop up (not through the chrome extension but from my console) - However this was empty and there were no components being shown on it.

Im suspicious of how these components are actually being picked up because right now i am adding the components to the body of the page using querySelector, Could this be causing an issue?

Heres what my code looks like:

import 'react-devtools'

import React from 'react';
import { render } from 'react-dom';
import Index from './components/index'

render(<App />, window.document.querySelector('body'));

Answer 1

For moderators: this is a 1st stackoverflow result in google for this topic thats why it needs an update.

Answer after a lot of research:

I've been long trying to finally fix this issue. The solution works for vite bundler in versions 2.9.5 through 5.2.11 (the last one i tested) with Manifest V3 Google Chrome (v125 2024).

Complete code: https://github.com/Toumash/crxjs-vite-plugin-react-devtools (feel free to clone)

Use import 'react-devtools'; in your content_script entry and use devtools as a standalone app - as you pointed out the react devtools chrome extension cannot communicate with other extension (the one you're developing)

Improvements:

1. To not bundle this package into production extension build use a conditionally imported file. I've added the following into my package.json

{
...
 "imports": {
    "#env-import/*.ts": {
      "development": "./src/*.dev.ts",
      "production": "./src/*.prod.ts"
    }
  }
...
}

2. Add a file devtools.dev.ts containing only the import 'react-devtools';.
3. Add a file devtools.prod.ts with nothing in it (empty file)
4. In your content_scripts/index.ts add import '#env-import/devtools.ts'; to conditionally import the devtools script
5. Install react-devtools standalone package npm i -D react-devtools
6. Add react-devtools to the npm scripts section "react-devtools": "react-devtools",
7. Now you can finally just run your extension and npm run react-devtools and it works

Original (mine) answer on Github