How to use react-devtools for Chrome extension mv3?

Question

I'm trying to develop a Chrome extension with react and wxt (web extension framework) but the project getting big and out of control, so I need react-devtools to point to me what the actually happening, keep checking variables and things!

I've tried many different ways if you search for the answer but none of them work maybe too old (2 years) or not even related.

1. I added a script tag with http://localhost:8097 to the content script under the shadow root

2. Install react-devtools standalone app.

3. I must install the CSP Unblock extension to use it in mv3. Otherwise, you know CSP error.

4. Run the extension and it just keeps flickering back and forth.

Or

• go to http://localhost:8097 save the file and put it into the extension folder. It just shows: Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions

---

I've made it work once but I can't remember or backup the change because I was changed to vue that time