How to use redux-devtools for developing a Chrome extension?

[Callum Locke]

I'm using Redux in a Chrome extension. So my page URL is something like chrome-extension://iotdiodfailagncdjagoplfohimbewka/popup/popup.html.

The window.__REDUX_DEVTOOLS_EXTENSION__ does not seem to exist.

Is there any way to make redux-devtools work in a Chrome extension page? I enabled "Allow access to file URLs" but it doesn't seem to help.

[Alexander Kurganov]

@callumlocke

Install @redux-devtools/remote and @redux-devtools/cli

yarn add @redux-devtools/remote && yarn global add @redux-devtools/cli

Then add devToolsEnhancer

const store = configureStore({
	reducer: rootReducer,
	preloadedState: initialState,
	middleware: [thunk],
	devTools: process.env.NODE_ENV !== 'production',
+	enhancers: [devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 1234 })],
})

Then change your start script

"scripts": {
-    "start:dev": "npm run dev",
+    "start:dev": "npm run dev & redux-devtools --hostname=localhost --port=1234 --open",
}

[Alexander Kurganov]

Sometimes it is necessary in the opened Electron window, go to Settings, check the box "use local (custom) server", enter hostname and port and click the Connect button.

[Callum Locke]

This helped me figure it out, thanks very much