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

Question

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

background.js我有一个使用此api_base_url的fetch(我们也开发了 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/'

这也是我需要将不同的URL列入白名单manifest.jsonpermissions

的问题，例如

"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