How to run Redux DevTools Extension INSIDE Chrome Extension running React? - reactjs

Question

The big issue i'm facing is I'm seeing the error "No store found" when trying to access my redux store in the Redux DevTools Extension WHILE my React app is running inside a Chrome Extension.
I've seen a few questions on SO about similar errors, like:
“No store found” when using Redux chrome extension"
"How to add Redux DevTools Extension to my react-redux store?"
Most of the answers to these questions relate to specifying the correct variables like using window.__REDUX_DEVTOOLS_EXTENSION__ instead of devToolsExtension (after the extension was upgraded), or installing the npm package redux-devtools-extension.
My problem is different - if I run my a React app (in development mode), outside of the Chrome Extension (a.k.a. not through the Chrome Extension's options page), I find that the Redux DevTools Extension works fine for me. However, as I mentioned before, when I run the React app from within the Chrome Extension options page, the Redux DevTools Extension cannot find the store.
Here is my index.js file that I use inside the options page:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import App from './App';
import rootReducer from './store/reducers/root';
//
const composeEnhancers = process.env.NODE_ENV === 'development'
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: null
|| compose;
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));
const app = (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
I believe the error has to do with the fact that that I'm running the React App from within the options page of my Chrome Extension. I've found that window.__REDUX_DEVTOOLS_EXTENSION__ is undefined from the Chrome Extension options page, but that window.__REDUX_DEVTOOLS_EXTENSION__ variable is visible and accessible on normal pages. Is there any tried and tested way of making window.__REDUX_DEVTOOLS_EXTENSION__ available in the options page of a Chrome Extension?

Answer 1

You can use Remote Redux Devtools in this case.
Add this to your store creation (yarn add --dev remote-redux-devtools):
import devToolsEnhancer from "remote-redux-devtools";
const store = createStore(
popupReducer,
devToolsEnhancer({
hostname: "localhost",
port: 8000,
realtime: true
})
);
You will also need a remotedev server, I went with a local one:
yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000
Now you can connect and monitor your store using the chrome extension, click the Remote button, go to settings and click "Use custom (local) server" there and you should see your store in realtime.