使用web-ext进行不同的开发和构建配置 [英] Different development and build configuration with web-ext

问题描述

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

I am working with a browser extension project and want to have a different URL used in background.js during development time and build time. I want to do this without having to remember to change the code between development and build. With a server project I'd simply use dotenv/environment variables but that's not available to extensions which effectively run client side.

在background.js中，我有一个fetch使用此api_base_url(我们也在开发API)；

In background.js I have a fetch using this api_base_url (we develop the API too);

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

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

Before I build (web-ext build) I have to manually that to something like;

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

理想情况下是这样的

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

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

and I'd have a .env in local dev of;

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列入白名单.

This is also a problem in manifest.json where I need to whitelist the different URLs in permissions e.g.

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

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

This isn't a run-time per-user option so browser.storage and options.js isn't what we're looking for.

推荐答案

我已经弄清楚了，但是基本的答案是添加webpack并将dotenv-webpack用于条目文件，例如background.js和copy-webpack-plugin用于非条目manifest.json之类的文件.这些插件会将process.env.YOUR_VARIABLE_NAME出现的字符串替换为process.env.YOUR_VARIABLE_NAME中的值.

I have figured this out but the basic answer is to add webpack and use dotenv-webpack for entry files like background.js and copy-webpack-plugin for non-entry files like manifest.json. These plugins will replace string occurrences of process.env.YOUR_VARIABLE_NAME with the value from process.env.YOUR_VARIABLE_NAME.

这确实发生了，我花了一些时间来理解它.

This literally happens and it took me a few tries to understand it.

// .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配置；

Here is the webpack config;

// ./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

I have made a complete working example here; https://github.com/paulmwatson/web-ext-environments

这篇关于使用web-ext进行不同的开发和构建配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！