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 替換了參數文件中的版本：

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=xx”一樣構建，webpack 做我需要的。

PS：如果你要使用這個，記得更改：

• manifest.json 目錄，如有必要；

• 修改 function 中的值，在我的情況下是版本

Answer 2

正如 OP 在她的回答中提到的那樣，如果您使用 React 構建 Chrome 擴展程序，則使用webpack.config.js文件中的copy-webpack-plugin是 go 的方法。 但是，如果您的 React 應用基於create-react-app ， 則不建議直接編輯webpack.config.js文件（位於node_modules/react-scripts/config中）。

在這種情況下，請使用craco ，它是一個 npm package ，可用於自定義基於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 擴展程序的版本名稱。