Question

我想构建一个使用某些AWS服务的Web扩展，并且我不想将API密钥上传到git，但是，我似乎无法以通常的方式传递我的API密钥。例如：

如果我运行命令IDENTITY_POOL_ID=<id_pool_id> web-ext run，我通常希望变量在process.env.IDENTITY_POOL_ID中可用，但是process.env为空。

我还尝试将.env文件添加到具有Web扩展名的目录的根目录中。

Answer 1

由于扩展程序正在运行，因此“客户端” process.env不可用。在浏览器中运行的扩展无法访问环境变量。相反，在这种情况下，您希望扩展程序使用browser.storage，并让用户（您可能）在选项页面上设置扩展程序的安装值。

例如这是一个options.js文件；

function saveOptions(e) {
  var api_key = document.querySelector("#api_key").value
  browser.storage.local.set({"api_key": api_key}).then(restoreOptions)  
  e.preventDefault();
}

function restoreOptions() {
  browser.storage.local.get("api_key").then(function(data) {
    if (typeof data['api_key'] != 'undefined') {
      var api_key = data['api_key']
      document.querySelector("#api_key").value = api_key
    }
  })

}

document.addEventListener('DOMContentLoaded', restoreOptions)
document.querySelector("form").addEventListener("submit", saveOptions)

这是对应的options.html;

<!DOCTYPE html>

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Options</titlE>
  <meta charset="utf-8">
</head>

<body>
  <form>
    <label for="api_key">API Key:</label>
    <input type="text" id="api_key">
    <button type="submit">Save</button>
  </form>
  <script src="options.js"></script>
</body>

</html>

如何将环境变量传递给Web扩展

1 个答案: