Produce MV2 build for Firefox instead

Author: arkon

.eslintrc.js

@@ -42,6 +42,7 @@ module.exports = {
     '@typescript-eslint/no-confusing-void-expression': 'off',
     '@typescript-eslint/no-floating-promises': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
     '@typescript-eslint/no-unused-expressions': 'off',
 
     'linebreak-style': [

README.md

@@ -11,12 +11,6 @@
 
 ## Building from Source
 
-### ⚠️ WARNING ⚠️
-
-For legacy reasons, we have a `mv2` branch for Firefox support while the `main` branch houses the main MV3 version.
-
-TODO: we need to confirm whether the MV2 variant is still required for modern versions of Firefox.
-
 ### Development
 
 > Note: The repo expects a Linux or Unix-like environment. If you are on Windows, use WSL.

src/components/Hyperchat.svelte

@@ -345,7 +345,7 @@
       return port;
     });
 
-    return () => $port?.destroy && $port?.destroy();
+    return () => $port?.destroy?.();
   };
 
   onMount(onLoad);

src/manifest.json

@@ -1,5 +1,6 @@
 {
-  "manifest_version": 3,
+  "{{chrome}}.manifest_version": 3,
+  "{{firefox}}.manifest_version": 2,
   "name": "HyperChat [Improved YouTube Chat]",
   "version": "0.0.0",
   "homepage_url": "https://livetl.app/hyperchat",
@@ -11,7 +12,7 @@
   "permissions": [
     "storage"
   ],
-  "host_permissions": [
+  "{{chrome}}.host_permissions": [
     "https://www.youtube.com/live_chat*",
     "https://www.youtube.com/live_chat_replay*",
     "https://studio.youtube.com/live_chat*",
@@ -25,9 +26,12 @@
         "https://studio.youtube.com/live_chat*",
         "https://studio.youtube.com/live_chat_replay*"
       ],
-      "js": [
+      "{{chrome}}.js": [
         "scripts/chat-injector.ts"
       ],
+      "{{firefox}}.js": [
+        "scripts/mv2/chat-injector.ts"
+      ],
       "css": [
         "stylesheets/titlebar.css"
       ],
@@ -47,25 +51,36 @@
       "all_frames": true
     }
   ],
-  "{{firefox}}.background": {
-    "scripts": ["scripts/chat-background.ts"]
-  },
   "{{chrome}}.background": {
     "service_worker": "scripts/chat-background.ts"
   },
-  "action": {
+  "{{firefox}}.background": {
+    "scripts": ["scripts/mv2/chat-background.ts"],
+    "persistent": true
+  },
+  "{{chrome}}.action": {
     "default_icon": {
       "48": "assets/logo-48.png",
       "128": "assets/logo-128.png"
     },
     "default_popup": "options.html"
   },
-  "web_accessible_resources": [
+  "{{firefox}}.browser_action": {
+    "default_icon": {
+      "48": "assets/logo-48.png",
+      "128": "assets/logo-128.png"
+    },
+    "default_popup": "options.html"
+  },
+  "{{chrome}}.web_accessible_resources": [
     {
       "resources": ["*"],
       "matches": ["<all_urls>"]
     }
   ],
+  "{{firefox}}.web_accessible_resources": [
+    "*"
+  ],
   "options_ui": {
     "page": "options.html",
     "open_in_tab": true

src/scripts/chat-background.ts

@@ -4,7 +4,7 @@ const noUpdateKeys = new Set(['hc.bytes.used', 'hc.bytes.update']);
 const oneDay = 1000 * 60 * 60 * 24;
 
 const storageget = (key: string): any => chrome.storage.local.get(key).then(r => r[key]);
-const defaultTo0 = (value: any): number => isNaN(value) ? 0 : value;
+const defaultTo0 = (value: any): number => Number.isNaN(value) ? 0 : value;
 
 chrome.action.onClicked.addListener(() => {
   if (isLiveTL) {
@@ -52,7 +52,7 @@ chrome.storage.local.onChanged.addListener(changes => {
   // avoid top-level async
   // see https://stackoverflow.com/a/53024910
   (async () => {
-    const toWrite = {};
+    const toWrite: Record<string, any> = {};
     const data = await Promise.all([
       storageget('hc.bytes.used'),
       storageget('hc.bytes.lastupdate')

src/scripts/chat-injector.ts

@@ -11,8 +11,6 @@ import {
   setTheme
 } from '../ts/messaging';
 
-// const isFirefox = navigator.userAgent.includes('Firefox');
-
 const hcWarning = 'An existing HyperChat button has been detected. This ' +
   'usually means both LiveTL and standalone HyperChat are enabled. ' +
   'LiveTL already includes HyperChat, so please enable only one of them.\n\n' +
@@ -121,19 +119,6 @@ const chatLoaded = async (): Promise<void> => {
   ytcItemList.outerHTML = `
   <iframe id="hyperchat" src="${source}" style="border: 0px; width: 100%; height: 100%;"/>
   `;
-  // const hyperchat = document.querySelector('#hyperchat') as HTMLIFrameElement;
-  // if (!hyperchat) {
-  //   console.error('Failed to find #hyperchat');
-  //   return;
-  // }
-  // if (isFirefox || isLiveTL) {
-  //   const scale = 0.8;
-  //   const inverse = `${Math.round((1 / scale) * 10000) / 100}%`;
-  //   hyperchat.style.transformOrigin = '0px 0px';
-  //   hyperchat.style.minWidth = inverse;
-  //   hyperchat.style.minHeight = inverse;
-  //   hyperchat.style.transform = `scale(${scale})`;
-  // }
 
   // Remove ticker element
   const ytcTicker = document.querySelector('#ticker');