React+Redux+TypeScript Chrome扩展Popup脚本Redux Devtools提示No Store Found

问题诱因 #

1. Webpack配置固定为production模式：生产模式下会自动执行Tree Shaking、代码压缩逻辑，redux-devtools-extension的运行时通信代码会被当作冗余开发代码剔除，无法向Redux DevTools扩展暴露Store实例。
2. 未正确配置环境变量：redux-devtools-extension依赖process.env.NODE_ENV判断当前运行环境，自定义Webpack配置未显式注入该变量时，默认按生产环境处理，会禁用调试能力。
3. 调试入口选择错误：Chrome扩展的Popup是独立的沙箱上下文，和当前打开的普通网页上下文完全隔离，在普通网页的DevTools中无法识别Popup内部的Store实例。
4. remote-redux-devtools本身的设计限制：该工具默认用于Node、React Native等非浏览器环境的远程调试，需要本地启动对应的DevTools服务端才能同步数据，未启动服务时自然只能识别到实例、无法拿到Store数据。

解决办法 #

1. 调整Webpack配置，区分开发/生产环境
   首先安装跨平台环境变量工具cross-env作为开发依赖：

npm i cross-env -D

修改webpack.config.js配置：

const path = require("path");
const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";

module.exports = {
  entry: {
    popup: path.resolve(__dirname, "../src/index.tsx"),
    background: path.resolve(__dirname, "../src/background.ts"),
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: "public", to: "." }],
    }),
    // 注入环境变量
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.ts(x)?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: "url-loader",
            options: {
              mimetype: "image/png",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  // 动态设置模式
  mode: isDev ? "development" : "production",
  // 开发环境开启sourcemap方便调试
  devtool: isDev ? "cheap-module-source-map" : undefined,
  output: {
    path: path.resolve(__dirname, `../dist`),
    filename: "[name].js",
  },
};

修改package.json的脚本配置：

"scripts": {
  "lint": "npx eslint {src,public}/**/**/*.[jt]s -c config/.eslintrc.js --ignore-path .gitignore .",
  "lint:style": "npx stylelint {src,public}/**/**/*.css --config config/.stylelintrc.json",
  "start": "cross-env NODE_ENV=development webpack --config config/webpack.config.js --watch --progress",
  "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress"
},

2. 调整Store初始化逻辑，改回redux-devtools-extension，仅开发环境加载调试工具：

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./store/reducers";

// 仅开发环境启用Redux DevTools
const enhancer = process.env.NODE_ENV === "development" ? composeWithDevTools({
  name: "扩展Popup Store",
  serialize: true
}) : undefined;

export const store = createStore(rootReducer, enhancer);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

3. 正确打开调试工具：
   点击扩展图标弹出Popup窗口后，右键点击Popup的空白区域，选择「审查元素」打开Popup专属的DevTools窗口，该窗口内的Redux标签页即可正常识别到Store实例。

内容的提问来源于stack exchange，提问作者lbragile