refactor: replace wext-manifest with wext-manifest-loader

README.md

@@ -90,7 +90,7 @@ Then run the following:
     - Check the `Developer Mode` and load as unpacked from extension’s extracted directory.
    
 ### Generating browser specific manifest.json
-Update `src/manifest/index.js` file with browser vendor prefixed manifest keys
+Update `src/manifest.json` file with browser vendor prefixed manifest keys
 
 ```js
 {
@@ -127,7 +127,7 @@ if the vendor is `chrome` or `opera`, this compiles to:
 }
 ```
 
-See the original [README](https://github.com/abhijithvijayan/wext-manifest) of wext-manifest package for more details
+See the original [README](https://github.com/abhijithvijayan/wext-manifest-loader) of `wext-manifest-loader` package for more details
 
 ### Production
 

package.json

@@ -65,8 +65,8 @@
     "webpack-cli": "^3.3.11",
     "webpack-extension-reloader": "^1.1.4",
     "webpack-fix-style-only-entries": "^0.4.0",
-    "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,21 +1,17 @@
 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 WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 
-const manifestInput = require('./src/manifest');
-
 const nodeEnv = process.env.NODE_ENV || 'development';
 const targetBrowser = process.env.TARGET_BROWSER;
-const manifest = wextManifest[targetBrowser](manifestInput);
 
 const extensionReloaderPlugin =
     nodeEnv === 'development'
@@ -48,6 +44,7 @@ module.exports = {
     mode: nodeEnv,
 
     entry: {
+        manifest: './src/manifest.json',
         background: './src/scripts/background.js',
         contentScript: './src/scripts/contentScript.js',
         popup: './src/scripts/popup.js',
@@ -56,12 +53,18 @@ module.exports = {
     },
 
     output: {
-        filename: 'js/[name].bundle.js',
         path: path.resolve(__dirname, 'extension', targetBrowser),
+        filename: 'js/[name].bundle.js'
     },
 
     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|jsx)$/,
                 include: [path.resolve(__dirname, 'src/scripts')],
@@ -115,6 +118,7 @@ module.exports = {
 
     plugins: [
         new webpack.ProgressPlugin(),
+        new WextManifestWebpackPlugin(),
         new FixStyleOnlyEntriesPlugin({ silent: true }),
         new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
         new CleanWebpackPlugin({
@@ -138,7 +142,6 @@ module.exports = {
             filename: 'popup.html',
         }),
         new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
-        new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
         extensionReloaderPlugin,
     ],
 

yarn.lock

@@ -8086,10 +8086,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"
@@ -8156,11 +8163,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"