Skip to content

Instantly share code, notes, and snippets.

@wosephjeber
Last active October 12, 2023 10:05
Show Gist options
  • Save wosephjeber/a0b3911baf478886be05278293f681c3 to your computer and use it in GitHub Desktop.
Save wosephjeber/a0b3911baf478886be05278293f681c3 to your computer and use it in GitHub Desktop.
Inspecting Chrome extension interfaces with React DevTools

Inspecting Chrome extension interfaces with React DevTools

Chrome does not allow extensions to modify other extensions, so React DevTools are not available in the Chrome DevTools interface when inspecting a Chrome extension interface. The React team has provided a standalone app that can be connected manually, but it requires some setup. The React DevTools readme includes some instructions, but they leave out an important step if you're debugging within a Chrome extension.

Here's an overview of how to set this up locally for an extension:

Run the standalone React DevTools app

The easiest way to start the standalone app is:

npx react-devtools

You can also install the NPM package globally with npm or yarn and run the executable from your shell if you'd like. Instructions for that are in the readme.

Include React DevTools script

In the HTML for the extension interface, insert the following script tag:

<script src="http://localhost:8097"></script>

The standalone app will also provide these instructions, with an alternative using your local IP address, and allow you to copy and paste the HTML for this script tag.

Note that this script needs to be loaded before the script that loads react-dom. The bottom of the <head> is recommended in the React DevTools docs.

Modify the extension's CSP

Chrome extensions enforce a very strict content security policy (CSP) by default. To allow the React DevTools script, you'll need to add or modify the existing content_security_policy key in the manifest.json file:

"content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment