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

Question

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

Answer 1

就像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 目录，如有必要；
修改函数中的值，在我的例子中是版本

Answer 2

正如 OP 在 , using the copy-webpack-plugin in the webpack.config.js file is the way to go if you're building your Chrome Extension with React. However, if your React app is based on create-react-app, directly editing the webpack.config.js file (which is located in node_modules/react-scripts/config) is not recommended 中提到的那样。

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

使用 npm i @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 扩展的版本名称。

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

Environment variables in manifest.json - Chrome Extension

environment-variables

google-chrome-extension

reactjs

manifest.json