How to add react-devtools for chrome extension development?

Question

I am inserting a react component into a web page - Everything seems to work well but im not able to get the react dev tools working.

After reading online it seems like this could be caused by:

1. React devtools injects a script and it doesn't have the required permissions
2. Extensions can not communicate with eachover

Things i have tried:

• Checking that the REACT_DEVTOOLS_GLOBAL_HOOK is present on the window object, Its present on the window when targeted through the browser but not when i try to grab it from within my extension

• I have tried give any required permissions by doing:

"content_security_policy": "connect-src ws://localhost:8097", // to my manifest
// and
"script-src http://localhost:8097"
//and 
"content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'",

Which would give me an error that the value is invalid - So i went to a manifest v2. That did fix that error and then i was able to run

yarn add react-devtools
yarn react-devtools

Which caused the devtools to pop up (not through the chrome extension but from my console) - However this was empty and there were no components being shown on it.

Im suspicious of how these components are actually being picked up because right now i am adding the components to the body of the page using querySelector, Could this be causing an issue?

Heres what my code looks like:

import 'react-devtools'

import React from 'react';
import { render } from 'react-dom';
import Index from './components/index'

render(<App />, window.document.querySelector('body'));

Answer 1

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.