Merge pull request #21 from aligent/feature/PERT-54_firefox_dev_build…

…_support

Dev build support for Firefox

README.md

@@ -12,10 +12,18 @@ Uses https://crxjs.dev/vite-plugin to build the react typescript based applicati
 
 # Development
 
+## For Chrome
+
 `yarn dev`
 
 in chrome://extensions enable Developer mode and point to /dist folder by clicking on **Load unpacked** button.
 
+## For Firefox
+
+`yarn dev:firefox`
+
+in about:debugging click on **Load Temporary Add-on** button and point to /dist/manifest.json file.
+
 # Creating chrome / firefox extension packages.
 
 Find `PERT with wings testing` secure note in LastPass containing testing credentials and create `.env` in project root.

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:firefox": "vite -- --browser=firefox",
     "build": "yarn clean:extensions && tsc && vite build",
     "deploy": "yarn test && yarn clean:extensions && tsc && vite build",
     "preview": "vite preview",

vite.config.ts

@@ -8,14 +8,30 @@ import { defineConfig } from 'vite';
 import manifest from './manifest.config';
 import packageExtensions from './vite-plugin-package-extensions';
 
+const isFirefox = () => {
+  let browser = 'chrome';
+  try {
+    browser = process.argv
+      .find((opts) => opts.includes('browser'))
+      .split('=')[1];
+  } catch (ex) {
+    /** No browser supplied - defaults to chrome */
+  }
+  return browser === 'firefox';
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
     },
   },
-  plugins: [react(), crx({ manifest }), packageExtensions()],
+  plugins: [
+    react(),
+    crx({ manifest, browser: isFirefox() ? 'firefox' : 'chrome' }),
+    packageExtensions(),
+  ],
   test: {
     include: ['**/?(*.)+(spec|test).[jt]s?(x)'],
     testTimeout: 60_000,