Videos
I started rewriting one of my apps to React. I found myself to creating multiple components (each of which requires a .tsx and often .css file).
I'd love to use some helper, where I could just type name of the component, say ExampleComponent and it would:
-
Create a
src/ExampleComponent.tsxfile. -
Create a
src/ExampleComponent.cssfile. -
Would initialize component function in the tsx file.
-
Would import the css file in tsx file.
What I've seen so far is:
-
There's "React Component Generator" extension which almost does what I'm looking for but it creates a rather complex component structure that I'm not sure if is needed for a small project.
-
Most popular extensions for React are snippet based - which means you need to create a file manually and only based on the file you can only simplify .tsx content.
Any suggestions from seasoned devs? 🙂 I'd like to avoid doing such extension if there's something that fits my needs.
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.
Hi everyone! I’m the developer of this tool. Traceform highlights React components on your live app when you click that component’s code in VSCode. (Think: click <Button /> in your code, your browser instantly outlines every <Button> on the page).
I built it to speed up UI debugging at my day job. Right now it’s in early alpha, it works on my test react specific projects and most react projects, but I’m not sure how it’ll fare in larger real world apps.
I’d love some brave React devs to try it out and let me know if it works for you! 🙏
How to try: You can check it out at traceform github. It’s free to use, I just want feedback.
Tech details: It uses a client script in your app that maps React fiber IDs to DOM nodes, and a VSCode extension that sends the selected symbol name to the browser. No tracking or telemetry in the code, it just runs locally.
Looking for: Feedback on does it work in your stack (Create React App, Next.js, etc)? Does it save you time? Any rough edges or ideas to make it better?
If you would like to see demo videos check out traceform website I wasnt able to attach the demo video so here is the link to the video on the website.
Thanks! 👍