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