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

Posted 2023-02-19

【中文标题】如何在运行 React 的 Chrome 扩展中运行 Redux DevTools 扩展？

【英文标题】：How to run Redux DevTools Extension INSIDE Chrome Extension running React?

【发布时间】：2018-12-02 20:01:00

【问题描述】：

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

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

“No store found” when using Redux chrome extension" "How to add Redux DevTools Extension to my react-redux store?"

这些问题的大部分答案都与指定正确的变量有关，例如使用 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 可能实际上并不支持它，但理论上它可以这样工作，对吧？？

是的，如果两个扩展都支持，跨扩展消息传递可以工作。

【参考方案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 连接和监控您的商店，点击远程按钮，进入设置并点击“使用自定义（本地）服务器”，您应该可以实时看到您的商店。