When developing Chrome extension, Chrome React Devtools doesn't show up

Question

I am debugging my chrome extension pop page, and open it in uri : chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html

This page is using reactjs, but the react devtools is not showing. Is it by design?

Answer 1

You can use React Dev Tools but you will have to use the standalone version to work in browser extension (because of CSP restrictions). Run this in your console

$ npm install -g react-devtools

and add this to you manifest.json

"content_security_policy": "connect-src ws://localhost:8097"

Now run react-devtools
Don't forget to reload your extension.

P.S.
If you don't want to install react-devtools globally you can run npm install --save-dev react-devtools from your project and then add to package.json

"scripts": {
   "react-devtools": "react-devtools"
}

And run npm run react-devtools

Answer 2

The React Dev Tools needs to inject a content script in your page to check your react components. To do that they declare in their manifest the pattern that matches any url with a permitted scheme and these are (from the docs https://developer.chrome.com/extensions/match_patterns):

http, https, file, ftp

In other words: the React Developer Tools can not run in extension pages.

Answer 3

This is what I did to make it work with manifest v3:

• installed it locally: npm i -D react-devtools
• added "react-devtools": "react-devtools" to package.json scripts
• imported the package at the top of the file that calls render: import 'react-devtools'
• and the final step was to open Devtools with npm run react-devtools