manifest.json 中的环境变量 - Chrome 扩展答案

【问题标题】：Environment variables in manifest.json - Chrome Extensionmanifest.json 中的环境变量 - Chrome 扩展
【发布时间】：2020-03-04 07:32:36
【问题描述】：

是否可以在 Chrome 扩展的 manifest.json 文件中设置环境变量？

【问题讨论】：

最终的 manifest.json 只能使用locale variables。如果您使用 webpack 或其他捆绑器，您可以编写一个钩子来处理源 manifest.json 并在那里解析环境变量。
你发现伊莎贝拉了吗？我也有同样的问题，正准备探索 wOxxOm 关于使用 webpack hooks 的建议。
@PaulWatson 我使用了 wOxxOm 的建议
谢谢 Isabella，我也遇到了 CopyWebpackPlugin 方法； stackoverflow.com/a/60188143/484337

标签： reactjs google-chrome-extension environment-variables manifest.json

【解决方案1】：

正如 OP 在 her answer 中提到的那样，如果您正在使用 React 构建 Chrome 扩展程序，那么在 webpack.config.js 文件中使用 copy-webpack-plugin 是可行的方法。但是，如果你的 React 应用基于 create-react-app，直接编辑 webpack.config.js 文件（位于node_modules/react-scripts/config）是not recommended。

在这种情况下，请使用craco，这是一个npm 包，可用于基于create-react-app 自定义应用程序。以下是你的做法：

使用 npm i @craco/craco 将 craco 安装到您的项目中。
使用 npm i --save-dev copy-webpack-plugin 在您的项目中安装 copy-webpack-plugin 作为开发依赖项。
假设我们正在创建 Chrome 扩展程序的开发和生产版本。假设我们已经在 Chrome 扩展程序的manifest.json 中分配了"version": "0.1.0"。根据构建类型，我们希望在 Chrome 扩展程序的 manifest.json 中相应地分配 version_name 字段，例如，"version_name": "0.1.0 dev" 用于开发，"version_name": "0.1.0" 用于生产。在你的 React 应用程序的 package.json 中，引入两个字段（脚本名称可以是任何你想要的），如下所示：
```
"scripts": {
  ...
  "build-dev": "CRX_ENV=dev craco build", // or "set CRX_ENV=dev&& craco build" in the case of Windows
  "build-prod": "CRX_ENV=prod craco build", // or "set CRX_ENV=prod&& craco build" in the case of Windows
  ...
}
```

在项目的根目录中创建一个名为craco.config.js 的新文件。根据您的需要，在 craco.config.js 文件中执行类似以下操作：

const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  webpack: {
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: "public/manifest.json",
            to: "manifest.json",
            transform(content, path) {
              return modifyManifest(content)
            },
          },
        ],
      }),
    ],
  },
}

function modifyManifest(buffer) {
  const manifest = JSON.parse(buffer.toString())
  if (process.env.CRX_ENV === "dev") {
    manifest.version_name = `${manifest.version} dev`
  } else if (process.env.CRX_ENV === "prod") {
    manifest.version_name = `${manifest.version}`
  }
  const manifestJson = JSON.stringify(manifest, null, 2)
  return manifestJson
}

运行npm run build-dev。它将在您的项目根目录中创建一个名为 build 的文件夹。这个build 文件夹是您解压后的Chrome 扩展程序，您可以使用chrome://extensions 页面上的“加载解压”按钮将其加载到Chrome 中。加载后，您应该可以看到 0.1.0 dev 作为 Chrome 扩展程序的版本名称。
删除上一步创建的build文件夹，运行npm run build-prod，重复同样的步骤。您应该能够在 chrome://extensions 页面上看到 0.1.0 作为 Chrome 扩展程序的版本名称。

【讨论】：

【解决方案2】：

就像 wOxxOm 所说，我使用 webpack 来处理 manifest.json。

就我而言，我需要在清单文件上自动设置版本。

我添加到 webpack 脚本中：

plugins: [
    new CopyWebpackPlugin([
        {
            from: "public/manifest.json", 
            to: "manifest.json",
            transform(content, path) {
                return modify(content)
            }
        }
    ]),
]

修改功能会替换参数文件中的版本：

function modify(buffer) {
  var manifest = JSON.parse(buffer.toString());
  let argv = process.argv[2];
  if (argv) manifest.version = argv.split("=")[1];
  let manifest_JSON = JSON.stringify(manifest, null, 2);
  return manifest_JSON;
}

所以，我像“yarn build --version=x.x”一样构建，webpack 做我需要的。

PS：如果要使用这个，记得改一下：

manifest.json 目录，如有必要；
修改函数中的值，在我的例子中是版本

【讨论】：