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:

1. “No store found” when using Redux chrome extension"
2. "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

It's 2024 and, assuming you're following the latest recommended redux setup with Typescript, the configuration is going to be a little different now. I am using Extension.js and I was able to get the following steps working for getting Redux Devtools to show the state within my React/Redux Chrome extension modifying webpages:

1. Install redux devtools cli and remote server

npm i -D @redux-devtools/cli @redux-devtools/remote

2. Add an npm script to run a remote devtools server in your package.json

"scripts": {
  ...
  "start-redux-devtools": "redux-devtools --hostname=localhost --port=8001 --open",
  ...
}

3. Modify your store.ts file to inject a devToolsEnhancer that can synchronize store updates with the devTools remote server:

import { devToolsEnhancer } from "@redux-devtools/remote";

export const store = configureStore({
  reducer: {
    mySlice: mySliceReducer,
    ...
  },
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(devToolsEnhancer({ realtime: true, hostname: "localhost", port: 8001 }))});

4. Run the main development server in a terminal:

npm run dev // Since I'm using Extension.js, they have already provided a convenient dev server in their react+typescript template

5. Run the redux-devtools remote server in another terminal:

npm run start-redux-devtools

This will open up a window with redux devtools in it. Click the "Settings" tab at the top, select "use local (custom) server", adjust the port to 8001, and click "Connect":

You should see the @@INIT action back in the "Actions" tab. Perform some actions to update the redux state and those should show as well.

---

Note: I tried directly using the Redux Devtools extension from the Chrome web store within the browser developer tools, but it didn't allow me to connect to the redux store within the Chrome extension. It seems only the standalone window launched by the npm script works.

However, if you are using VSCode, there is a VSCode extension "Redux Devtools" that will embed the Redux Devtools UI right in your IDE so you don't have to deal with 3 windows. After downloading the extension, just change the settings to point to your local server and then remove the --open flag in the npm script so it doesn't launch its own standalone window.

Answer 2

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.

Answer 3

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.