From fadc746bc734f346f7df977d4273bafea6d04169 Mon Sep 17 00:00:00 2001 From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com> Date: Thu, 2 Apr 2020 21:28:55 +0530 Subject: [PATCH] refactor: migrate to wext-manifest-loader (breaking change) --- package.json | 6 ++-- src/manifest.json | 65 +++++++++++++++++++++++++++++++++++++++++ src/manifest/index.js | 68 ------------------------------------------- webpack.config.js | 21 +++++++------ yarn.lock | 29 ++++++++++++------ 5 files changed, 100 insertions(+), 89 deletions(-) create mode 100644 src/manifest.json delete mode 100644 src/manifest/index.js diff --git a/package.json b/package.json index 767f7d2..e29f782 100644 --- a/package.json +++ b/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", - "write-webpack-plugin": "^1.1.0", + "wext-manifest-loader": "^1.0.1", + "wext-manifest-webpack-plugin": "^1.0.3", "zip-webpack-plugin": "^3.0.0" } -} \ No newline at end of file +} diff --git a/src/manifest.json b/src/manifest.json new file mode 100644 index 0000000..f55bb10 --- /dev/null +++ b/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" + ] + }] +} \ No newline at end of file diff --git a/src/manifest/index.js b/src/manifest/index.js deleted file mode 100644 index 9e0ae07..0000000 --- a/src/manifest/index.js +++ /dev/null @@ -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; diff --git a/webpack.config.js b/webpack.config.js index 3916326..08b78d9 100644 --- a/webpack.config.js +++ b/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, ], diff --git a/yarn.lock b/yarn.lock index 43808e8..2c0d6e2 100644 --- a/yarn.lock +++ b/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: - version "2.2.0" - resolved "https://registry.yarnpkg.com/wext-manifest/-/wext-manifest-2.2.0.tgz#fe8074f4a66971acd2f885d0a27a601b437e9aab" - integrity sha512-r2ZTSr/2yIWU8bu8EYHSfHAifaZO3mTiL5iGJ0+6cX7iWcdJtWFe/Kc2HxYc5rDJYl5xY+hqxGEYX0UfOtzpPg== +wext-manifest-loader@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/wext-manifest-loader/-/wext-manifest-loader-1.0.1.tgz#8b8c5fbbd1f78deda2286e7d23c4e3c8920a03b7" + 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"