feat: use json file and direct modify

config-overrides/index.js

@@ -3,10 +3,11 @@ const webpack = require('webpack')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const fs = require('fs')
-const pkg = require('../package.json')
 
 const src = file => path.join(__dirname, '../', file)
-const argv = require('yargs').argv
+/**
+ * Polyfills that needs to be copied to dist
+ */
 const polyfills = [
     'node_modules/webextension-polyfill/dist/browser-polyfill.min.js',
     'node_modules/webextension-polyfill/dist/browser-polyfill.min.js.map',
@@ -20,11 +21,37 @@ const dist = src('./dist')
 process.env.BROWSER = 'none'
 
 const SSRPlugin = require('./SSRPlugin')
-const WebExtPlugin = require('webpack-web-ext-plugin')
-const ExtensionManifestPlugin = require('webpack-extension-manifest-plugin')
+const WebExtensionHotLoadPlugin = require('webpack-web-ext-plugin')
+const ManifestGeneratorPlugin = require('webpack-extension-manifest-plugin')
+
+/**
+ * All targets available:
+ * --firefox
+ * --firefox=nightly
+ * --firefox-android
+ * --firefox-gecko
+ * --chromium
+ * --wk-webview
+ */
+const target = (argv => ({
+    /** @type {'nightly' | boolean} */
+    Firefox: (argv.firefox || argv['firefox-android'] || argv['firefox-gecko']),
+    /** @type {string | boolean} */
+    FirefoxDesktop: (argv.firefox),
+    /** @type {boolean} */
+    FirefoxForAndroid: (argv['firefox-android']),
+    /** @type {boolean} */
+    StandaloneGeckoView: (argv['firefox-gecko']),
+    /** @type {boolean} */
+    Chromium: (argv.chromium),
+    /** @type {boolean} */
+    WKWebview: (argv['wk-webview']),
+}))(require('yargs').argv)
 
 /**
- * @type {import("webpack").Configuration}
+ * @param config {import("webpack").Configuration}
+ * @param env {'development' | 'production'}
+ * @returns {import("webpack").Configuration}
  */
 function override(config, env) {
     // CSP bans eval
@@ -68,48 +95,46 @@ function override(config, env) {
         })
     }
 
-    if (argv.firefox) {
+    // Loading debuggers
+    if (target.FirefoxDesktop) {
         config.plugins.push(
-            new WebExtPlugin({
+            new WebExtensionHotLoadPlugin({
                 sourceDir: dist,
                 target: 'firefox-desktop',
                 firefoxProfile: src('.firefox'),
                 keepProfileChanges: true,
                 // --firefox=nightly
-                firefox: typeof argv.firefox === 'string' ? argv.firefox : undefined,
+                firefox: typeof target.FirefoxDesktop === 'string' ? target.FirefoxDesktop : undefined,
             }),
         )
     }
-
-    const manifest_extend = { version: pkg.version }
-
-    if (argv.chromium) {
+    if (target.Chromium) {
         config.plugins.push(
-            new WebExtPlugin({
+            new WebExtensionHotLoadPlugin({
                 sourceDir: dist,
                 target: 'chromium',
                 chromiumProfile: src('.chrome'),
                 keepProfileChanges: true,
             }),
         )
     }
-
-    if (argv['firefox-android']) {
-        config.plugins.push(new WebExtPlugin({ sourceDir: dist, target: 'firefox-android' }))
+    if (target.FirefoxForAndroid) {
+        config.plugins.push(new WebExtensionHotLoadPlugin({ sourceDir: dist, target: 'firefox-android' }))
     }
 
-    if (argv['firefox-gecko']) {
-        Object.assign(manifest_extend, { permissions: ['<all_urls>'] })
+    // Manifest modifies
+    const manifestFile = require('../src/manifest.json')
+    if (target.StandaloneGeckoView) {
+        manifestFile.permissions.push('<all_urls>')
+    }
+    if (target.Firefox) {
+        // TODO: To make `browser.tabs.executeScript` run on Firefox,
+        // TODO: we need an extra permission "tabs".
+        // TODO: Switch to browser.userScripts (Firefox only) API can resolve the problem.
+        manifestFile.permissions.push('tabs')
     }
 
-    config.plugins.push(
-        new ExtensionManifestPlugin({
-            config: {
-                base: require('../src/manifest'),
-                extend: manifest_extend,
-            },
-        }),
-    )
+    config.plugins.push(new ManifestGeneratorPlugin({ config: { base: manifestFile } }))
 
     config.plugins.push(
         newPage({ chunks: ['options-page'], filename: 'index.html' }),

config-overrides/jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "resolveJsonModule": true
+    },
+    "include": ["./index.js", "../src/manifest.json"]
+}

package.json

@@ -12,17 +12,27 @@
     "start:firefox": "react-app-rewired start --firefox",
     "start:android": "react-app-rewired start --firefox-android",
     "start:chromium": "react-app-rewired start --chromium",
-    "prepare:firefox": "firefox -CreateProfile ./.firefox",
-    "start:chromium": "react-app-rewired start --chromium",
     "start:gecko": "react-app-rewired start --firefox-gecko",
+    "start:wkwebview": "react-app-rewired start --wk-webview",
+
+    "prepare:firefox": "firefox -CreateProfile ./.firefox",
+
     "build": "react-app-rewired build",
     "build:debugging": "node --inspect-brk node_modules/react-app-rewired/scripts/build.js",
     "build:gecko": "react-app-rewired build --firefox-gecko",
+    "build:firefox": "react-app-rewired build --firefox",
+    "build:android": "react-app-rewired build --firefox-android",
+    "build:chromium": "react-app-rewired build --chromium",
+    "build:wkwebview": "react-app-rewired start --wk-webview",
+
     "test": "react-app-rewired test",
+
     "storybook": "start-storybook -p 9009 -s public --quiet",
     "storybook-build": "build-storybook -s public --quiet",
+
     "install": "node scripts/postinstall.js",
     "uninstall": "node scripts/postinstall.js",
+
     "lint": "node scripts/lint.js",
     "lint:report": "node scripts/lint.js --reportOnly"
   },

src/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json.schemastore.org/chrome-manifest",
+    "name": "Maskbook",
+    "version": "1.6.0",
+    "manifest_version": 2,
+    "web_accessible_resources": ["*.css", "*.js", "*.jpg", "*.png"],
+    "permissions": ["storage", "downloads", "webNavigation", "activeTab"],
+    "optional_permissions": ["<all_urls>"],
+    "background": { "page": "background.html" },
+    "options_ui": { "page": "index.html", "open_in_tab": true },
+    "icons": { "16": "16x16.png", "48": "48x48.png", "128": "128x128.png", "256": "256x256.png" },
+    "browser_action": { "default_popup": "popup.html" },
+    "homepage_url": "https://maskbook.com",
+    "description": "Encrypt your posts & chats on You-Know-Where. Allow only your friends to decrypt."
+}