使用 web-ext 进行不同的开发和构建配置

Question

我正在处理一个浏览器扩展项目，并希望在开发和构建期间在 background.js 中使用不同的 URL。我想这样做而不必记住在开发和构建之间更改代码。对于服务器项目，我只是使用 dotenv/environment 变量，但这不适用于有效运行客户端的扩展。

在background.js中我有一个fetch使用这个api_base_url（我们也开发了API）；

...
const api_base_url = 'http://127.0.0.1:8000/v1/'
...

在构建 (web-ext build) 之前，我必须手动将其设置为类似的东西；

...
const api_base_url = 'http://a.domain.com/v1/'
...

理想情况下应该是这样的；

...
const api_base_url = ENV['API_BASE_URL']
...

并且我在本地开发中有一个 .env；

API_BASE_URL='http://127.0.0.1:8000/v1/'

和.env.production（或.env.build）的；

API_BASE_URL='http://a.domain.com/v1/'

这也是 manifest.json 中的一个问题，我需要将 permissions 中的不同 URL 列入白名单，例如

"permissions": [
    "storage",
    "tabs",
    "https://a.domain.com/v1/*",
    "http://127.0.0.1:8000/v1/*"
  ]

这不是每个用户运行次选项，因此 browser.storage 和 options.js 不是我们要找的。

Answer 1

我已经弄明白了，但基本的答案是添加 webpack 并使用 dotenv-webpack 用于入口文件，如 background.js 和 copy-webpack-plugin 用于非入口文件，如 manifest.json.这些插件会将 process.env.YOUR_VARIABLE_NAME 的字符串替换为 process.env.YOUR_VARIABLE_NAME.

中的值

这确实发生了，我尝试了几次才理解它。

// .env
API_BASE_URL='http://127.0.0.1:8000/v1/'

// ./background.js
const api_base_url = process.env.API_BASE_URL

// manifest.json
"permissions": [
  "tabs",
  "process.env.API_BASE_URL*"
],

// webpack => ./dist/main.js
const api_base_url = 'http://127.0.0.1:8000/v1/'

// webpack => ./dist/manifest.json
"permissions": [
  "tabs",
  "http://127.0.0.1:8000/v1/*"
],

这是 webpack 配置；

// ./webpack.config.js
const CopyPlugin = require('copy-webpack-plugin')
const DotenvPlugin = require('dotenv-webpack')
module.exports = (env) => {
  const dotenvPath = __dirname + '/.env.' + env

  const replaceWithProcessEnv = (content) => {
    for (var key in require('dotenv').config({ path: dotenvPath }).parsed) {
      content = content.replace(new RegExp('process.env.' + key, 'g'), process.env[key])
    }
    return content
  }

  return {
    plugins: [
      new DotenvPlugin(
        {
          path: dotenvPath,
          safe: true
        }
      ),
      new CopyPlugin(
        [
          {
            from: 'src/manifest.json',
            transform(content) {
              return replaceWithProcessEnv(content.toString())
            }
          }
        ]
      )
    ]
  }
}

我在这里做了一个完整的工作示例； https://github.com/paulmwatson/web-ext-environments

使用 web-ext 进行不同的开发和构建配置

Different development and build configuration with web-ext

firefox-addon-webextensions

web-ext