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:
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'));
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.