refactor: migrate to wext-manifest-loader (breaking change)

package.json

@@ -73,8 +73,8 @@
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-extension-reloader": "^1.1.4",
-    "wext-manifest": "^2.2.0",
+    "wext-manifest-loader": "^1.0.1",
-    "write-webpack-plugin": "^1.1.0",
+    "wext-manifest-webpack-plugin": "^1.0.3",
     "zip-webpack-plugin": "^3.0.0"
   }
-}
+}

src/manifest.json

@@ -0,0 +1,65 @@
+{
+  "manifest_version": 2,
+  "name": "Sample WebExtension",
+  "version": "0.0.0",
+  "icons": {
+    "16": "assets/icons/favicon-16.png",
+    "32": "assets/icons/favicon-32.png",
+    "48": "assets/icons/favicon-48.png",
+    "128": "assets/icons/favicon-128.png"
+  },
+  "description": "Sample description",
+  "homepage_url": "https://github.com/abhijithvijayan/web-extension-starter",
+  "short_name": "Sample Name",
+  "permissions": [
+    "activeTab",
+    "storage",
+    "http://*/*",
+    "https://*/*"
+  ],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "__chrome|firefox__author": "abhijithvijayan",
+  "__opera__developer": {
+    "name": "abhijithvijayan"
+  },
+  "__firefox__applications": {
+    "gecko": {
+      "id": "{754FB1AD-CC3B-4856-B6A0-7786F8CA9D17}"
+    }
+  },
+  "__chrome__minimum_chrome_version": "49",
+  "__opera__minimum_opera_version": "36",
+  "browser_action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "assets/icons/favicon-16.png",
+      "32": "assets/icons/favicon-32.png",
+      "48": "assets/icons/favicon-48.png",
+      "128": "assets/icons/favicon-128.png"
+    },
+    "default_title": "tiny title",
+    "__chrome|opera__chrome_style": false,
+    "__firefox__browser_style": false
+  },
+  "__chrome|opera__options_page": "options.html",
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true,
+    "__chrome__chrome_style": false
+  },
+  "background": {
+    "scripts": [
+      "js/background.bundle.js"
+    ],
+    "__chrome|opera__persistent": false
+  },
+  "content_scripts": [{
+    "matches": [
+      "http://*/*",
+      "https://*/*"
+    ],
+    "js": [
+      "js/contentScript.bundle.js"
+    ]
+  }]
+}

src/manifest/index.js

@@ -1,68 +0,0 @@
-const pkg = require('../../package.json');
-
-const manifestInput = {
-    manifest_version: 2,
-    name: 'Sample WebExtension',
-    version: pkg.version,
-
-    icons: {
-        '16': 'assets/icons/favicon-16.png',
-        '32': 'assets/icons/favicon-32.png',
-        '48': 'assets/icons/favicon-48.png',
-        '128': 'assets/icons/favicon-128.png',
-    },
-
-    description: 'Sample description',
-    homepage_url: 'https://github.com/abhijithvijayan/web-extension-starter',
-    short_name: 'Sample Name',
-
-    permissions: ['activeTab', 'storage', 'http://*/*', 'https://*/*'],
-    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
-
-    '__chrome|firefox__author': 'abhijithvijayan',
-    __opera__developer: {
-        name: 'abhijithvijayan',
-    },
-
-    __firefox__applications: {
-        gecko: { id: '{754FB1AD-CC3B-4856-B6A0-7786F8CA9D17}' },
-    },
-
-    __chrome__minimum_chrome_version: '49',
-    __opera__minimum_opera_version: '36',
-
-    browser_action: {
-        default_popup: 'popup.html',
-        default_icon: {
-            '16': 'assets/icons/favicon-16.png',
-            '32': 'assets/icons/favicon-32.png',
-            '48': 'assets/icons/favicon-48.png',
-            '128': 'assets/icons/favicon-128.png',
-        },
-        default_title: 'tiny title',
-        '__chrome|opera__chrome_style': false,
-        __firefox__browser_style: false,
-    },
-
-    '__chrome|opera__options_page': 'options.html',
-
-    options_ui: {
-        page: 'options.html',
-        open_in_tab: true,
-        __chrome__chrome_style: false,
-    },
-
-    background: {
-        scripts: ['js/background.bundle.js'],
-        '__chrome|opera__persistent': false,
-    },
-
-    content_scripts: [
-        {
-            matches: ['http://*/*', 'https://*/*'],
-            js: ['js/contentScript.bundle.js'],
-        },
-    ],
-};
-
-module.exports = manifestInput;

webpack.config.js

@@ -1,25 +1,21 @@
 const path = require('path');
 const webpack = require('webpack');
-const wextManifest = require('wext-manifest');
 const ZipPlugin = require('zip-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WriteWebpackPlugin = require('write-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ExtensionReloader = require('webpack-extension-reloader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
-const manifestInput = require('./src/manifest');
-
 const viewsPath = path.join(__dirname, 'views');
 const sourcePath = path.join(__dirname, 'src');
 const destPath = path.join(__dirname, 'extension');
 const nodeEnv = process.env.NODE_ENV || 'development';
 const targetBrowser = process.env.TARGET_BROWSER;
-const manifest = wextManifest[targetBrowser](manifestInput);
 
 const extensionReloaderPlugin =
     nodeEnv === 'development'
@@ -37,7 +33,7 @@ const extensionReloaderPlugin =
               this.apply = () => {};
           };
 
-const getExtensionFileType = browser => {
+const getExtensionFileType = (browser) => {
     if (browser === 'opera') {
         return 'crx';
     }
@@ -53,6 +49,7 @@ module.exports = {
     mode: nodeEnv,
 
     entry: {
+        manifest: path.join(sourcePath, 'manifest.json'),
         background: path.join(sourcePath, 'Background', 'index.ts'),
         contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
         popup: path.join(sourcePath, 'Popup', 'index.tsx'),
@@ -60,8 +57,8 @@ module.exports = {
     },
 
     output: {
-        filename: 'js/[name].bundle.js',
         path: path.join(destPath, targetBrowser),
+        filename: 'js/[name].bundle.js',
     },
 
     resolve: {
@@ -73,6 +70,12 @@ module.exports = {
 
     module: {
         rules: [
+            {
+                type: 'javascript/auto', // prevent webpack handling json with its own loaders,
+                test: /manifest\.json$/,
+                use: 'wext-manifest-loader',
+                exclude: /node_modules/,
+            },
             {
                 test: /\.(js|ts)x?$/,
                 loader: 'babel-loader',
@@ -106,6 +109,8 @@ module.exports = {
     },
 
     plugins: [
+        // Plugin to not generate js bundle for manifest entry
+        new WextManifestWebpackPlugin(),
         new ForkTsCheckerWebpackPlugin(),
         // environmental variables
         new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
@@ -134,8 +139,6 @@ module.exports = {
         new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
         // copy static assets
         new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
-        // write manifest.json
-        new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
         // plugin to enable browser reloading in development mode
         extensionReloaderPlugin,
     ],

yarn.lock

@@ -4667,6 +4667,15 @@ loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -7778,10 +7787,17 @@ webpack@^4.42.1:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-wext-manifest@^2.2.0:
+wext-manifest-loader@^1.0.1:
-  version "2.2.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wext-manifest/-/wext-manifest-2.2.0.tgz#fe8074f4a66971acd2f885d0a27a601b437e9aab"
+  resolved "https://registry.yarnpkg.com/wext-manifest-loader/-/wext-manifest-loader-1.0.1.tgz#8b8c5fbbd1f78deda2286e7d23c4e3c8920a03b7"
-  integrity sha512-r2ZTSr/2yIWU8bu8EYHSfHAifaZO3mTiL5iGJ0+6cX7iWcdJtWFe/Kc2HxYc5rDJYl5xY+hqxGEYX0UfOtzpPg==
+  integrity sha512-MSjoe2xhAu2C/3hhOD+/oDR8o0tzqsKQBREgfcE0NBMAAU0BumXCxNTeC0AxoFL8VtV+hjY4+Ljm+gcAIaJ0iw==
+  dependencies:
+    loader-utils "^2.0.0"
+
+wext-manifest-webpack-plugin@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/wext-manifest-webpack-plugin/-/wext-manifest-webpack-plugin-1.0.3.tgz#63e376e88c1a6899faaffc57274791555fbcf830"
+  integrity sha512-OPrUp0WdgRoicktmpURd1SpQB4VJQmB7J382Ez1kHkufuY31W10No/bdkcVzTBa8WwonIWG5wXqO9fmp4tNu7w==
 
 which-module@^1.0.0:
   version "1.0.0"
@@ -7855,11 +7871,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-webpack-plugin@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/write-webpack-plugin/-/write-webpack-plugin-1.1.0.tgz#ac60a7fcbc149a8cc33a465420fbdf2f612e9af9"
-  integrity sha512-/E04VeJtHiOW02ET68yy38KRSOJTtvMFvAV3pLLgtYJWuhhNRQypPQWUsYzChndkRtedspqydOCG134AZZqBaA==
-
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"