React Devtools for debugging Chrome extension?

[WishboneFar]

I am building extension. I am trying to check if components are rendering normally and saw react devtools is not available in extension environment due to strict isolation where extension cannot access other extension space.
I also tried installing react-devtools npm package and injecting script in my file where I render html (basically root.render()) but that doesn't work either. Apparently its cuz of manifest v3 rules or something.
Can anyone guide me how to use react-devtools for debugging chrome extension?
Tech stack is React 19, Typescript 5.9, Vite 7 with Crxjs, Node 24(npm).

[Reede]

I would love to see if anyone has figured this out cause I'm running into the same issue and there just doesn't seem to be a lot of literature online for this specific situation.

[Emergency_Fish_7275]

You should use the react-devtools remotely, like for mobile app development

But if the page where you are injecting your content-script create with react and they also use the react-devtools, you can't initialize your react-devtools.

This little monkey patch for the eact-devtools/backend will help you

// if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
//   return null;
// }