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:
- 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"
}
}
...
}
- Add a file
devtools.dev.tscontaining only theimport 'react-devtools';. - Add a file
devtools.prod.tswith nothing in it (empty file) - In your
content_scripts/index.tsaddimport '#env-import/devtools.ts';to conditionally import the devtools script - Install react-devtools standalone package
npm i -D react-devtools - Add react-devtools to the npm scripts section
"react-devtools": "react-devtools", - Now you can finally just run your extension and
npm run react-devtoolsand it works
Original (mine) answer on Github
Answer from Toumash on Stack OverflowReact Developer Tools not appearing in Chrome
How to add react-devtools for chrome extension development?
react dev tools not loading in Chrome browser
how to use react developer tools in chrome
Videos
For some reason I cannot find the developer tools in Chrome. Why could that be?
I posted my question in StackOverflow, but I hope I could find here a solution faster:
https://stackoverflow.com/questions/77421852/react-developer-tools-wont-appear-in-chrome
I uploaded pictures in that link, in case you want to see it directly.
Please help!
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:
- 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"
}
}
...
}
- Add a file
devtools.dev.tscontaining only theimport 'react-devtools';. - Add a file
devtools.prod.tswith nothing in it (empty file) - In your
content_scripts/index.tsaddimport '#env-import/devtools.ts';to conditionally import the devtools script - Install react-devtools standalone package
npm i -D react-devtools - Add react-devtools to the npm scripts section
"react-devtools": "react-devtools", - Now you can finally just run your extension and
npm run react-devtoolsand it works
Original (mine) answer on Github
In manifest v3 it's afaik not possible to use a remote script (even though the docs suggest otherwise).
What you can do instead is include the script from the standalone devtools in your extension files.
So instead of including: <script src="http://localhost:8097"></script> as the docs describe, open that url in your browser, save the JS as file in your chrome extension folder, then include that file. For example <script src="/react-devtools.js"></script>.
Once you have done that the devtools will show in the standalone app.
If you opened a local html file in your browser (file://...) then you must first open chrome extensions and check off "Allow access to file URLs".
You no longer need to do anything.
For older react versions, the main requirement is that window.React is set. If you're using a module system:
if (typeof window !== 'undefined') {
window.React = React;
}
This should usually be done in your main source file.
» npm install react-devtools