如何在React+Webpack构建的Chrome扩展public目录background.js中访问.env变量

因为public目录下的文件会被Webpack直接复制到输出目录，不会经过编译处理，所以无法直接使用process.env变量。以下是两种可行的实现方案：

方案一：将background.js移入src目录，由Webpack编译处理 #

这是最直接的方式，让Webpack为background.js注入环境变量：

1. 移动文件：把public/background.js迁移到src/background.js。
2. 修改Webpack配置：
   如果使用Create React App，需要先执行npm run eject（或用react-app-rewired跳过eject），然后修改webpack.config.js：
   • 添加background的入口：

     entry: {
       main: paths.appIndexJs,
       background: './src/background.js' // 新增background入口
     }
     

   • 确保output支持多入口输出：

     output: {
       filename: 'static/js/[name].js', // 保留[name]占位符，生成background.js
       path: paths.appBuild,
       clean: true
     }
     

   • 注入环境变量：使用DefinePlugin或EnvironmentPlugin

     // 方式1：DefinePlugin
     new webpack.DefinePlugin({
       'process.env.REACT_APP_MY_VAR': JSON.stringify(process.env.REACT_APP_MY_VAR)
     })
     // 方式2：EnvironmentPlugin（更简洁，自动读取环境变量）
     new webpack.EnvironmentPlugin(['REACT_APP_MY_VAR'])
     

3. 更新manifest.json：将background脚本路径指向编译后的文件，比如：

   "background": {
     "service_worker": "static/js/background.js"
   }
   

4. 在background.js中使用变量：

   console.log(process.env.REACT_APP_MY_VAR); // 直接访问
   

方案二：保留public目录结构，生成独立的环境变量配置文件 #

如果不想移动background.js，可以通过生成一个包含环境变量的配置文件，让background.js加载它：

1. 创建环境变量导出文件：在src/env-config.js中写入：

   // 导出环境变量
   export const envVars = {
     API_URL: process.env.REACT_APP_API_URL,
     DEBUG: process.env.REACT_APP_DEBUG === 'true'
   };
   

2. Webpack打包该文件：在Webpack配置的entry中添加：

   entry: {
     main: paths.appIndexJs,
     envConfig: './src/env-config.js'
   }
   

3. 在background.js中加载配置：通过Chrome的runtime API加载编译后的配置文件：

   (async () => {
     // 获取配置文件的URL
     const configUrl = chrome.runtime.getURL('static/js/envConfig.js');
     // 动态导入配置
     const { envVars } = await import(configUrl);
     // 使用环境变量
     console.log(envVars.API_URL);
   })();
   

4. 更新manifest权限：确保background脚本有足够权限（一般默认即可），同时确认manifest中background的脚本包含自身路径。

额外提示 #

• 环境变量名必须以REACT_APP_开头（Create React App默认规则），否则会被忽略。
• 如果使用.env文件管理变量，可配合dotenv-webpack插件，简化配置：

  const Dotenv = require('dotenv-webpack');
  plugins: [new Dotenv()]
  

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