如何在运行 React 的 Chrome 扩展中运行 Redux DevTools 扩展？答案

【问题标题】：How to run Redux DevTools Extension INSIDE Chrome Extension running React?如何在运行 React 的 Chrome 扩展中运行 Redux DevTools 扩展？
【发布时间】：2018-12-02 20:01:00
【问题描述】：

我面临的一个大问题是，当我的 React 应用在 Chrome 扩展程序中运行时，我在尝试访问我在 Redux DevTools Extension 中的 redux 商店时看到了错误 "No store found"。

我在 SO 上看到了一些关于类似错误的问题，例如：

这些问题的大部分答案都与指定正确的变量有关，例如使用 window.__REDUX_DEVTOOLS_EXTENSION__ 而不是 devToolsExtension（在扩展程序升级后），或安装 npm 包 redux-devtools-extension。

我的问题不同 - 如果我在 Chrome 扩展之外（也就是不是通过 Chrome 扩展的 options 页面）运行我的 React 应用程序（在开发模式下），我发现 Redux DevTools 扩展对我来说很好用.但是，正如我之前提到的，当我从 Chrome 扩展程序 options 页面中运行 React 应用程序时，Redux DevTools 扩展程序找不到商店。

这是我在options 页面中使用的index.js 文件：

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'));

我认为该错误与我在 Chrome 扩展程序的 options 页面中运行 React 应用程序有关。我发现window.__REDUX_DEVTOOLS_EXTENSION__ 是来自Chrome 扩展程序options 页面的undefined，但window.__REDUX_DEVTOOLS_EXTENSION__ 变量在普通页面上是可见和可访问的。在 Chrome 扩展程序的 options 页面中是否有任何经过验证的方法可以使 window.__REDUX_DEVTOOLS_EXTENSION__ 可用？

【问题讨论】：

扩展程序无法在另一个扩展程序的页面上下文中运行它们的脚本，这就是 Redux 扩展程序无法在 window 上定义属性的原因。
@wOxxOm 哦，真可惜...我想这是有道理的...那么您认为可能的解决方法是让扩展来回传递消息吗？我在 chrome 扩展文档中看到了这个，但没有使用它。此外，Redux DevTools Extension 可能实际上并不支持它，但理论上它可以这样工作，对吧？？
是的，如果两个扩展都支持，跨扩展消息传递可以工作。

标签： reactjs google-chrome-extension redux

【解决方案1】：

在这种情况下，您可以使用Remote Redux Devtools。

将此添加到您的商店创建中 (yarn add --dev remote-redux-devtools)：

import devToolsEnhancer from "remote-redux-devtools";

const store = createStore(
  popupReducer,
  devToolsEnhancer({
    hostname: "localhost",
    port: 8000,
    realtime: true
  }) 
);

你还需要一个远程开发服务器，我用的是本地的：

yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000

现在您可以使用chrome extension 连接和监控您的商店，点击远程按钮，进入设置并点击“使用自定义（本地）服务器”，您应该可以实时看到您的商店。

【讨论】：