Firefox MV3

README.md

@@ -29,7 +29,14 @@ yarn # install dependencies
 Build or serve the extension:
 
 ```bash
-yarn start # watch mode
-yarn build # production mode
+yarn dev:firefox # devserver for firefox extension
+yarn dev:chrome # devserver for chrome extension
+yarn start # alias to yarn dev:chrome for backwards compat
+yarn start:none # alias to yarn dev:chrome for backwards compat
+yarn start:firefox # devserver + open extension in firefox
+yarn start:chrome # devserver + open extension in chrome
+yarn build # production mode (chrome)
+yarn build:chrome # production mode (chrome)
+yarn build:firefox # production mode (firefox)
 VERSION=x.x.x yarn build
 ```

package.json

@@ -3,11 +3,16 @@
   "version": "69.42.0",
   "private": true,
   "scripts": {
-    "build": "vite build",
+    "build": "yarn build:chrome",
+    "build:chrome": "cross-env BROWSER=chrome vite build",
+    "build:firefox": "cross-env BROWSER=firefox vite build",
     "package": "node utils/package.js",
-    "start": "cross-env MINIFY=false BROWSER=none vite build --watch",
-    "start:chrome": "cross-env MINIFY=false BROWSER=chrome vite build --watch",
-    "start:firefox": "cross-env MINIFY=false BROWSER=firefox vite build --watch",
+    "dev:chrome": "cross-env MINIFY=false BROWSER=chrome vite build --watch",
+    "dev:firefox": "cross-env MINIFY=false BROWSER=firefox vite build --watch",
+    "start": "yarn dev:chrome",
+    "start:none": "yarn dev:chrome",
+    "start:chrome": "cross-env HC_AUTOLAUNCH=menace yarn dev:chrome",
+    "start:firefox": "cross-env HC_AUTOLAUNCH=menace yarn dev:firefox",
     "format:check": "eslint ."
   },
   "devDependencies": {

src/components/Hyperchat.svelte

@@ -15,6 +15,8 @@
     // paramsTabId,
     // paramsFrameId,
     // paramsIsReplay,
+    getBrowser,
+    Browser,
     Theme,
     YoutubeEmojiRenderMode,
     chatUserActionsItems
@@ -258,13 +260,17 @@
       return;
     }
 
-    // const frameInfo = {
-    //   tabId: parseInt(paramsTabId),
-    //   frameId: parseInt(paramsFrameId)
-    // };
+    // ff doesn't support extension to content script raw messaging yet
+    if (getBrowser() == Browser.FIREFOX) {
+      const frameInfo = {
+        tabId: parseInt(paramsTabId),
+        frameId: parseInt(paramsFrameId)
+      };
 
-    // $port = chrome.runtime.connect();
-    $port = chrome.tabs.connect(parseInt(paramsTabId), { frameId: parseInt(paramsFrameId) });
+      $port = chrome.runtime.connect({ name: JSON.stringify(frameInfo) });
+    } else {
+      $port = chrome.tabs.connect(parseInt(paramsTabId), { frameId: parseInt(paramsFrameId) });
+    }
 
     $port?.onMessage.addListener(onPortMessage);
 

src/manifest.json

@@ -24,7 +24,10 @@
       "all_frames": true
     }
   ],
-  "background": {
+  "{{firefox}}.background": {
+    "scripts": ["scripts/chat-background.ts"]
+  },
+  "{{chrome}}.background": {
     "service_worker": "scripts/chat-background.ts"
   },
   "action": {
@@ -42,5 +45,6 @@
   "options_ui": {
     "page": "options.html",
     "open_in_tab": true
-  }
+  },
+  "{{chrome}}.incognito": "split"
 }

src/scripts/chat-background.ts

@@ -1,4 +1,4 @@
-import { isLiveTL } from '../ts/chat-constants';
+import { isLiveTL, Browser, getBrowser } from '../ts/chat-constants';
 
 chrome.action.onClicked.addListener(() => {
   if (isLiveTL) {
@@ -18,3 +18,19 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }, () => {});
   }
 });
+
+// ff doesn't support extension to content script raw messaging yet
+// so we proxy the messaging
+if (getBrowser() == Browser.FIREFOX) {
+  chrome.runtime.onConnect.addListener(hc => {
+    // frameId and tabId should be int
+    const { frameId, tabId } = JSON.parse(hc.name);
+    const interceptorPort = chrome.tabs.connect(tabId, { frameId });
+    interceptorPort.onMessage.addListener(msg => {
+      hc.postMessage(msg);
+    });
+    hc.onMessage.addListener(msg => {
+      interceptorPort.postMessage(msg);
+    });
+  });
+}

utils/package.js

@@ -3,11 +3,11 @@ const { spawn } = require('child_process');
 const cmds = [
   'mkdir -p dist',
   'cd build',
-  'zip -9r ../dist/HyperChat-Firefox.zip .',
-  'cp ../dist/HyperChat-Firefox.zip ../dist/HyperChat-Chrome.zip',
-  'zip -d ../dist/HyperChat-Chrome.zip manifest.json',
-  'printf "@ manifest.chrome.json\\n@=manifest.json\\n" | zipnote -w ../dist/HyperChat-Chrome.zip',
-  'zip -d ../dist/HyperChat-Firefox.zip manifest.chrome.json'
+  'zip -9r ../dist/HyperChat-Chrome.zip .',
+  'cp ../dist/HyperChat-Chrome.zip ../dist/HyperChat-Firefox.zip',
+  'zip -d ../dist/HyperChat-Firefox.zip manifest.json',
+  'printf "@ manifest.firefox.json\\n@=manifest.json\\n" | zipnote -w ../dist/HyperChat-Firefox.zip',
+  'zip -d ../dist/HyperChat-Chrome.zip manifest.firefox.json'
 ];
 
 spawn(

vite.config.ts

@@ -29,10 +29,10 @@ export default defineConfig({
         'hyperchat.html',
         'scripts/chat-interceptor.ts'
       ],
-      disableAutoLaunch: process.env.BROWSER === 'none',
-      browser: process.env.BROWSER === 'none' ? undefined : process.env.BROWSER,
+      disableAutoLaunch: process.env.HC_AUTOLAUNCH === undefined,
+      browser: process.env.BROWSER === undefined ? 'chrome' : process.env.BROWSER,
       webExtConfig: {
-        startUrl: 'https://www.youtube.com/watch?v=5qap5aO4i9A'
+        startUrl: 'https://www.youtube.com/watch?v=jfKfPfyJRdk'
       }
     }),
     svelte({
@@ -46,10 +46,17 @@ export default defineConfig({
         dest: 'build/',
         transform: (content) => {
           const newManifest = JSON.parse(content.toString());
-          newManifest.incognito = 'split';
+          if ('incognito' in newManifest) {
+            delete newManifest.incognito;
+          }
+          if ('service_worker' in newManifest.background) {
+            newManifest.background = {
+              scripts: [newManifest.background.service_worker]
+            };
+          }
           return JSON.stringify(newManifest, null, 2);
         },
-        rename: 'manifest.chrome.json'
+        rename: 'manifest.firefox.json'
       }]
     })
   ]