Chrome扩展开发中如何用环境变量保护API密钥？能否存入manifest.json？

一、用环境变量避免API密钥暴露 #

开发阶段 #

• 借助构建工具（Webpack、Vite、Create React App等）实现环境变量注入：
  1. 在项目根目录创建.env文件，写入密钥：VITE_API_KEY=你的实际密钥（不同工具前缀不同，比如Create React App用REACT_APP_开头）
  2. 在代码中直接引用变量，比如Vite项目里用import.meta.env.VITE_API_KEY，CRA用process.env.REACT_APP_API_KEY
  3. 把.env文件加入.gitignore，绝对不要提交到代码仓库，防止密钥泄露

生产阶段 #

• 注意：Chrome扩展的前端代码最终是明文暴露的，哪怕用环境变量注入，构建后密钥还是会出现在打包后的代码里。所以更安全的方案是搭建后端代理：
  1. 自己写一个简单的后端接口，由后端存储并携带API密钥去调用第三方服务
  2. 扩展的前端代码只请求自己的后端接口，不直接接触密钥，从根源避免泄露

二、能不能把API密钥放入manifest.json？ #

绝对不要这么做！
manifest.json是Chrome扩展的核心配置文件，任何人都可以通过扩展管理页面查看它的源码，密钥会直接暴露。而且manifest本身不支持环境变量注入，硬写进去的话，不管是开发还是生产环境，密钥都是明文可见的，完全没有安全性可言。

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