Diff of MV2/MV3 codebases

.github/workflows/build.yml

@@ -3,6 +3,10 @@ on:
   push:
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -14,10 +18,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'yarn'
 
-      - name: Install modules
-        run: yarn
+      - run: |
+          npm install
+
+          # TODO: there's way too many errors right now
+          # npm run format:check
 
-      - name: Build
-        run: yarn build
+          npm run build

.github/workflows/release.yml

@@ -1,8 +1,9 @@
 name: Latest Release Build
+
 on:
   release:
     types:
-      - released
+      - published
 
 jobs:
   build:
@@ -15,21 +16,22 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'yarn'
 
-      - name: Install modules
-        run: yarn
+      - run: |
+          npm install
+
+          # TODO: there's way too many errors right now
+          # npm run format:check
 
-      - name: Build extensions
-        run: |
-          VERSION=$(echo -n ${{ github.ref }} | sed 's/[refs\/tagv]//g') yarn build
-          yarn package
+          # Extract version number from the tag
+          VERSION=$(echo -n "${{ github.ref }}" | sed 's/[refs\/tagv]//g' | sed 's/-.*//')
+          npm run build
 
       - name: Upload Chrome package to release
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: dist/HyperChat-Chrome.zip
+          file: build/HyperChat-chrome.zip
           asset_name: HyperChat-Chrome.zip
           tag: ${{ github.ref }}
           overwrite: true
@@ -38,7 +40,7 @@ jobs:
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: dist/HyperChat-Firefox.zip
+          file: build/HyperChat-firefox.zip
           asset_name: HyperChat-Firefox.zip
           tag: ${{ github.ref }}
           overwrite: true

.gitignore

@@ -1,18 +1,15 @@
 .DS_Store
 node_modules
 build
-dist
 package-lock.json
+.eslintcache
 
 # local env files
 .env.local
 .env.*.local
 
 # Log files
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -22,10 +19,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-
-# Vue Browser Extension Output
-*.pem
-*.pub
-*.zip
-artifacts
-.eslintcache

README.md

@@ -30,13 +30,28 @@ Open the repository and npm install:
 ```bash
 cd hyperchat
 git checkout master # switch to master for MV2 first!
-yarn # install dependencies
+npm install # install dependencies
 ```
 
 Build or serve the extension:
 
 ```bash
-yarn start # watch mode
-yarn build # production mode
-VERSION=x.x.x yarn build
+npm run dev:chrome # devserver for Chrome extension
+npm run dev:firefox # devserver for Firefox extension
+
+npm run start:chrome # devserver + open extension in Chrome
+npm run start:firefox # devserver + open extension in Firefox
+
+VERSION=x.x.x npm run build # production mode (Chrome & Firefox)
+VERSION=x.x.x npm run build:chrome # production mode (Chrome)
+VERSION=x.x.x npm run build:firefox # production mode (Firefox)
 ```
+
+## Building for Production
+
+Our build script is an automated GitHub action. To simulate the build, please follow the steps outlined in the [Latest Release Build](.github/workflows/build.yml) workflow file.
+
+Clarifications:
+- `${{ github.ref }}` should evaluate to `vX.X.X`, where `X.X.X` is the version number.
+
+The built ZIP files can be found in the `build` directory.

package.json

@@ -1,56 +1,50 @@
 {
   "name": "HyperChat",
-  "version": "69.42.0",
+  "version": "3.0.4",
   "private": true,
   "scripts": {
-    "build": "vite build",
-    "package": "node utils/package.js",
-    "start": "cross-env MINIFY=false vite build --watch",
-    "start:none": "cross-env MINIFY=false BROWSER=none vite build --watch",
-    "start:firefox": "cross-env MINIFY=false BROWSER=firefox vite build --watch",
-    "format:check": "eslint ."
+    "build": "npm run build:chrome && npm run build:firefox",
+    "build:chrome": "cross-env BROWSER=chrome vite build",
+    "build:firefox": "cross-env BROWSER=firefox vite build",
+    "dev:chrome": "cross-env MINIFY=false BROWSER=chrome vite build --watch",
+    "dev:firefox": "cross-env MINIFY=false BROWSER=firefox vite build --watch",
+    "start:chrome": "cross-env HC_AUTOLAUNCH=menace npm run dev:chrome",
+    "start:firefox": "cross-env HC_AUTOLAUNCH=menace npm run dev:firefox",
+    "format": "eslint src --fix",
+    "format:check": "eslint src"
   },
-  "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^4.0.3",
+  "dependencies": {
     "@livetl/svelte-webext-stores": "^0.0.14",
     "@mdi/js": "^6.5.95",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.34",
+    "iframe-translator": "^0.3.7",
+    "is-dark-color": "^1.2.0",
+    "sha-1": "^1.0.0",
+    "smelte": "^1.1.8",
+    "svelte": "^3.49.0",
+    "tailwindcss": "^2.2.7"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@sveltejs/vite-plugin-svelte": "1.0.0-next.34",
     "@tsconfig/svelte": "^2.0.1",
-    "@types/chrome": "^0.0.149",
-    "@types/download": "8.0.1",
-    "@typescript-eslint/eslint-plugin": "4",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@types/chrome": "^0.0.193",
     "autoprefixer": "^10.3.1",
-    "body-parser": "1.19.0",
+    "body-parser": "1.20.3",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.7",
-    "download": "8.0.0",
-    "eslint": "7",
-    "eslint-config-standard-with-typescript": "^20.0.0",
-    "eslint-plugin-import": "2",
-    "eslint-plugin-node": "11",
-    "eslint-plugin-promise": "4",
+    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-svelte3": "^3.2.0",
-    "express": "4.17.1",
-    "iframe-translator": "^0.3.7",
-    "is-dark-color": "^1.2.0",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.31",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^14.0.2",
     "postcss-input-range": "^4.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^10.1.3",
     "rollup-plugin-copy": "^3.4.0",
-    "safe-compare": "1.1.4",
-    "sha-1": "^1.0.0",
-    "smelte": "^1.1.8",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.7.4",
-    "svelte-waypoint": "^0.1.4",
-    "tailwindcss": "^2.2.7",
-    "typescript": "^4.7.4",
-    "vite": "2.7.10",
-    "vite-plugin-web-extension": "^1.0.7"
+    "terser": "^5.19.2",
+    "typescript": "4.3.5",
+    "vite": "2.9.16",
+    "vite-plugin-web-extension": "^1.4.0",
+    "vite-plugin-zip-pack": "1.0.7"
   }
 }

src/components/Hyperchat.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import '../stylesheets/scrollbar.css';
-  import { onDestroy, afterUpdate, tick } from 'svelte';
+  import { onDestroy, onMount, afterUpdate, tick } from 'svelte';
   import { fade } from 'svelte/transition';
   import dark from 'smelte/src/dark';
   import WelcomeMessage from './WelcomeMessage.svelte';
@@ -14,14 +14,20 @@
   import SuperchatViewDialog from './SuperchatViewDialog.svelte';
   import StickyBar from './StickyBar.svelte';
   import {
-    paramsTabId,
-    paramsFrameId,
-    paramsIsReplay,
+    // paramsTabId,
+    // paramsFrameId,
+    // paramsIsReplay,
     Theme,
     YoutubeEmojiRenderMode,
-    chatUserActionsItems
+    chatUserActionsItems,
   } from '../ts/chat-constants';
-  import { isAllEmoji, isChatMessage, isPrivileged, responseIsAction } from '../ts/chat-utils';
+  import {
+    isAllEmoji,
+    isChatMessage,
+    isPrivileged,
+    responseIsAction,
+    useReconnect
+  } from '../ts/chat-utils';
   import Button from 'smelte/src/components/Button';
   import {
     theme,
@@ -46,11 +52,15 @@
     enableHighlightedMentions,
     ytDark
   } from '../ts/storage';
-  import { version } from '../manifest.json';
 
   const welcome = { welcome: true, message: { messageId: 'welcome' } };
   type Welcome = typeof welcome;
 
+  const params = new URLSearchParams(window.location.search);
+  const paramsTabId = params.get('tabid');
+  const paramsFrameId = params.get('frameid');
+  const paramsIsReplay = params.get('isReplay');
+
   const CHAT_HISTORY_SIZE = 150;
   const TRUNCATE_SIZE = 20;
   let messageActions: (Chat.MessageAction | Welcome)[] = [];
@@ -86,7 +96,7 @@
   $: hasBanner = pinned || redirect || (summary && $showChatSummary);
   let div: HTMLElement;
   let isAtBottom = true;
-  let truncateInterval: number;
+  let truncateInterval: number | undefined;
   const isReplay = paramsIsReplay;
   const smelteDark = dark();
 
@@ -287,15 +297,18 @@
         break;
       case 'registerClientResponse':
         break;
+      case 'ping':
+        break;
       default:
         console.error('Unknown payload type', { port, response });
         break;
     }
   };
 
   // Doesn't work well with onMount, so onLoad will have to do
-  const onLoad = () => {
-    $lastOpenedVersion = version;
+  // Update: use onMount because hc now mounts in content script
+  const onLoad = (): (() => void) | undefined => {
+    $lastOpenedVersion = __VERSION__;
     document.body.classList.add('overflow-hidden');
 
     if (paramsTabId == null || paramsFrameId == null || paramsTabId.length < 1 || paramsFrameId.length < 1) {
@@ -308,21 +321,35 @@
       frameId: parseInt(paramsFrameId)
     };
 
-    $port = chrome.runtime.connect();
+    let hasRun = false;
+    $port = useReconnect(() => {
+      const port = chrome.runtime.connect({
+        name: JSON.stringify(frameInfo)
+      }) as Chat.Port;
 
-    $port?.onMessage.addListener(onPortMessage);
+      port.onMessage.addListener(onPortMessage);
 
-    $port?.postMessage({
-      type: 'registerClient',
-      frameInfo,
-      getInitialData: true
-    });
-    $port?.postMessage({
-      type: 'getTheme',
-      frameInfo
+      port.postMessage({
+        type: 'registerClient',
+        getInitialData: true
+      });
+
+      if (!hasRun) {
+        port.postMessage({
+          type: 'getTheme'
+        });
+      }
+
+      hasRun = true;
+
+      return port;
     });
+
+    return () => $port?.destroy && $port?.destroy();
   };
 
+  onMount(onLoad);
+
   const onRefresh = () => {
     if (isAtBottom) {
       scrollToBottom();
@@ -348,7 +375,7 @@
     $showProfileIcons, $showUsernames, $showTimestamps, $showUserBadges
   );
 
-  const containerClass = 'h-screen w-screen text-black dark:text-white bg-white bg-ytbg-light dark:bg-ytbg-dark flex flex-col justify-between';
+  const containerClass = 'hyperchat-root h-screen w-screen text-black dark:text-white bg-white bg-ytbg-light dark:bg-ytbg-dark flex flex-col justify-between max-w-none';
 
   const isSuperchat = (action: Chat.MessageAction) => (action.message.superChat || action.message.superSticker);
   const isMembership = (action: Chat.MessageAction) => (action.message.membership || action.message.membershipGiftPurchase);
@@ -395,13 +422,13 @@
 <svelte:window on:resize={() => {
   scrollToBottom();
   topBarResized();
-}} on:load={onLoad} />
+}} />
 
 <div class={containerClass} style="font-size: 13px">
   {#if $enableStickySuperchatBar}
     <StickyBar />
   {/if}
-  <div class="w-full min-h-0 flex justify-end flex-col relative">
+  <div class="w-screen min-h-0 flex justify-end flex-col relative">
     <div bind:this={div} on:scroll={checkAtBottom} class="content overflow-y-scroll">
       <div style="height: {topBarSize}px;" />
       {#each messageActions as action (action.message.messageId)}