fix: Switch to build/manifest JS - separate builds in workflow (#1)

.github/workflows/node.js.yml

@@ -29,15 +29,16 @@ jobs:
     - run: npm ci
     - run: npm run build --if-present
     - run: npm test
+    - run: npm run build:chromium
     #- name: Package the extension
     #  uses: montudor/action-zip@v1
     #  with:
     #    args: zip -r extension.zip manifest.json assets lib options pages
         # args: zip -qq -r dir.zip dir
-    - name: Package and upload extension
+    - name: Package & upload extension (Chromium)
       uses: actions/upload-artifact@v4
       with:
-        name: extension
+        name: extension.chromium
         # path: extension.zip
         path: |
           manifest.json
@@ -49,4 +50,20 @@ jobs:
         if-no-files-found: error # 'warn' or 'ignore' are also available, defaults to `warn`
         # retention-days: 90
 
+    - run: rm -f manifest.json
+
+    - run: npm run build:gecko
+    - name: Package & upload extension (Gecko)
+      uses: actions/upload-artifact@v4
+      with:
+        name: extension.gecko
+        path: |
+          manifest.json
+          assets/*
+          lib/*
+          options/*
+          pages/*
+        compression-level: 6
+        if-no-files-found: error
+
 # End.

.gitignore

@@ -1,8 +1,12 @@
 .DS_Store
+*.diff
 *BAK*
 *OLD*
 my-timer*
 WorkerTimer*
+# a11y*
+# mod-test.js
 
 *.zip
 node_modules
+manifest*.json

README.md

@@ -5,7 +5,10 @@
 
 Grow trees! A [Pomodoro][] countdown timer that blocks access to distracting websites. The block-list and timer duration are user configurable.
 
-* Work-in-progress download: [extension.zip][]
+Work-in-progress downloads:
+
+* [extension.chromium.zip][] — _for Chrome & Chromium-based browsers_
+* [extension.gecko.zip][] — _for Firefox_
 
 ## Browser support
 
@@ -20,7 +23,8 @@ Currently, the extension supports Chrome. There is an [open issue][xbrowser] whe
 The extension uses semantic HTML markup, for example, `<button>` and all input fields have associated labels. This helps to ensure that the extension is [accessible][] to all, including those who declare disabilities.
 
 [pomodoro]: https://en.wikipedia.org/wiki/Pomodoro_Technique
-[extension.zip]: https://nightly.link/nfreear/pomodoro-chrome-ext/workflows/node.js/main/extension.zip
+[extension.chromium.zip]: https://nightly.link/nfreear/pomodoro-chrome-ext/workflows/node.js/main/extension.chromium.zip
+[extension.gecko.zip]: https://nightly.link/nfreear/pomodoro-chrome-ext/workflows/node.js/main/extension.gecko.zip
 [xbrowser]: https://github.com/nfreear/pomodoro-chrome-ext/issues/1
   "Cross-browser support (Firefox), #1"
 [privacy policy]: https://github.com/nfreear/pomodoro-chrome-ext/issues/6

build/manifest.js

@@ -0,0 +1,96 @@
+/**
+ * Build a manifest file targetting Chromium/Webkit or Gecko-based browsers.
+ *
+ * © NDF, 19-Aug-2024.
+ * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
+ */
+
+const fs = require('fs').promises;
+const { resolve } = require('path');
+
+console.log('Building manifest - targetting:', process.env.UA);
+
+const IS_GECKO = process.env.UA === 'gecko';
+
+const FILE_PATH = resolve(__dirname, '..', 'manifest.X.json');
+const SERVICE_WORKER = 'lib/service-worker.js';
+
+const TEMPLATE = {
+  manifest_version: 3,
+
+  name: 'My Pomodoro',
+  version: '1.0',
+
+  description: 'Grow trees! A Pomodoro countdown timer that blocks access to distracting websites.',
+  homepage_url: 'https://github.com/nfreear/pomodoro-chrome-ext#readme',
+
+  icons: {
+    128: 'assets/icon-128.png'
+  },
+
+  permissions: [
+    'activeTab',
+    'notifications',
+    'scripting',
+    'storage',
+    'webNavigation'
+  ],
+
+  host_permissions: [
+    'https://*/*',
+    'http://*/*'
+  ],
+
+  background: {
+    // scripts: ['lib/service-worker.js'],
+    // service_worker: 'lib/service-worker.js'
+  },
+
+  action: {
+    default_popup: 'pages/index.html',
+    default_title: 'My Pomodoro'
+  },
+
+  options_ui: {
+    open_in_tab: true,
+    page: 'options/options.html'
+  },
+
+  content_scripts: [],
+
+  web_accessible_resources: [
+    {
+      matches: ['https://*/*'],
+      resources: [
+        'assets/content-style.css',
+        'assets/evergreen_tree.svg'
+      ]
+    }
+  ]
+};
+
+const GECKO = {
+  browser_specific_settings: {
+    gecko: {
+      id: '[email protected]',
+      strict_min_version: '42.0'
+    }
+  }
+};
+
+const MANIFEST = IS_GECKO ? { ...TEMPLATE, ...GECKO } : TEMPLATE;
+
+if (IS_GECKO) {
+  MANIFEST.background.scripts = [SERVICE_WORKER];
+} else {
+  MANIFEST.background.service_worker = SERVICE_WORKER;
+}
+
+const jsonData = JSON.stringify(MANIFEST, null, 2);
+
+fs.writeFile(FILE_PATH, jsonData)
+  .then(() => console.log('File written OK: manifest.json'))
+  .catch((err) => {
+    console.error('ERROR: failed to write manifest.json:', err);
+    process.exit(1);
+  });

package.json

@@ -3,6 +3,8 @@
   "name": "my-pomodoro-browser-ext",
   "author": "Nick Freear",
   "scripts": {
+    "build:chromium": "UA=chromium node build/manifest.js",
+    "build:gecko": "UA=gecko node build/manifest.js",
     "zip": "zip -r extension.zip manifest.json assets lib options pages",
     "fix": "semistandard --fix",
     "test": "semistandard"