feat: generate a separate dev build

package.json

@@ -147,10 +147,12 @@
     "copy-webpack-plugin": "8.1.1",
     "cross-env": "7.0.3",
     "crypto-browserify": "3.12.0",
+    "deepmerge": "4.2.2",
     "esbuild-loader": "2.13.0",
     "eslint": "7.26.0",
     "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-react-hooks": "4.2.0",
+    "generate-json-webpack-plugin": "2.0.0",
     "html-webpack-plugin": "5.3.1",
     "jest": "26.6.3",
     "jest-circus": "26.6.3",

scripts/generate-manifest.js

@@ -0,0 +1,76 @@
+const deepMerge = require('deepmerge');
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+const manifest = {
+  author: 'Hiro PBC',
+  description:
+    'Stacks Wallet. Use the Stacks blockchain to access privacy-friendly apps, and keep data in your control.',
+  permissions: ['activeTab'],
+  manifest_version: 2,
+  background: {
+    scripts: ['background.js'],
+    persistent: true,
+  },
+  web_accessible_resources: ['inpage.js'],
+  browser_action: {
+    default_title: 'Stacks',
+    default_popup: 'extension.html',
+  },
+  commands: {
+    _execute_browser_action: {
+      suggested_key: {
+        default: 'Ctrl+Shift+B',
+        mac: 'MacCtrl+Shift+B',
+      },
+      description: 'Opens Stacks App',
+    },
+  },
+  options_ui: {
+    page: 'full-page.html',
+    open_in_tab: true,
+  },
+  content_scripts: [
+    {
+      js: ['message-bus.js'],
+      matches: ['*://*/*'],
+    },
+  ],
+  browser_specific_settings: {
+    gecko: {
+      id: '{e22ae397-03d7-4622-bd8f-ecaca8c9b277}',
+    },
+  },
+};
+
+const devManifest = {
+  name: 'Stacks Wallet Dev',
+  content_security_policy:
+    "script-src 'self' 'unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';",
+  icons: {
+    128: 'assets/connect-logo/Stacks128w-dev.png',
+    256: 'assets/connect-logo/Stacks256w-dev.png',
+    512: 'assets/connect-logo/Stacks512w-dev.png',
+  },
+  browser_action: {
+    default_icon: 'assets/connect-logo/Stacks128w-dev.png',
+  },
+};
+
+const prodManifest = {
+  name: 'Stacks Wallet',
+  content_security_policy:
+    "script-src 'self' 'wasm-eval'; object-src 'none'; frame-src 'none'; frame-ancestors 'none';",
+  icons: {
+    128: 'assets/connect-logo/Stacks128w.png',
+    256: 'assets/connect-logo/Stacks256w.png',
+    512: 'assets/connect-logo/Stacks512w.png',
+  },
+  browser_action: {
+    default_icon: 'assets/connect-logo/Stacks128w.png',
+  },
+};
+
+module.exports = version => {
+  return deepMerge.all([{ version }, manifest, IS_DEV ? devManifest : prodManifest]);
+};

src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Stacks Wallet",
+  "name": "<% NAME %>",
   "author": "Hiro PBC",
   "version": "<% VERSION %>",
   "description": "Stacks Wallet. Use the Stacks blockchain to access privacy-friendly apps, and keep data in your control.",

webpack/dev-server.js

@@ -17,6 +17,7 @@ const config = require('./webpack.config.dev');
 const excludeEntriesToHotReload = ['message-bus.js'];
 
 const NODE_ENV = process.env.NODE_ENV;
+
 const PORT = process.env.PORT || '8080';
 
 Object.keys(config.entry).forEach(entryName => {

webpack/webpack.config.base.js

@@ -2,9 +2,11 @@
 const path = require('path');
 const webpack = require('webpack');
 const { version: _version } = require('../package.json');
+const generateManifest = require('../scripts/generate-manifest');
 
 // plugins
 const WebpackBarPlugin = require('webpackbar');
+const GenerateJsonPlugin = require('generate-json-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -185,33 +187,18 @@ const config = {
       filename: 'full-page.html',
       ...HTML_PROD_OPTIONS,
     }),
+    new GenerateJsonPlugin(
+      'manifest.json',
+      generateManifest(VERSION),
+      undefined,
+      2 // space tabs
+    ),
     new CopyWebpackPlugin({
       patterns: [
         {
           from: path.join(SRC_ROOT_PATH, '../', 'public', 'assets'),
           to: path.join(DIST_ROOT_PATH, 'assets'),
         },
-        {
-          from: path.join(SRC_ROOT_PATH, 'manifest.json'),
-          to: path.join(DIST_ROOT_PATH, 'manifest.json'),
-          toType: 'file',
-          transform(content, path) {
-            const csrTag = '<% DEV_CSR %>';
-            const objSrcTag = '<% DEV_OBJECT_SRC %>';
-            const versionTag = '<% VERSION %>';
-            content = content.toString();
-            if (IS_DEV) {
-              content = content.replace(csrTag, " 'unsafe-eval'");
-              content = content.replace(objSrcTag, "'self'");
-            } else {
-              content = content.replace(csrTag, " 'wasm-eval'");
-              content = content.replace(objSrcTag, "'none'");
-            }
-            console.info('Extension Version:', VERSION);
-            content = content.replace(versionTag, VERSION);
-            return Buffer.from(content);
-          },
-        },
         { from: 'node_modules/argon2-browser/dist/argon2.wasm', to: '.' },
       ],
     }),

yarn.lock

@@ -9096,6 +9096,11 @@ fx-runner@1.1.0:
     which "1.2.4"
     winreg "0.0.12"
 
+generate-json-webpack-plugin@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-json-webpack-plugin/-/generate-json-webpack-plugin-2.0.0.tgz#cf1fb394da2c8dd8d3c15bf25ba31badba0a5adb"
+  integrity sha512-WVEHXiES7YwjLAjWquC5+IspZM4Pwtx1yHlHTBXHkp38HVjnHJo29PxLniWPSyiB539iDgeAcMNUBStrixx3Jw==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"