谷歌浏览器扩展中如何配置及访问环境变量？支持.env文件吗？

Chrome扩展本身不原生支持.env文件，但可以通过构建工具或原生代码实现类似常规应用的环境变量管理，以下是具体方案：

一、使用构建工具（推荐）：通过.env注入变量 #

结合Vite、Webpack这类工具，能完全复刻React项目中process.env的使用体验：

1. 配置.env文件 #

在项目根目录创建环境配置文件，按环境区分：

# .env.development（开发环境）
REACT_APP_BASE_URL=http://dev.example.com
REACT_APP_GOOGLE_API_KEY=dev_key_123

# .env.production（生产环境）
REACT_APP_BASE_URL=https://prod.example.com
REACT_APP_GOOGLE_API_KEY=prod_key_456

2. 配置构建工具 #

Vite项目

Vite会自动加载.env文件，只需在配置中把变量注入全局：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'process.env.REACT_APP_BASE_URL': JSON.stringify(process.env.REACT_APP_BASE_URL),
    'process.env.REACT_APP_GOOGLE_API_KEY': JSON.stringify(process.env.REACT_APP_GOOGLE_API_KEY),
    // 按需添加其他变量
  },
  // 补充Chrome扩展打包配置（如输出目录、manifest处理）
});

Webpack项目

用webpack.DefinePlugin结合dotenv解析.env文件：

const webpack = require('webpack');
const dotenv = require('dotenv');
// 根据当前环境加载对应.env文件
const env = dotenv.config({ path: `.env.${process.env.NODE_ENV}` }).parsed;

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_BASE_URL': JSON.stringify(env.REACT_APP_BASE_URL),
      'process.env.REACT_APP_GOOGLE_API_KEY': JSON.stringify(env.REACT_APP_GOOGLE_API_KEY),
    }),
  ],
  // 其他Webpack配置
};

3. 在扩展代码中访问 #

和常规项目一样直接调用：

console.log(process.env.REACT_APP_BASE_URL);
console.log(process.env.REACT_APP_GOOGLE_API_KEY);

二、无构建工具的原生方案 #

如果是纯原生JS编写的扩展，可通过以下方式实现：

1. 按环境手动注入全局变量 #

在入口文件（如background.js）中先判断环境，再定义变量：

// 通过manifest标识判断开发/生产环境（比如name字段带[DEV]）
const isDev = chrome.runtime.getManifest().name.includes('[DEV]');

// 定义全局环境变量对象
window.chromeEnv = {
  REACT_APP_BASE_URL: isDev ? 'http://dev.example.com' : 'https://prod.example.com',
  REACT_APP_GOOGLE_API_KEY: isDev ? 'dev_key_123' : 'prod_key_456'
};

2. 在其他文件中访问 #

直接调用全局变量：

console.log(window.chromeEnv.REACT_APP_BASE_URL);

3. 动态变量可选：用Chrome存储持久化 #

如果需要动态修改变量，可借助chrome.storage.local：

// 初始化存储（仅首次运行或环境切换时执行）
chrome.storage.local.set({
  env: {
    REACT_APP_BASE_URL: 'http://dev.example.com',
    REACT_APP_GOOGLE_API_KEY: 'dev_key_123'
  }
});

// 访问时读取
chrome.storage.local.get('env', (result) => {
  console.log(result.env.REACT_APP_BASE_URL);
});

三、关键注意事项 #

• 敏感信息（如API密钥）不要直接硬编码在生产代码中，建议通过后端代理转发请求，避免泄露。
• 使用构建工具时，要确保打包后的代码已完成变量替换，避免出现未解析的process.env字符串。
• 原生方案中，全局变量建议用独特命名空间（如chromeEnv），避免和其他脚本冲突。

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