Chrome扩展开发：如何仅为测试环境Mock Storage API？

针对你遇到的「仅在弹窗单独测试时Mock Chrome Storage API，且确保Mock代码不进入生产构建」的问题，下面是几个实用的落地方案：

方案一：Webpack环境变量+条件导入（推荐） #

利用Webpack的环境变量区分构建环境，在业务代码中动态判断是否加载Mock，生产环境下Tree Shaking会自动剔除Mock相关代码。

1. 编写独立Mock文件 #

创建chrome-storage-mock.js，实现完整的Mock逻辑：

// chrome-storage-mock.js
export const mockChrome = {
  storage: {
    sync: {
      // 模拟get方法，支持单个key或数组key
      get: (keys, callback) => {
        const mockData = { username: "test_user", theme: "dark" };
        if (typeof keys === "string") {
          callback({ [keys]: mockData[keys] });
        } else if (Array.isArray(keys)) {
          const result = {};
          keys.forEach(key => result[key] = mockData[key]);
          callback(result);
        } else {
          callback(mockData);
        }
      },
      // 模拟set方法
      set: (data, callback) => {
        console.log("[Mock] 存储数据:", data);
        callback?.();
      }
      // 按需实现其他storage API（如remove、clear）
    }
  }
};

2. 业务代码中条件加载Mock #

在popup.js开头添加环境判断逻辑，仅在开发测试环境且无Chrome API时挂载Mock：

// popup.js
// 仅在开发环境+非扩展环境下加载Mock
if (process.env.NODE_ENV === "development" && !window.chrome?.storage) {
  import("./chrome-storage-mock.js").then(({ mockChrome }) => {
    window.chrome = mockChrome;
  });
}

// 正常业务代码（无需修改）
chrome.storage.sync.get(["username", "theme"], (result) => {
  console.log("获取存储数据:", result);
  // 后续业务逻辑
});

3. Webpack配置环境变量 #

修改webpack.config.js，注入环境变量并开启Tree Shaking：

const webpack = require('webpack');

module.exports = (env) => {
  const isProduction = env.production === true;

  return {
    // 其他基础配置...
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
      })
    ],
    optimization: {
      usedExports: true, // 开启Tree Shaking
      minimize: isProduction
    }
  };
};

构建命令 #

• 开发测试（用于单独打开网页）：webpack --env development
• 生产构建：webpack --env production

方案二：Webpack多入口区分 #

创建两个入口文件，分别对应生产和开发测试场景，彻底隔离Mock代码：

1. 开发入口文件 #

创建popup-dev.js，先导入Mock再加载业务代码：

// popup-dev.js
import "./chrome-storage-mock.js";
import "./popup.js";

2. Webpack配置多入口 #

修改webpack.config.js，根据环境切换入口：

module.exports = (env) => {
  return {
    entry: env.production ? "./src/popup.js" : "./src/popup-dev.js",
    // 其他配置...
  };
};

生产构建只会打包popup.js，Mock代码完全不会进入生产包。

方案三：HTML文件隔离 #

用两个HTML文件分别对应测试和生产场景，无需修改Webpack配置：

1. 开发测试HTML #

创建popup-dev.html，先引入Mock脚本再加载业务代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Popup Dev</title>
</head>
<body>
  <script src="./chrome-storage-mock.js"></script>
  <script src="./dist/popup.js"></script>
</body>
</html>

2. 生产HTML #

popup.html仅引入打包后的业务代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Popup</title>
</head>
<body>
  <script src="./dist/popup.js"></script>
</body>
</html>

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