Add browser specific manifests

Author: kungfux

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: Build with NodeJS and Webpack
+name: Build extension
 
 on:
   push:
@@ -10,22 +10,28 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        browser: ['chrome', 'firefox']
+
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node.js
+      - name: Setup Node.js LTS
         uses: actions/setup-node@v3
         with:
           node-version: lts/*
 
       - name: Build
         run: |
           npm install
-          npm run build
+          npm run build:${{matrix.browser}}
 
       - name: Archive artifacts
         uses: actions/upload-artifact@v3
         with:
           name: jira-automation-extension
           path: |
-            dist/**/*.*
+            dist/
+            !dist/**/*.zip
+          if-no-files-found: error

README.md

@@ -1,19 +1,36 @@
 # Introduction
 
-`JIRA Automation` is a browser extension to automate typical actions in JIRA.
+`JIRA Automation` is a browser extension to add extra features to JIRA.
 
-## Features
+# Features
 
 - TBD
 
-## Development
+# Install
 
-### How to build and test
+Add an extension to your favorite browser by visiting extensions store
 
-- Install latest LTS versions of [Node.js](https://nodejs.org/en) and npm
-- Execute `npm install` to restore project dependencies
-- Run `npm run start` to compile and bundle source code
-- Load unpacked extension from `dist` folder into your browser
+TBD
+
+# Build and test locally
+
+- Install [Node.js](https://nodejs.org/) (LTS version)
+- Run following commands from project's root directory to build extension
+
+```bash
+$ npm install # Restore project dependencies
+$ npm run build:chrome # Build extension for Chrome
+$ npm run build:firefox # Build extension for Firefox
+```
+
+- Run following commands to debug extension
+
+```bash
+$ npm run watch:chrome
+$ npm run watch:firefox
+```
+
+- Follow these articles to load unpacked extension from `dist` folder into your browser
   - [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing)
   - [Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)
 

package.json

@@ -1,11 +1,15 @@
 {
   "name": "jira-automation-extension",
   "version": "1.0.0",
-  "description": "Browser extension to automate typical actions in JIRA",
+  "description": "Add extra features to JIRA.",
   "private": true,
   "scripts": {
-    "start": "webpack --watch --config webpack.dev.js",
+    "build:chrome": "npm run build -- --env BROWSER=chrome",
+    "build:firefox": "npm run build -- --env BROWSER=firefox",
     "build": "webpack --config webpack.prod.js",
+    "watch:chrome": "npm run watch -- --env BROWSER=chrome",
+    "watch:firefox": "npm run watch -- --env BROWSER=firefox",
+    "watch": "webpack --watch --config webpack.dev.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -20,6 +24,7 @@
   "homepage": "https://github.com/kungfux/jira-automation-extension#readme",
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
+    "merge-jsons-webpack-plugin": "^2.0.1",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.4",
     "webpack": "^5.78.0",

src/manifest.chrome.json

@@ -0,0 +1 @@
+{}

src/manifest.firefox.json

@@ -0,0 +1,8 @@
+{
+    "browser_specific_settings": {
+      "gecko": {
+        "id": "{eb6d1100-3fa7-4869-8370-11bc3e058fe1}",
+        "strict_min_version": "109.0"
+      }
+    }
+}

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "jira-automation-extension",
+  "name": "JIRA Automation",
   "version": "1.0",
   "description": "Browser extension to automate typical actions in JIRA.",
   "icons": {

webpack.common.js

@@ -1,30 +1,40 @@
 const path = require('path');
-const CopyPlugin = require("copy-webpack-plugin");
+const CopyPlugin = require('copy-webpack-plugin');
+const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
 
-module.exports = {
-  entry: './src/index.ts',
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        './src/manifest.json',
-        { from: './src/icons', to: 'icons' }
+module.exports = (env) => {
+  return {
+    entry: './src/index.ts',
+    output: {
+      filename: 'bundle.js',
+      path: path.resolve(__dirname, `dist/${env.BROWSER ?? 'chrome'}`),
+      clean: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
       ],
-    }),
-  ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          { from: './src/icons', to: 'icons' }
+        ],
+      }),
+      new MergeJsonWebpackPlugin({
+        space: 2,
+        files: ['./src/manifest.json', `./src/manifest.${env.BROWSER ?? 'chrome'}.json`],
+        output: {
+          fileName: 'manifest.json',
+        },
+      }),
+    ],
+  }
 };

webpack.dev.js

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

webpack.prod.js

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