firefox-addon-webextensions - 使用 web-ext 进行不同的开发和构建配置
问题描述
我正在使用浏览器扩展项目,并希望background.js
在开发期间和构建期间使用不同的 URL。我想这样做,而不必记住在开发和构建之间更改代码。对于服务器项目,我只需使用 dotenv/环境变量,但这不适用于有效运行客户端的扩展。
在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
我需要将不同 URL 列入白名单的问题,permissions
例如
"permissions": [
"storage",
"tabs",
"https://a.domain.com/v1/*",
"http://127.0.0.1:8000/v1/*"
]
这不是每个用户的运行时选项,因此browser.storage
也不options.js
是我们想要的。
解决方案
我已经想通了,但基本的答案是添加 webpack 并用于dotenv-webpack
入口文件,如. 这些插件会将出现的字符串替换为from 的值。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
推荐阅读
- python - Python Pandas - 将列表转换为系列
- c++ - 在 C/C++ 中计算一维信号的互相关
- java - 如何在支持多种屏幕尺寸的android中截屏后立即添加图标或水印图像
- python - 如何通过仅获取一些键从另一个字典列表创建字典列表:python
- javascript - 单击按钮时从对象数组中删除一个条目
- php - Laravel 外观 Slug 不适用于非英语?
- macos - 无法在 Ansible 中运行 CURL 命令
- mysql - 如何在gorm模型中传递动态表名
- unity3d - 使用后置摄像头进行 AR,同时使用前置摄像头捕获输入
- python - 正确识别字符串中的表情符号(Python)