Redux-devtools-extension: How to use Redux DevTools in a chrome extension

[sthiago]

Hi there,

I'm developing a chrome extension and the redux-devtools-extension doesn't seem to find the store. The window.__REDUX_DEVTOOLS_EXTENSION__ (or window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) are not getting defined, from what I could gather. I'm guessing the problem is that redux-devtools-extensions doesn't work on chrome-extension://<extensionID>/<page> urls. Is there a way to fix that?

My configuration is as follows:

// configureStore.js
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export default () => {
  const store = createStore(
    combineReducers({
      // my reducers
    }),
    composeEnhancers(applyMiddleware(thunk))
  )

  return store
}

[email protected]
[email protected]

Thanks!

[markbiek]

I'm in the same situation and would love to know if it's possible to use Redux DevTools in a Chrome extension.

[seyaobey]

Any advance on this topic? I am having the same problem

[markbiek]

@seyaobey I was able to solve it using the following approach

https://viastudio.com/debugging-a-reactjs-chrome-extension/

I also had to run remotedevtools locally: remotedev --hostname=localhost --port=8000 and change the Settings of the RemoteDev popup to Use custom (local) server

[ackmanx]

@markbiek Thanks for the blog post! Setting up remote-redux-devtools worked very smoothly.