Added Manifest V3 compatibility for Firefox

CHANGELOG.md

@@ -1,3 +1,9 @@
+#1.3.66
+- Added Firefox build script for Manifest V3 compatibility
+
+#1.3.65
+- Changed manifest.json to comply with Manifest V3
+
 #1.3.64
 - Fix the sidebar not redrawing when looking at GH issues
 

README.md

@@ -63,7 +63,7 @@ Sometimes it is necessary to install and enable the public version of the extens
 
 # Creating your PR
 Be sure to do the following before pushing up your branch:
-1. Bump the version number in `assets/manifest.json` (use major.minor.patch version scheme)
+1. Bump the version number in `assets/manifest.json` and `assets/manifest-firefox.json` (use major.minor.patch version scheme)
 1. Bump the version number in `package.json` and `package-lock.json` to match
 1. Add a new change log entry in `CHANGELOG.md`
 

assets/manifest-firefox.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 3,
+
+  "name": "K2 for GitHub",
+  "version": "1.3.66",
+  "description": "Manage your Kernel Scheduling from directly inside GitHub",
+
+  "browser_specific_settings": {
+    "gecko": {
+        "id": "[email protected]",
+        "strict_min_version": "42.0"
+      }
+  },
+
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  },
+
+  "permissions": [
+    "webNavigation"
+  ],
+
+  "host_permissions": [
+      "*://api.github.com/*"
+  ],
+
+  "content_scripts": [{
+    "matches": ["*://*.github.com/*"],
+    "css": ["content.css"],
+    "js": ["content.js"]
+  }],
+
+  "background": {
+    "persistent": "false",
+    "scripts": ["events.js"]
+  }
+}

assets/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
 
   "name": "K2 for GitHub",
-  "version": "1.3.65",
+  "version": "1.3.66",
   "description": "Manage your Kernel Scheduling from directly inside GitHub",
 
   "browser_specific_settings": {

package.json

@@ -1,11 +1,13 @@
 {
   "name": "k2-extension",
-  "version": "1.3.65",
+  "version": "1.3.66",
   "description": "A Chrome Extension for Kernel Schedule",
   "private": true,
   "scripts": {
     "preinstall": "./tools/checkRuntimeVersions.sh",
-    "build": "webpack --progress --config webpack.prod.js",
+    "build": "npm run build:chrome",
+    "build:chrome": "webpack --progress --config webpack.prod.js --env platform=chrome",
+    "build:firefox": "webpack --progress --config webpack.prod.js --env platform=firefox",
     "package": "cd dist && zip -r -X ../dist.zip *",
     "lint": "eslint . --max-warnings=0",
     "lintfix": "eslint . --fix",

webpack.common.js

@@ -5,87 +5,102 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const {IgnorePlugin} = require('webpack');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
-module.exports = {
-    context: path.resolve(__dirname, '.'),
-    entry: {
-        content: './src/js/content.js',
-        events: './src/js/events.js',
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'dist'),
-    },
-    resolve: {
-        extensions: ['.jsx', '.js'],
-    },
+module.exports = (env) => {
+    const isFirefox = env && env.platform === 'firefox';
 
-    plugins: [
-        new CleanWebpackPlugin(),
-        new MiniCssExtractPlugin(),
+    return {
+        context: path.resolve(__dirname, '.'),
+        entry: {
+            content: './src/js/content.js',
+            events: './src/js/events.js',
+        },
+        output: {
+            filename: '[name].js',
+            path: path.resolve(__dirname, 'dist'),
+        },
+        resolve: {
+            extensions: ['.jsx', '.js'],
+        },
 
-        // This is necessary because when moment.js is imported, it require()s some locale files which aren't needed and this results
-        // in console errors. By ignoring those imports, it allows everything to work without errors. More can be read about this here:
-        // https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales
-        new IgnorePlugin({
-            resourceRegExp: /^\.\/locale$/,
-        }),
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin(),
 
-        new ESLintPlugin({
-            cache: false,
-            emitWarning: true,
-            overrideConfigFile: path.resolve(__dirname, '.eslintrc.js'),
-        }),
+            // This is necessary because when moment.js is imported, it require()s some locale files which aren't needed and this results
+            // in console errors. By ignoring those imports, it allows everything to work without errors. More can be read about this here:
+            // https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales
+            new IgnorePlugin({
+                resourceRegExp: /^\.\/locale$/,
+            }),
 
-        // Copies icons and manifest file into our dist folder
-        new CopyPlugin({
-            patterns: [
-                {from: './assets/', to: path.resolve(__dirname, 'dist')}
-            ]
-        }),
-    ],
+            new ESLintPlugin({
+                cache: false,
+                emitWarning: true,
+                overrideConfigFile: path.resolve(__dirname, '.eslintrc.js'),
+            }),
 
-    module: {
-        rules: [
-            // Load .html files as strings, used for underscore templates
-            {
-                test: /\.html$/i,
-                use: 'underscore-template-loader'
-            },
+            // Conditional copy of manifest files and other assets
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: './assets/',
+                        to: path.resolve(__dirname, 'dist'),
+                        globOptions: {
+                            ignore: ['**/manifest*.json'], // Ignore all manifest*.json files
+                        },
+                    },
+                    {
+                        // Conditionally copy the manifest based on platform
+                        from: isFirefox ? './assets/manifest-firefox.json' : './assets/manifest.json',
+                        to: path.resolve(__dirname, 'dist/manifest.json'),
+                    },
+                ],
+            }),
+        ],
 
-            // Transpiles ES6 and JSX
-            {
-                test: /\.js$/,
-                use: {
-                    loader: 'babel-loader',
+        module: {
+            rules: [
+                // Load .html files as strings, used for underscore templates
+                {
+                    test: /\.html$/i,
+                    use: 'underscore-template-loader'
                 },
 
-                /**
-                 * Exclude node_modules except two packages we need to convert for rendering HTML because they import
-                 * "react-native" internally and use JSX which we need to convert to JS for the browser.
-                 *
-                 * You can remove something from this list if it doesn't use JSX/JS that needs to be transformed by babel.
-                 */
-                include: [
-                    path.resolve(__dirname, 'src'),
-                    path.resolve(__dirname, 'node_modules/react-native-onyx'),
-                ],
-                exclude: [
-                    path.resolve(__dirname, 'node_modules/react-native-onyx/node_modules'),
-                ],
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: [
-                    // Outputs the generated CSS to the dist folder
-                    MiniCssExtractPlugin.loader,
+                // Transpiles ES6 and JSX
+                {
+                    test: /\.js$/,
+                    use: {
+                        loader: 'babel-loader',
+                    },
 
-                    // Translates CSS into CommonJS
-                    'css-loader',
+                    /**
+                     * Exclude node_modules except two packages we need to convert for rendering HTML because they import
+                     * "react-native" internally and use JSX which we need to convert to JS for the browser.
+                     *
+                     * You can remove something from this list if it doesn't use JSX/JS that needs to be transformed by babel.
+                     */
+                    include: [
+                        path.resolve(__dirname, 'src'),
+                        path.resolve(__dirname, 'node_modules/react-native-onyx'),
+                    ],
+                    exclude: [
+                        path.resolve(__dirname, 'node_modules/react-native-onyx/node_modules'),
+                    ],
+                },
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: [
+                        // Outputs the generated CSS to the dist folder
+                        MiniCssExtractPlugin.loader,
 
-                    // Compiles Sass to CSS
-                    'sass-loader',
-                ],
-            },
-        ]
-    },
+                        // Translates CSS into CommonJS
+                        'css-loader',
+
+                        // Compiles Sass to CSS
+                        'sass-loader',
+                    ],
+                },
+            ]
+        },
+    };
 };

webpack.dev.js

@@ -1,7 +1,7 @@
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 
-module.exports = merge(common, {
+module.exports = (env) => merge(common(env), {
     mode: 'development',
     devtool: 'inline-source-map',
     watch: true,

webpack.prod.js

@@ -1,6 +1,6 @@
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 
-module.exports = merge(common, {
-  mode: 'production',
+module.exports = (env) => merge(common(env), {
+    mode: 'production',
 });