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

问题描述 投票:0回答:1

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

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

我也尝试过将.env文件添加到带有Web扩展名的目录的根目录。

javascript node.js firefox-webextensions browser-plugin web-ext
1个回答
0
投票

因为该扩展正在“客户端”运行,所以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>
© www.soinside.com 2019 - 2024. All rights reserved.