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

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:

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?

Extensions can't run their scripts inside another extension's page context which is why Redux extension is unable to define a property on `window`. — wOxxOm, Jun 23 '18 at 17:49
@wOxxOm oh bummer... I guess that makes sense... So do you think a possible workaround would be for the extensions to pass messages back and forth? I've seen this in the chrome extension docs but haven't used it. Also it's probably not actually supported in the `Redux DevTools Extension`, but it could theoretically work that way, right?? — Blundering Philosopher, Jun 23 '18 at 23:55
Yeah, cross-extension messaging could work if both extensions support it. — wOxxOm, Jun 24 '18 at 05:25

score 2 · Answer 1 · answered Apr 21 '19 at 17:15

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.

score 0 · Answer 2 · answered Apr 18 '23 at 20:54

I made it by installing "@redux-devtools/cli" and "@redux-devtools/remote" packages. Then opening external redux devtools instance and devserver with redux-devtools --hostname=localhost --port=8000 --open. Then injecting the enhancer with:

import {configureStore} from "@reduxjs/toolkit";
import testStore from "./testStore";
import {devToolsEnhancer} from "@redux-devtools/remote";

const store = configureStore({
        reducer: testStore.reducer,
        enhancers: [devToolsEnhancer({
            name: "Redux", hostname: "localhost", port: 8000
        })]
    });

For some reason, I couldn't connect from the Redux Devtools extension for popup/newtab pages. Only external instance worked for me.

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

2 Answers2