bump version

Fixes #2276

.github/workflows/ci.yml

@@ -10,10 +10,10 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - run: npm ci
@@ -27,7 +27,7 @@ jobs:
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: ChromeExtension
           path: dist
@@ -39,7 +39,7 @@ jobs:
       # Create Firefox artifacts
       - name: Create Firefox artifacts
         run: npm run build:firefox
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtension
           path: dist
@@ -50,7 +50,7 @@ jobs:
       # Create Beta artifacts (Builds with the name changed to beta)
       - name: Create Chrome Beta artifacts
         run: npm run build:chrome -- --env stream=beta
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: ChromeExtensionBeta
           path: dist
@@ -60,7 +60,7 @@ jobs:
 
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env stream=beta
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtensionBeta
           path: dist

.github/workflows/release.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - name: Copy configuration
@@ -35,24 +35,11 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
 
       - run: npm ci
-      
-      # Create Chrome artifacts
-      - name: Create Chrome artifacts
-        run: npm run build:chrome
-      - run: mkdir ./builds
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/ChromeExtension.zip *
-      - name: Upload ChromeExtension to release
-        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
-        with:
-          args: builds/ChromeExtension.zip
-          name: ChromeExtension.zip
-          path: ./builds/ChromeExtension.zip
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
 
       # Create Firefox artifacts
       - name: Create Firefox artifacts
         run: npm run build:firefox
+      - run: mkdir ./builds
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/FirefoxExtension.zip *
       - name: Upload FirefoxExtension to release
@@ -62,32 +49,18 @@ jobs:
           name: FirefoxExtension.zip
           path: ./builds/FirefoxExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      # Create Beta artifacts (Builds with the name changed to beta)
-      - name: Create Chrome Beta artifacts
-        run: npm run build:chrome -- --env stream=beta
+      
+      # Create Chrome artifacts
+      - name: Create Chrome artifacts
+        run: npm run build:chrome
       - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
-      - name: Upload ChromeExtensionBeta to release
+        run: cd ./dist ; zip -r ../builds/ChromeExtension.zip *
+      - name: Upload ChromeExtension to release
         uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
-          args: builds/ChromeExtensionBeta.zip
-          name: ChromeExtensionBeta.zip
-          path: ./builds/ChromeExtensionBeta.zip
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-
-      # Create Safari artifacts
-      - name: Create Safari artifacts
-        run: npm run build:safari
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
-      - name: Upload SafariExtension to release
-        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
-        with:
-          args: builds/SafariExtension.zip
-          name: SafariExtension.zip
-          path: ./builds/SafariExtension.zip
+          args: builds/ChromeExtension.zip
+          name: ChromeExtension.zip
+          path: ./builds/ChromeExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
 
       # Create Edge artifacts
@@ -105,10 +78,36 @@ jobs:
           path: ./builds/EdgeExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
 
+      # Create Safari artifacts
+      - name: Create Safari artifacts
+        run: npm run build:safari
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
+      - name: Upload SafariExtension to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/SafariExtension.zip
+          name: SafariExtension.zip
+          path: ./builds/SafariExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Create Beta artifacts (Builds with the name changed to beta)
+      - name: Create Chrome Beta artifacts
+        run: npm run build:chrome -- --env stream=beta
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
+      - name: Upload ChromeExtensionBeta to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/ChromeExtensionBeta.zip
+          name: ChromeExtensionBeta.zip
+          path: ./builds/ChromeExtensionBeta.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
       # Firefox Beta
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env stream=beta
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtensionBeta
           path: dist
@@ -125,7 +124,7 @@ jobs:
         run: sudo apt-get install rename
       - name: Rename signed file
         run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtensionSigned.xpi
           path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi

.github/workflows/tests.yml

@@ -9,23 +9,35 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - run: npm ci
-      - run: sudo apt-get install chromium-chromedriver
+      - run: sudo apt-get remove google-chrome-stable
+
+      - uses: browser-actions/setup-chrome@c785b87e244131f27c9f19c1a33e2ead956ab7ce
+        with:
+          chrome-version: 135
+          install-dependencies: true
+          install-chromedriver: true
       
       - name: Copy configuration
         run: cp config.json.example config.json
+
+      - name: Set up WireGuard Connection
+        uses: niklaskeerl/easy-wireguard-action@50341d5f4b8245ff3a90e278aca67b2d283c78d0
+        with:
+          WG_CONFIG_FILE: ${{ secrets.WG_CONFIG_FILE }}
+
       - name: Run tests
         run: npm run test
 
       - name: Upload results on fail
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: Test Results
           path: ./test-results

.github/workflows/update-oss-attribution.yml

@@ -12,10 +12,10 @@ jobs:
   update-oss:
     runs-on: ubuntu-latest 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - name: Install and generate attribution
@@ -29,7 +29,7 @@ jobs:
           cd ci && npx ts-node prettify.ts
 
       - name: Create pull request to update list
-        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
+        uses: peter-evans/create-pull-request@v7
         # v4.2.3
         with:
           commit-message: Update OSS Attribution

.github/workflows/updateInvidous.yml

@@ -8,7 +8,7 @@ jobs:
   check-list:
     runs-on: ubuntu-latest 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
       - name: Download instance lists
@@ -21,7 +21,7 @@ jobs:
         run: npm run ci:invidious
 
       - name: Create pull request to update list
-        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
+        uses: peter-evans/create-pull-request@v7
         # v4.2.3
         with:
           commit-message: Update Invidious List

CONTRIBUTING.md

@@ -5,7 +5,7 @@ https://crowdin.com/project/sponsorblock
 
 # Building
 ## Building locally
-0. You must have [Node.js 16 or later](https://nodejs.org/) and npm installed. Works best on Linux
+0. You must have [Node.js 22 or later](https://nodejs.org/) and npm installed. Works best on Linux
 1. Clone with submodules
   ```bash
   git clone --recursive https://github.com/ajayyy/SponsorBlock

ci/generateList.ts

@@ -7,8 +7,7 @@ This file should not be shipped with the extension
 /*
 Criteria for inclusion:
 Invidious
-- 30d uptime >= 90%
-- available for at least 80/90 days
+- uptime >= 80%
 - must have been up for at least 90 days
 - HTTPS only
 - url includes name (this is to avoid redirects)

ci/invidiousCI.ts

@@ -1,31 +1,34 @@
-import { InvidiousInstance, instanceMap } from "./invidiousType"
+import { InvidiousInstance, monitor } from "./invidiousType"
 
 import * as data from "../ci/invidious_instances.json";
 
 // only https servers
-const mapped: instanceMap = data
-  .filter((i: InvidiousInstance) => i[1]?.type === "https")
-  .map((instance: InvidiousInstance) => {
+const mapped = (data as InvidiousInstance[])
+  .filter((i) =>
+    i[1]?.type === "https"
+    && i[1]?.monitor?.enabled
+  )
+  .map((instance) => {
+    const monitor = instance[1].monitor as monitor;
     return {
       name: instance[0],
       url: instance[1].uri,
-      dailyRatios: instance[1].monitor.dailyRatios,
-      thirtyDayUptime: instance[1]?.monitor["30dRatio"].ratio,
+      uptime: monitor.uptime || 0,
+      down: monitor.down ?? false,
+      created_at: monitor.created_at,
     }
   });
 
 // reliability and sanity checks
 const reliableCheck = mapped
   .filter(instance => {
-    // 30d uptime >= 90%
-    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90;
-    // available for at least 80/90 days
-    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black");
-    return thirtyDayUptime && dailyRatioCheck.length >= 80;
+    const uptime = instance.uptime > 80 && !instance.down;
+    const nameIncluded = instance.url.includes(instance.name);
+    const ninetyDays = 90 * 24 * 60 * 60 * 1000;
+    const ninetyDaysAgo = new Date(Date.now() - ninetyDays);
+    const createdAt = new Date(instance.created_at).getTime() < ninetyDaysAgo.getTime();
+    return uptime && nameIncluded && createdAt;
   })
-  // url includes name
-  .filter(instance => instance.url.includes(instance.name));
 
-export function getInvidiousList(): string[] {
-  return reliableCheck.map(instance => instance.name).sort()
-}
+export const getInvidiousList = (): string[] =>
+  reliableCheck.map(instance => instance.name).sort()

ci/invidiousType.ts

@@ -1,54 +1,72 @@
-type ratio = {
-  ratio: string;
-  label: string;
-}
-
-export type instanceMap = {
-  name: string;
-  url: string;
-  dailyRatios: {ratio: string; label: string }[];
-  thirtyDayUptime: string;
-}[]
-
 export type InvidiousInstance = [
   string,
   {
     flag: string;
     region: string;
-    stats: null | {
-      version: string;
-      software: {
-        name: string;
-        version: string;
-        branch: string;
-      };
-      openRegistrations: boolean;
-      usage: {
-        users: {
-          total: number;
-          activeHalfyear: number;
-          activeMonth: number;
-        };
-      };
-      metadata: {
-        updatedAt: number;
-        lastChannelRefreshedAt: number;
-      };
-    };
-    cors: boolean | null;
-    api: boolean | null;
+    stats: null | ivStats;
+    cors: null | boolean;
+    api: null | boolean;
     type: "https" | "http" | "onion" | "i2p";
     uri: string;
-    monitor: null | {
-      monitorId: number;
-      createdAt: number;
-      statusClass: string;
-      name: string;
-      url: string | null;
-      type: "HTTP(s)";
-      dailyRatios: ratio[];
-      "90dRatio": ratio;
-      "30dRatio": ratio;
-    };
+    monitor: null | monitor;
   }
-]
+]
+
+export type monitor = {
+  token: string;
+  url: string;
+  alias: string;
+  last_status: number;
+  uptime: number;
+  down: boolean;
+  down_since: null | string;
+  up_since: null | string;
+  error: null | string;
+  period: number;
+  apdex_t: number;
+  string_match: string;
+  enabled: boolean;
+  published: boolean;
+  disabled_locations: string[];
+  recipients: string[];
+  last_check_at: string;
+  next_check_at: string;
+  created_at: string;
+  mute_until: null | string;
+  favicon_url: string;
+  custom_headers: Record<string, string>;
+  http_verb: string;
+  http_body: string;
+  ssl: {
+    tested_at: string;
+    expires_at: string;
+    valid: boolean;
+    error: null | string;
+  };
+}
+
+export type ivStats = {
+  version: string;
+  software: {
+    name: "invidious" | string;
+    version: string;
+    branch: "master" | string;
+  };
+  openRegistrations: boolean;
+  usage: {
+    users: {
+      total: number;
+      activeHalfyear: number;
+      activeMonth: number;
+    };
+  };
+  metadata: {
+    updatedAt: number;
+    lastChannelRefreshedAt: number;
+  };
+  playback: {
+    totalRequests: number;
+    successfulRequests: number;
+    ratio: number;
+  };
+}

ci/invidiouslist.json

@@ -1 +1 @@
-["www.youtubekids.com","anontube.lvkaszus.pl","inv.citw.lgbt","inv.in.projectsegfau.lt","inv.tux.pizza","inv.zzls.xyz","invidious.asir.dev","invidious.drgns.space","invidious.fdn.fr","invidious.flokinet.to","invidious.io.lol","invidious.lunar.icu","invidious.nerdvpn.de","invidious.no-logs.com","invidious.perennialte.ch","invidious.privacydev.net","invidious.private.coffee","invidious.projectsegfau.lt","invidious.protokolla.fi","invidious.slipfox.xyz","iv.datura.network","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.cdaut.de","yt.drgnz.club","yt.oelrichsgarcia.de"]
+["www.youtubekids.com","inv.nadeko.net","inv.tux.pizza","invidious.adminforge.de","invidious.jing.rocks","invidious.nerdvpn.de","invidious.perennialte.ch","invidious.privacyredirect.com","invidious.reallyaweso.me","invidious.yourdevice.ch","iv.ggtyler.dev","iv.nboeck.de","yewtu.be"]

config.json.example

@@ -24,7 +24,7 @@
         "intro": "https://wiki.sponsor.ajay.app/w/Intermission/Intro_Animation",
         "outro": "https://wiki.sponsor.ajay.app/w/Endcards/Credits",
         "preview": "https://wiki.sponsor.ajay.app/w/Preview/Recap",
-        "filler": "https://wiki.sponsor.ajay.app/w/Filler_Tangent",
+        "filler": "https://wiki.sponsor.ajay.app/w/Tangents/Jokes",
         "music_offtopic": "https://wiki.sponsor.ajay.app/w/Music:_Non-Music_Section",
         "poi_highlight": "https://wiki.sponsor.ajay.app/w/Highlight",
         "guidelines": "https://wiki.sponsor.ajay.app/w/Guidelines",

manifest/chrome-manifest-extra.json

@@ -1,12 +1,156 @@
 {
-  "optional_permissions": [
-    "declarativeContent",
-    "webNavigation"
+  "host_permissions": [
+    "https://*.youtube.com/*",
+    "https://sponsor.ajay.app/*"
   ],
-  "background": {
-    "persistent": false
+  "optional_host_permissions": [
+    "*://*/*"
+  ],
+  "web_accessible_resources": [{
+    "resources": [
+      "icons/LogoSponsorBlocker256px.png",
+      "icons/IconSponsorBlocker256px.png",
+      "icons/PlayerStartIconSponsorBlocker.svg",
+      "icons/PlayerStopIconSponsorBlocker.svg",
+      "icons/PlayerUploadIconSponsorBlocker.svg",
+      "icons/PlayerUploadFailedIconSponsorBlocker.svg",
+      "icons/PlayerCancelSegmentIconSponsorBlocker.svg",
+      "icons/clipboard.svg",
+      "icons/settings.svg",
+      "icons/pencil.svg",
+      "icons/check.svg",
+      "icons/check-smaller.svg",
+      "icons/upvote.png",
+      "icons/downvote.png",
+      "icons/thumbs_down.svg",
+      "icons/thumbs_down_locked.svg",
+      "icons/thumbs_up.svg",
+      "icons/help.svg",
+      "icons/report.png",
+      "icons/close.png",
+      "icons/skipIcon.svg",
+      "icons/refresh.svg",
+      "icons/beep.oga",
+      "icons/pause.svg",
+      "icons/stop.svg",
+      "icons/skip.svg",
+      "icons/heart.svg",
+      "icons/visible.svg",
+      "icons/not_visible.svg",
+      "icons/sort.svg",
+      "icons/money.svg",
+      "icons/segway.png",
+      "icons/close-smaller.svg",
+      "icons/right-arrow.svg",
+      "icons/campaign.svg",
+      "icons/star.svg",
+      "icons/lightbulb.svg",
+      "icons/bolt.svg",
+      "icons/stopwatch.svg",
+      "icons/music-note.svg",
+      "icons/import.svg",
+      "icons/export.svg",
+      "icons/PlayerInfoIconSponsorBlocker.svg",
+      "icons/PlayerDeleteIconSponsorBlocker.svg",
+      "icons/dearrow.svg",
+      "popup.html",
+      "popup.css",
+      "content.css",
+      "shared.css",
+      "js/document.js",
+      "libs/Source+Sans+Pro.css",
+      "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2",
+      "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2",
+      "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2",
+      "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2"
+    ],
+    "matches": ["<all_urls>"]
+  }],
+  "content_scripts": [
+    {
+        "world": "MAIN",
+        "js": [
+            "./js/document.js"
+        ],
+        "matches": [
+            "https://*.youtube.com/*",
+            "https://www.youtube-nocookie.com/embed/*"
+        ],
+        "exclude_matches": [
+          "https://accounts.youtube.com/RotateCookiesPage*"
+      ],
+        "all_frames": true,
+        "run_at": "document_start"
+    },
+    {
+      "world": "ISOLATED",
+      "js": [
+          "./js/content.js"
+      ],
+      "css": [
+        "content.css",
+        "shared.css"
+      ],
+      "matches": [
+          "https://*.youtube.com/*",
+          "https://www.youtube-nocookie.com/embed/*"
+      ],
+      "exclude_matches": [
+        "https://accounts.youtube.com/RotateCookiesPage*"
+      ],
+      "all_frames": true,
+      "run_at": "document_start"
+  }
+  ],
+  "action": {
+    "default_title": "SponsorBlock",
+    "default_popup": "popup.html",
+    "default_icon": {
+        "16": "icons/IconSponsorBlocker16px.png",
+        "32": "icons/IconSponsorBlocker32px.png",
+        "64": "icons/IconSponsorBlocker64px.png",
+        "128": "icons/IconSponsorBlocker128px.png"
+    },
+    "theme_icons": [
+        {
+            "light": "icons/IconSponsorBlocker16px.png",
+            "dark": "icons/IconSponsorBlocker16px.png",
+            "size": 16
+        },
+        {
+            "light": "icons/IconSponsorBlocker32px.png",
+            "dark": "icons/IconSponsorBlocker32px.png",
+            "size": 32
+        },
+        {
+            "light": "icons/IconSponsorBlocker64px.png",
+            "dark": "icons/IconSponsorBlocker64px.png",
+            "size": 64
+        },
+        {
+            "light": "icons/IconSponsorBlocker128px.png",
+            "dark": "icons/IconSponsorBlocker128px.png",
+            "size": 128
+        },
+        {
+            "light": "icons/IconSponsorBlocker256px.png",
+            "dark": "icons/IconSponsorBlocker256px.png",
+            "size": 256
+        },
+        {
+            "light": "icons/IconSponsorBlocker512px.png",
+            "dark": "icons/IconSponsorBlocker512px.png",
+            "size": 512
+        },
+        {
+            "light": "icons/IconSponsorBlocker1024px.png",
+            "dark": "icons/IconSponsorBlocker1024px.png",
+            "size": 1024
+        }
+    ]
   },
-  "permissions": [
-    "https://*.youtube.com/*"
-  ]
+  "background": {
+    "service_worker": "./js/background.js"
+  },
+  "manifest_version": 3
 }

manifest/firefox-manifest-extra.json

@@ -2,7 +2,7 @@
   "browser_specific_settings": {
     "gecko": {
       "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "56.0"
+      "strict_min_version": "102.0"
     },
     "gecko_android": {
       "strict_min_version": "113.0"
@@ -11,9 +11,6 @@
   "background": {
     "persistent": false
   },
-  "permissions": [
-    "scripting"
-  ],
   "browser_action": {
     "default_area": "navbar"
   }

manifest/manifest-v2-extra.json

@@ -0,0 +1,136 @@
+{
+    "web_accessible_resources": [
+        "icons/LogoSponsorBlocker256px.png",
+        "icons/IconSponsorBlocker256px.png",
+        "icons/PlayerStartIconSponsorBlocker.svg",
+        "icons/PlayerStopIconSponsorBlocker.svg",
+        "icons/PlayerUploadIconSponsorBlocker.svg",
+        "icons/PlayerUploadFailedIconSponsorBlocker.svg",
+        "icons/PlayerCancelSegmentIconSponsorBlocker.svg",
+        "icons/clipboard.svg",
+        "icons/settings.svg",
+        "icons/pencil.svg",
+        "icons/check.svg",
+        "icons/check-smaller.svg",
+        "icons/upvote.png",
+        "icons/downvote.png",
+        "icons/thumbs_down.svg",
+        "icons/thumbs_down_locked.svg",
+        "icons/thumbs_up.svg",
+        "icons/help.svg",
+        "icons/report.png",
+        "icons/close.png",
+        "icons/skipIcon.svg",
+        "icons/refresh.svg",
+        "icons/beep.oga",
+        "icons/pause.svg",
+        "icons/stop.svg",
+        "icons/skip.svg",
+        "icons/heart.svg",
+        "icons/visible.svg",
+        "icons/not_visible.svg",
+        "icons/sort.svg",
+        "icons/money.svg",
+        "icons/segway.png",
+        "icons/close-smaller.svg",
+        "icons/right-arrow.svg",
+        "icons/campaign.svg",
+        "icons/star.svg",
+        "icons/lightbulb.svg",
+        "icons/bolt.svg",
+        "icons/stopwatch.svg",
+        "icons/music-note.svg",
+        "icons/import.svg",
+        "icons/export.svg",
+        "icons/PlayerInfoIconSponsorBlocker.svg",
+        "icons/PlayerDeleteIconSponsorBlocker.svg",
+        "icons/dearrow.svg",
+        "popup.html",
+        "popup.css",
+        "content.css",
+        "shared.css",
+        "js/document.js",
+        "libs/Source+Sans+Pro.css",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2"
+    ],
+    "permissions": [
+        "https://sponsor.ajay.app/*"
+    ],
+    "optional_permissions": [
+        "*://*/*"
+    ],
+    "browser_action": {
+        "default_title": "SponsorBlock",
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icons/IconSponsorBlocker16px.png",
+            "32": "icons/IconSponsorBlocker32px.png",
+            "64": "icons/IconSponsorBlocker64px.png",
+            "128": "icons/IconSponsorBlocker128px.png"
+        },
+        "theme_icons": [
+            {
+                "light": "icons/IconSponsorBlocker16px.png",
+                "dark": "icons/IconSponsorBlocker16px.png",
+                "size": 16
+            },
+            {
+                "light": "icons/IconSponsorBlocker32px.png",
+                "dark": "icons/IconSponsorBlocker32px.png",
+                "size": 32
+            },
+            {
+                "light": "icons/IconSponsorBlocker64px.png",
+                "dark": "icons/IconSponsorBlocker64px.png",
+                "size": 64
+            },
+            {
+                "light": "icons/IconSponsorBlocker128px.png",
+                "dark": "icons/IconSponsorBlocker128px.png",
+                "size": 128
+            },
+            {
+                "light": "icons/IconSponsorBlocker256px.png",
+                "dark": "icons/IconSponsorBlocker256px.png",
+                "size": 256
+            },
+            {
+                "light": "icons/IconSponsorBlocker512px.png",
+                "dark": "icons/IconSponsorBlocker512px.png",
+                "size": 512
+            },
+            {
+                "light": "icons/IconSponsorBlocker1024px.png",
+                "dark": "icons/IconSponsorBlocker1024px.png",
+                "size": 1024
+            }
+        ]
+    },
+    "background": {
+        "scripts":[
+            "./js/background.js"
+        ]
+    },
+    "content_scripts": [{
+        "run_at": "document_start",
+        "matches": [
+            "https://*.youtube.com/*",
+            "https://www.youtube-nocookie.com/embed/*"
+        ],
+        "exclude_matches": [
+            "https://accounts.youtube.com/RotateCookiesPage*"
+        ],
+        "all_frames": true,
+        "js": [
+            "./js/content.js"
+        ],
+        "css": [
+            "content.css",
+            "shared.css"
+        ]
+    }],
+    "manifest_version": 2
+}  

manifest/manifest.json

@@ -1,141 +1,10 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.6.1",
+    "version": "5.13.1",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",
-    "content_scripts": [{
-        "run_at": "document_start",
-        "matches": [
-            "https://*.youtube.com/*",
-            "https://www.youtube-nocookie.com/embed/*"
-        ],
-        "all_frames": true,
-        "js": [
-            "./js/content.js"
-        ],
-        "css": [
-            "content.css",
-            "shared.css"
-        ]
-    }],
-    "web_accessible_resources": [
-        "icons/LogoSponsorBlocker256px.png",
-        "icons/IconSponsorBlocker256px.png",
-        "icons/PlayerStartIconSponsorBlocker.svg",
-        "icons/PlayerStopIconSponsorBlocker.svg",
-        "icons/PlayerUploadIconSponsorBlocker.svg",
-        "icons/PlayerUploadFailedIconSponsorBlocker.svg",
-        "icons/PlayerCancelSegmentIconSponsorBlocker.svg",
-        "icons/clipboard.svg",
-        "icons/settings.svg",
-        "icons/pencil.svg",
-        "icons/check.svg",
-        "icons/check-smaller.svg",
-        "icons/upvote.png",
-        "icons/downvote.png",
-        "icons/thumbs_down.svg",
-        "icons/thumbs_down_locked.svg",
-        "icons/thumbs_up.svg",
-        "icons/help.svg",
-        "icons/report.png",
-        "icons/close.png",
-        "icons/skipIcon.svg",
-        "icons/refresh.svg",
-        "icons/beep.ogg",
-        "icons/pause.svg",
-        "icons/stop.svg",
-        "icons/skip.svg",
-        "icons/heart.svg",
-        "icons/visible.svg",
-        "icons/not_visible.svg",
-        "icons/sort.svg",
-        "icons/money.svg",
-        "icons/segway.png",
-        "icons/close-smaller.svg",
-        "icons/right-arrow.svg",
-        "icons/campaign.svg",
-        "icons/star.svg",
-        "icons/lightbulb.svg",
-        "icons/bolt.svg",
-        "icons/stopwatch.svg",
-        "icons/music-note.svg",
-        "icons/import.svg",
-        "icons/export.svg",
-        "icons/PlayerInfoIconSponsorBlocker.svg",
-        "icons/PlayerDeleteIconSponsorBlocker.svg",
-        "icons/dearrow.svg",
-        "popup.html",
-        "popup.css",
-        "content.css",
-        "shared.css",
-        "js/document.js",
-        "libs/Source+Sans+Pro.css",
-        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2",
-        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2",
-        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2",
-        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2"
-    ],
-    "permissions": [
-        "storage",
-        "https://sponsor.ajay.app/*"
-    ],
-    "optional_permissions": [
-        "*://*/*"
-    ],
-    "browser_action": {
-        "default_title": "SponsorBlock",
-        "default_popup": "popup.html",
-        "default_icon": {
-            "16": "icons/IconSponsorBlocker16px.png",
-            "32": "icons/IconSponsorBlocker32px.png",
-            "64": "icons/IconSponsorBlocker64px.png",
-            "128": "icons/IconSponsorBlocker128px.png"
-        },
-        "theme_icons": [
-            {
-                "light": "icons/IconSponsorBlocker16px.png",
-                "dark": "icons/IconSponsorBlocker16px.png",
-                "size": 16
-            },
-            {
-                "light": "icons/IconSponsorBlocker32px.png",
-                "dark": "icons/IconSponsorBlocker32px.png",
-                "size": 32
-            },
-            {
-                "light": "icons/IconSponsorBlocker64px.png",
-                "dark": "icons/IconSponsorBlocker64px.png",
-                "size": 64
-            },
-            {
-                "light": "icons/IconSponsorBlocker128px.png",
-                "dark": "icons/IconSponsorBlocker128px.png",
-                "size": 128
-            },
-            {
-                "light": "icons/IconSponsorBlocker256px.png",
-                "dark": "icons/IconSponsorBlocker256px.png",
-                "size": 256
-            },
-            {
-                "light": "icons/IconSponsorBlocker512px.png",
-                "dark": "icons/IconSponsorBlocker512px.png",
-                "size": 512
-            },
-            {
-                "light": "icons/IconSponsorBlocker1024px.png",
-                "dark": "icons/IconSponsorBlocker1024px.png",
-                "size": 1024
-            }
-        ]
-    }, 
-    "background": {
-        "scripts":[
-        "./js/background.js"
-        ]
-    },
     "icons": {
         "16": "icons/IconSponsorBlocker16px.png",
         "32": "icons/IconSponsorBlocker32px.png",
@@ -145,9 +14,12 @@
         "512": "icons/IconSponsorBlocker512px.png",
         "1024": "icons/IconSponsorBlocker1024px.png"
     },
+    "permissions": [
+        "storage",
+        "scripting"
+    ],
     "options_ui": {
         "page": "options/options.html",
         "open_in_tab": true
-    },
-    "manifest_version": 2
+    }
 }  

manifest/safari-manifest-extra.json

@@ -2,10 +2,15 @@
   "background": {
     "persistent": false
   },
-  "permissions": [
-    "scripting"
-  ],
   "optional_permissions": [
     "webNavigation"
-  ]
+  ],
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/SafariIconSponsorBlocker16px.png",
+      "32": "icons/SafariIconSponsorBlocker32px.png",
+      "64": "icons/SafariIconSponsorBlocker64px.png",
+      "128": "icons/SafariIconSponsorBlocker128px.png"
+    }
+  }
 }

package.json

@@ -23,7 +23,7 @@
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "chromedriver": "^110.0.0",
+    "chromedriver": "^135.0.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",
@@ -38,14 +38,14 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "4.9",
-    "web-ext": "^7.10.0",
-    "webpack": "^5.75.0",
+    "web-ext": "^8.2.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
-    "web-sign": "web-ext sign -s dist",
+    "web-sign": "web-ext sign --channel unlisted -s dist",
     "web-run:firefox": "cd dist && web-ext run --start-url https://addons.mozilla.org/firefox/addon/ublock-origin/",
     "web-run:firefox-android": "cd dist && web-ext run -t firefox-android --firefox-apk org.mozilla.fenix",
     "web-run:chrome": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm -t chromium",

public/content.css

@@ -11,6 +11,11 @@
 	display: none;
 }
 
+/* Vorapi compatibility */
+#player-api_VORAPI_ELEMENT_ID #previewbar {
+	z-index: 999;
+}
+
 #previewbar {
     overflow: visible;
     padding: 0;
@@ -26,6 +31,15 @@
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+/* Prevent bar from covering highlights on YTTV */
+#previewbar.sponsorblock-yttv-container  {
+	z-index: unset;
+}
+
+ytu-time-bar.ytu-storyboard {
+	text-align: center;
+}
+
 /* May 2024 hover preview */
 .YtPlayerProgressBarProgressBar #previewbar {
 	transform: none;
@@ -44,7 +58,16 @@
 }
 
 div:hover > #previewbar.sbNotInvidious {
-	transform: scaleY(1)
+	transform: scaleY(1);
+}
+
+/* Vorapis */
+.v3 #previewbar.sbNotInvidious {
+	transform: scaleY(1);
+}
+.sponsorCategoryTooltipVisible.ytp-progress-tooltip {
+	width: 216px !important;
+  	/* left: 264.308px !important; */
 }
 
 .previewbar {
@@ -53,6 +76,11 @@ div:hover > #previewbar.sbNotInvidious {
 	min-width: 1px;
 }
 
+.previewbar-yttv {
+	height: 10px;
+	top: 14px;
+}
+
 .previewbar.requiredSegment {
 	transform: scaleY(3);
 }
@@ -74,7 +102,7 @@ div:hover > #previewbar.sbNotInvidious {
 	display: none !important;
 }
 
-.ytp-tooltip.sponsorCategoryTooltipVisible {
+.ytp-tooltip.sponsorCategoryTooltipVisible:not(.sponsorTooltipHasYTChapters) {
 	transform: translateY(-1em) !important;
 }
 
@@ -87,6 +115,14 @@ div:hover > #previewbar.sbNotInvidious {
 	transform: translateY(-2em) !important;
 }
 
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorHasOriginalTooltip {
+	transform: translateY(-2em) !important;
+}
+
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips.sponsorHasOriginalTooltip {
+	transform: translateY(-3em) !important;
+}
+
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible {
 	transform: translateY(-2em) !important;
 }
@@ -170,6 +206,16 @@ div:hover > .sponsorBlockChapterBar {
 	padding-right: 3.6px;
 }
 
+.sbButtonYTTV {
+	padding-left: 5px !important;
+}
+
+/* YTTV only */
+.ytu-player-controls > .skipButtonControlBarContainer > div {
+	padding-left: 5px;
+	align-content: center;
+}
+
 .autoHiding {
 	overflow: visible !important;
 }
@@ -218,6 +264,11 @@ div:hover > .sponsorBlockChapterBar {
 	from { opacity: 0; }
 }
 
+@keyframes fadeInToFaded {
+	from { opacity: 0; }
+	to { opacity: 0.5; }
+}
+
 @keyframes fadeOut {
 	to { opacity: 0; }
 }
@@ -290,6 +341,10 @@ div:hover > .sponsorBlockChapterBar {
 	animation: fadeIn 0.5s ease-out;
 }
 
+.sponsorSkipNoticeFadeIn.sponsorSkipNoticeFaded {
+	animation: fadeInToFaded 0.5s ease-out;
+}
+
 .exportCopiedNotice .sponsorSkipNoticeFadeIn {
 	animation: none;
 }
@@ -826,6 +881,15 @@ input::-webkit-inner-spin-button {
 	white-space: nowrap;
 }
 
+/* Vorapis V3 support */
+#watch7-content .sponsorBlockCategoryPill {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+#watch7-content .sponsorBlockCategoryPillTitle {
+	font-size: 15px;
+}
+
 .categoryPillClose {
 	display: none;
 	height: 10px;

public/icons/loop.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/icons/looped.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#80fff6">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/options/options.css

@@ -118,13 +118,13 @@ html, body {
 
 .option-group > div {
     min-height: 50px;
-    padding: 20px 0;
+    padding: 15px 0;
     border-bottom: 1px solid var(--border-color);
     border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
 
 .categoryExtraOptions {
-    padding-bottom: 20px;
+    padding-bottom: 15px;
 }
 
 #music_offtopic_autoSkipOnMusicVideos {
@@ -271,11 +271,11 @@ input[type='number'] {
 
 .small-description {
     font-size: 13px;
-    padding: 15px 0 0 20px;
+    padding: 5px 0 0 20px;
 }
 
 .small-description td {
-    padding: 10px 0 20px 20px;
+    padding: 2.5px 0 10px 20px;
 }
 
 .indent {
@@ -283,7 +283,7 @@ input[type='number'] {
 }
 
 .categoryTableElement td {
-    padding-top: 10px;
+    padding-top: 5px;
     border-top: 1px solid var(--border-color);
 }
 
@@ -353,7 +353,8 @@ input[type='number'] {
 
     font-size: 14px;
 
-    display: table;
+    display: flex;
+    align-items: center;
 }
 
 .switch-container .switch-label {
@@ -372,6 +373,7 @@ input[type='number'] {
     display: inline-block;
     width: 40px;
     height: 24px;
+    min-width: 40px;
 }
 
 .switch input { 
@@ -729,4 +731,17 @@ svg {
   
 .dearrow-link:hover .close-button {
     opacity: 1;
+}
+
+.invalid-advanced-config {
+    color: red;
+}
+
+.advanced-skip-options-menu {
+    margin-top: 10px;
+}
+
+.advanced-config-help-message {
+    margin-bottom: 10px;
+    transition: none;
 }

public/options/options.html

@@ -140,6 +140,8 @@
 					<div class="small-description">__MSG_whatManualSkipOnFullVideo__</div>
 				</div>
 
+				<div data-type="react-AdvancedSkipOptionsComponent"></div>
+
 				<div data-type="toggle" data-sync="forceChannelCheck">
 					<div class="switch-container">
 						<label class="switch">
@@ -154,20 +156,6 @@
 					<div class="small-description">__MSG_whatForceChannelCheck__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="refetchWhenNotFound">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="refetchWhenNotFound" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="refetchWhenNotFound">
-							__MSG_enableRefetchWhenNotFound__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
-				</div>
-
 				<div data-type="toggle" data-sync="showCategoryWithoutPermission">
 					<div class="switch-container">
 						<label class="switch">
@@ -209,15 +197,31 @@
 					<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
 				</div>
 	
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="dontShowNotice" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="dontShowNotice">
-							__MSG_showSkipNotice__
-						</label>
+				<div>
+					<div data-type="toggle" data-sync="showUpcomingNotice">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="showUpcomingNotice" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="showUpcomingNotice">
+								__MSG_showUpcomingNotice__
+							</label>
+						</div>
+					</div>
+
+					<br/>
+
+					<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="dontShowNotice" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="dontShowNotice">
+								__MSG_showSkipNotice__
+							</label>
+						</div>
 					</div>
 
 					<div data-type="selector" data-sync="noticeVisibilityMode" data-dependent-on="dontShowNotice">
@@ -470,6 +474,16 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="upvoteKeybind">	
+					<label class="optionLabel">__MSG_setUpvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="downvoteKeybind">	
+					<label class="optionLabel">__MSG_setDownvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+				
 			</div>
 
 			<div id="import" class="option-group hidden">
@@ -554,7 +568,7 @@
 
 			<div id="advanced" class="option-group hidden">
 
-				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious">
+				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="supportInvidious" type="checkbox">
@@ -569,7 +583,7 @@
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
-				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious">
+				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious" data-no-safari="true">
 					<div class="option-button trigger-button">
 						__MSG_addInvidiousInstance__
 					</div>

public/popup.css

@@ -293,7 +293,7 @@
   padding: 10px 15px;
   transition: background-color 0.2s ease-in-out;
 }
-.sbControlsMenu-item:hover {
+.sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
   background-color: #444;
 }
 .sbControlsMenu-itemIcon {
@@ -582,6 +582,10 @@
   margin: 0 !important;
 }
 
+#sponsorBlockPopupBody .u-mZ.cleanPopupMargin {
+  margin-top: 10px !important;
+}
+
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
@@ -618,4 +622,9 @@
 
 #issueReporterTabs > span.sbSelected > span::after {
   transform: scaleX(0.8);
+}
+
+.sbPopupButton {
+  width: 16px;
+  fill: var(--sb-main-fg-color);
 }

public/popup.html

@@ -1,207 +1,13 @@
-<!DOCTYPE html>
 <html id="sponsorBlockPopupHTML">
-  <head>
-    <meta charset="utf-8" />
-    <title>__MSG_openPopup__</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="shared.css" rel="stylesheet">
-  </head>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
-  <body id="sponsorBlockPopupBody" style="visibility: hidden">
-    <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
+        <link href="popup.css" rel="stylesheet">
+        <link href="shared.css" rel="stylesheet">
+        <script src="./js/popup.js"></script>
+    </head>
 
-      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
-        <img src="icons/close.png" width="15" height="15" alt="Close icon">
-      </button>
+    <body id="sponsorBlockPopupBody">
 
-      <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
-        __MSG_betaServerWarning__
-      </div>
-
-      <header id="sbPopupLogo" class="sbPopupLogo">
-        <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorBlock</p>
-      </header>
-
-      <div id="videoInfo">
-        <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
-        <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ grey-text"></p>
-        <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
-          <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
-        </button>
-        <!-- Video Segments -->
-        <div id="issueReporterContainer">
-          <div id="issueReporterTabs" class="hidden">
-            <span id="issueReporterTabSegments" class="sbSelected">
-              <span>__MSG_SegmentsCap__</span>
-            </span>
-            <span id="issueReporterTabChapters">
-              <span>__MSG_Chapters__</span>
-            </span>
-          </div>
-          <div id="issueReporterTimeButtons"></div>
-          <div id="issueReporterImportExport" class="hidden">
-            <div id="importExportButtons">
-              <button id="importSegmentsButton" title="__MSG_importSegments__">
-                <img src="/icons/import.svg" alt="Refresh icon" id="importSegments" />
-              </button>
-              <button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
-                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
-              </button>
-            </div>
-
-            <span id="importSegmentsMenu" class="hidden">
-              <textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
-
-              <button id="importSegmentsSubmit" title="__MSG_importSegments__">
-                __MSG_Import__
-              </button>
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Toggle Box -->
-      <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <input type="checkbox" style="display: none" id="whitelistToggle">
-          <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
-            <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
-          </svg>
-          <span id="whitelistChannel">__MSG_whitelistChannel__</span>
-          <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
-        </label>
-        <!--github: mbledkowski/toggle-switch-->
-        <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
-          <span class="toggleSwitchContainer-switch">
-            <input type="checkbox" style="display: none" id="toggleSwitch" checked>
-            <span class="switchBg shadow"></span>
-            <span class="switchBg white"></span>
-            <span class="switchBg green"></span>
-            <span class="switchDot"></span>
-          </span>
-          <span id="disableSkipping">__MSG_disableSkipping__</span>
-          <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
-        </label>
-        <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
-          <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
-          __MSG_Options__
-        </button>
-      </div>
-
-      <a id="whitelistForceCheck" class="hidden">
-        __MSG_forceChannelCheckPopup__
-      </a>
-
-      <!-- Submit box -->
-      <div id="mainControls" style="display: none">
-        <h1 class="sbHeader">
-          __MSG_recordTimesDescription__
-        </h1>
-        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div style="text-align: center; margin: 8px 0;">
-          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-          <button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
-        </div>
-        <span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
-      </div>
-
-      <!-- Your Work box -->
-      <div id="sbYourWorkBox" class="sbYourWorkBox">
-        <h1 class="sbHeader" style="padding: 8px 15px;">
-          __MSG_yourWork__
-        </h1>
-        <div class="sbYourWorkCols">
-          <!-- Username -->
-          <div id="usernameElement">
-            <p class="u-mZ grey-text">__MSG_Username__:
-              <!-- loading/errors -->
-              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
-            </p>
-            <div id="setUsernameContainer">
-              <p id="usernameValue"></p>
-              <button id="setUsernameButton" title="__MSG_setUsername__">
-                <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
-              </button>
-              <button id="copyUserID" title="__MSG_copyPublicID__">
-                <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
-              </button>
-            </div>
-            <div id="setUsername" style="display: none">
-              <input id="usernameInput" placeholder="Username">
-              <button id="submitUsername">
-                <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
-              </button>
-            </div>
-          </div>
-          <!-- Submissions -->
-          <div id="sponsorTimesContributionsContainer" class="hidden">
-            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-            <p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
-          </div>
-        </div>
-
-        <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_savedPeopleFrom__
-          <b>
-            <span id="sponsorTimesViewsDisplay">0</span>
-          </b>
-          <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-          <br />
-          <span class="sbExtraInfo">
-            (
-            <b>
-              <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-              <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
-            </b>
-            <span>__MSG_youHaveSavedTimeEnd__</span>
-            )
-          </span>
-        </p>
-        <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_youHaveSkipped__
-          <b>
-            <span id="sponsorTimesSkipsDoneDisplay">0</span>
-          </b>
-          <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-          <span class="sbExtraInfo">
-            (
-              <b>
-                <span id="sponsorTimeSavedDisplay">0</span>
-                <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
-              </b>
-            )
-          </span>
-        </p>
-      </div>
-
-      <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
-        <img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
-        <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
-          __MSG_considerDonating__
-        </a>
-        <img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
-      </div>
-
-      <footer id="sbFooter">
-        <a id="helpButton">__MSG_help__</a>
-        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
-        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
-        <br />
-        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
-        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
-        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
-      </footer>
-
-      <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
-
-    </div>
-    <!-- Scripts that need to load after the html -->
-    <script src="./js/popup.js" async></script>
-  </body>
-</html>
+    </body>
+</html>

src/background.ts

@@ -7,13 +7,9 @@ import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "../m
 import { setupTabUpdates } from "../maze-utils/src/tab-updates";
 import { generateUserID } from "../maze-utils/src/setup";
 
-// Make the config public for debugging purposes
-
-window.SB = Config;
-
 import Utils from "./utils";
 import { getExtensionIdsToImportFrom } from "./utils/crossExtension";
-import { isFirefoxOrSafari } from "../maze-utils/src";
+import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
 import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
 import { logWarn } from "./utils/logger";
 import { chromeP } from "../maze-utils/src/browserApi";
@@ -47,7 +43,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
             chrome.tabs.create({url: chrome.runtime.getURL(request.url)});
             return false;
         case "submitVote":
-            submitVote(request.type, request.UUID, request.category).then(callback);
+            submitVote(request.type, request.UUID, request.category, request.videoID).then(callback);
 
             //this allows the callback to be called later
             return true;
@@ -142,9 +138,16 @@ chrome.runtime.onInstalled.addListener(function () {
         }
     }, 1500);
 
-    // Only do this once the old version understands how to clean itself up
-    if (!isFirefoxOrSafari() && chrome.runtime.getManifest().version !== "5.4.13") {
+    if (!isFirefoxOrSafari()) {
         injectUpdatedScripts().catch(logWarn);
+
+        waitFor(() => Config.isReady()).then(() => {
+            if (Config.config.supportInvidious) {
+                injectUpdatedScripts([
+                    utils.getExtraSiteRegistration()
+                ])
+            }
+        }).catch(logWarn);
     }
 });
 
@@ -211,7 +214,7 @@ async function  unregisterFirefoxContentScript(id: string) {
     }
 }
 
-async function submitVote(type: number, UUID: string, category: string) {
+async function submitVote(type: number, UUID: string, category: string, videoID: string) {
     let userID = Config.config.userID;
 
     if (userID == undefined || userID === "undefined") {
@@ -223,7 +226,7 @@ async function submitVote(type: number, UUID: string, category: string) {
     const typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
 
     try {
-        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
+        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&videoID=" + videoID + "&userID=" + userID + typeSection);
     
         if (response.ok) {
             return {

src/components/ChapterVoteComponent.tsx

@@ -44,7 +44,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
             <>
                 {/* Upvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
-                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("upvoteButtonInfo")}
                         onClick={(e) => this.vote(e, 1)}>
@@ -55,7 +55,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
 
                 {/* Downvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"}
-                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("reportButtonInfo")}
                         onClick={(e) => {

src/components/NoticeComponent.tsx

@@ -19,6 +19,7 @@ export interface NoticeProps {
     idSuffix?: string;
 
     fadeIn?: boolean;
+    fadeOut?: boolean;
     startFaded?: boolean;
     firstColumn?: React.ReactElement[] | React.ReactElement;
     firstRow?: React.ReactElement;
@@ -244,7 +245,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                         id={"skipNoticeTimerText" + this.idSuffix}
                         key="skipNoticeTimerText"
                         className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} >
-                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
+                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", Math.ceil(this.state.countdownTime).toString())}
                     </span>
                 ),(
                     <img 
@@ -326,7 +327,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             return;
         }
 
-        if (countdownTime == 3) {
+        if (countdownTime == 3 && this.props.fadeOut) {
             //start fade out animation
             const notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
             notice?.style.removeProperty("animation");

src/components/SkipNoticeComponent.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisibilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
 const utils = new Utils();
-import { getSkippingText } from "../utils/categoryUtils";
+import { getSkippingText, getUpcomingText, getVoteText } from "../utils/categoryUtils";
 
 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
@@ -15,6 +15,7 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { generateUserID } from "../../maze-utils/src/setup";
 import { keybindToString } from "../../maze-utils/src/config";
 import { getFormattedTime } from "../../maze-utils/src/formating";
+import { getCurrentTime, getVideo } from "../../maze-utils/src/video";
 
 enum SkipButtonState {
     Undo, // Unskip
@@ -27,12 +28,18 @@ export interface SkipNoticeProps {
 
     autoSkip: boolean;
     startReskip?: boolean;
+    upcomingNotice?: boolean;
+    voteNotice?: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
     closeListener: () => void;
     showKeybindHint?: boolean;
     smaller: boolean;
+    fadeIn: boolean;
+    maxCountdownTime?: number;
+
+    componentDidMount?: () => void;
 
     unskipTime?: number;
 }
@@ -96,9 +103,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.autoSkip = props.autoSkip;
         this.contentContainer = props.contentContainer;
 
-        const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
+        const noticeTitle = this.props.voteNotice ? getVoteText(this.segments) : !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);
 
-        const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
+        const previousSkipNotices = document.querySelectorAll(".sponsorSkipNoticeParent:not(.sponsorSkipUpcomingNotice)");
         this.amountOfPreviousNotices = previousSkipNotices.length;
         // If there is at least one already in the first slot
         this.showInSecondSlot = previousSkipNotices.length > 0 && [...previousSkipNotices].some(notice => !notice.classList.contains("secondSkipNotice"));
@@ -119,7 +126,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.lockedColor = Config.config.colorPalette.locked;
 
         const isMuteSegment = this.segments[0].actionType === ActionType.Mute;
-        const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration;
+        const maxCountdownTime = props.maxCountdownTime ? () => props.maxCountdownTime : (isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration);
 
         const defaultSkipButtonState = this.props.startReskip ? SkipButtonState.Redo : SkipButtonState.Undo;
         const skipButtonStates = [defaultSkipButtonState, isMuteSegment ? SkipButtonState.Start : defaultSkipButtonState];
@@ -170,12 +177,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
         }
 
-        // If it started out as smaller, always keep the
-        // skip button there
-        const showFirstSkipButton = this.props.smaller || this.segments[0].actionType === ActionType.Mute;
-        const firstColumn = showFirstSkipButton ? (
-            this.getSkipButton(0)
-        ) : null;
+        const firstColumn = this.getSkipButton(0);
 
         return (
             <NoticeComponent 
@@ -183,9 +185,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
-                fadeIn={true}
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
+                fadeIn={this.props.fadeIn}
+                fadeOut={!this.props.upcomingNotice}
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAll
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 style={noticeStyle}
@@ -196,12 +199,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 logoFill={Config.config.barTypes[this.segments[0].category].color}
                 limitWidth={true}
                 firstColumn={firstColumn}
+                dontPauseCountdown={!!this.props.upcomingNotice}
                 bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
+                extraClass={this.props.upcomingNotice ? "sponsorSkipUpcomingNotice" : ""}
                 onMouseEnter={() => this.onMouseEnter() } >
             </NoticeComponent>
         );
     }
 
+    componentDidMount(): void {
+        if (this.props.componentDidMount) {
+            this.props.componentDidMount();
+        }
+    }
+
     getBottomRow(): JSX.Element[] {
         return [
             /* Bottom Row */
@@ -232,15 +243,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         </div>
 
                         {/* Copy and Downvote Button */}
-                        <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
-                                className="voteButton"
-                                style={{marginLeft: "5px"}}
-                                onClick={() => this.openEditingOptions()}>
-                            <PencilSvg fill={this.state.editing === true
-                                            || this.state.actionState === SkipNoticeAction.CopyDownvote
-                                            || this.state.choosingCategory === true
-                                            ? this.selectedColor : this.unselectedColor} />
-                        </div>
+                        {
+                            !this.props.voteNotice &&
+                            <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
+                                    className="voteButton"
+                                    style={{marginLeft: "5px"}}
+                                    onClick={() => this.openEditingOptions()}>
+                                <PencilSvg fill={this.state.editing === true
+                                                || this.state.actionState === SkipNoticeAction.CopyDownvote
+                                                || this.state.choosingCategory === true
+                                                ? this.selectedColor : this.unselectedColor} />
+                            </div>
+                        }
                     </td>
 
                     :
@@ -268,11 +282,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
+                {!this.props.voteNotice && (!this.props.smaller || this.segments[0].actionType === ActionType.Mute)
                     ? this.getSkipButton(1) : null}
 
                 {/* Never show button */}
-                {!this.autoSkip || this.props.startReskip ? "" :
+                {!this.autoSkip || this.props.startReskip || this.props.voteNotice ? "" :
                     <td className="sponsorSkipNoticeRightSection"
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -364,8 +378,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 style.minWidth = "100px";
             }
 
+            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || !this.props.voteNotice || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
+
             return (
-                <span className="sponsorSkipNoticeUnskipSection">
+                <span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
                     <button id={"sponsorSkipUnskipButton" + this.idSuffix}
                             className="sponsorSkipObject sponsorSkipNoticeButton"
                             style={style}
@@ -419,7 +435,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     onMouseEnter(): void {
-        if (this.state.smaller) {
+        if (this.state.smaller && !this.props.upcomingNotice) {
             this.setState({
                 smaller: false
             });
@@ -612,14 +628,17 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek, this.props.voteNotice);
 
-        this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
+        this.unskippedMode(buttonIndex, index, this.segments[0].actionType === ActionType.Poi ? SkipButtonState.Undo : SkipButtonState.Redo);
     }
 
     reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
         this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+        this.reskippedMode(buttonIndex);
+    }
 
+    reskippedMode(buttonIndex: number): void {
         const skipButtonStates = this.state.skipButtonStates;
         skipButtonStates[buttonIndex] = SkipButtonState.Undo;
 
@@ -649,7 +668,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
-        const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
+        const changeCountdown = !this.props.voteNotice && this.segments[index].actionType !== ActionType.Poi;
 
         const maxCountdownTime = changeCountdown ?
             this.getFullDurationCountdown(index) : this.state.maxCountdownTime;
@@ -657,7 +676,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         const skipButtonStates = this.state.skipButtonStates;
         const skipButtonCallbacks = this.state.skipButtonCallbacks;
         if (buttonIndex === null) {
-            for (let i = 0; i < this.segments.length; i++) {
+            for (let i = 0; i < skipButtonStates.length; i++) {
                 skipButtonStates[i] = skipButtonState;
                 skipButtonCallbacks[i] = this.reskip.bind(this);
             }
@@ -685,7 +704,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     getFullDurationCountdown(index: number): () => number {
         return () => {
             const sponsorTime = this.segments[index];
-            const duration = Math.round((sponsorTime.segment[1] - this.contentContainer().v.currentTime) * (1 / this.contentContainer().v.playbackRate));
+            const duration = Math.round((sponsorTime.segment[1] - (getCurrentTime() ?? 0)) * (1 / (getVideo()?.playbackRate ?? 1)));
 
             return Math.max(duration, Config.config.skipNoticeDuration);
         };

src/components/SponsorTimeEditComponent.tsx

@@ -9,6 +9,7 @@ import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
 import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
 import { asyncRequestToServer } from "../utils/requests";
 import { defaultPreviewTime } from "../utils/constants";
+import { getVideo, getVideoDuration } from "../../maze-utils/src/video";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -401,7 +402,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     checkToShowFullVideoWarning(): void {
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
         const segmentDuration = sponsorTime.segment[1] - sponsorTime.segment[0];
-        const videoPercentage = segmentDuration / this.props.contentContainer().v.duration;
+        const videoPercentage = segmentDuration / getVideoDuration();
 
         if (videoPercentage > 0.6 && !this.fullVideoWarningShown 
                 && (sponsorTime.category === "sponsor" || sponsorTime.category === "selfpromo" || sponsorTime.category === "chooseACategory")) {
@@ -553,7 +554,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     setTimeToEnd(): void {
-        this.setTimeTo(1, this.props.contentContainer().v.duration);
+        this.setTimeTo(1, getVideoDuration());
     }
 
     /**
@@ -640,7 +641,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 sponsorTimesSubmitting[this.props.index].segment[0] = startTime;
             }
         } else if (this.state.sponsorTimeEdits[1] === null && category === "outro" && !sponsorTimesSubmitting[this.props.index].segment[1]) {
-            sponsorTimesSubmitting[this.props.index].segment[1] = this.props.contentContainer().v.duration;
+            sponsorTimesSubmitting[this.props.index].segment[1] = getVideoDuration();
             this.props.contentContainer().updateEditButtonsOnPlayer();
         }
 
@@ -683,7 +684,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const endTime = sponsorTimes[index].segment[1];
 
         // If segment starts at 0:00, start playback at the end of the segment
-        const skipTime = (startTime === 0 || skipToEndTime) ? endTime : (startTime - (seekTime * this.props.contentContainer().v.playbackRate));
+        const skipTime = (startTime === 0 || skipToEndTime) ? endTime : (startTime - (seekTime * getVideo().playbackRate));
 
         this.props.contentContainer().previewTime(skipTime, !skipToEndTime);
     }

src/components/SubmissionNoticeComponent.tsx

@@ -9,6 +9,7 @@ import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
 import { getGuidelineInfo } from "../utils/constants";
 import { exportTimes } from "../utils/exporter";
+import { getVideo, isCurrentTimeWrong } from "../../maze-utils/src/video";
 
 export interface SubmissionNoticeProps { 
     // Contains functions and variables from the content script needed by the skip notice
@@ -66,7 +67,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             this.forceUpdate();
         });
 
-        this.videoObserver.observe(this.contentContainer().v, {
+        this.videoObserver.observe(getVideo(), {
             attributes: true
         });
 
@@ -131,7 +132,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 {/* Sponsor Time List */}
                 <tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}
                     className="sponsorTimeMessagesRow"
-                    style={{maxHeight: (this.contentContainer().v?.offsetHeight - 200) + "px"}}
+                    style={{maxHeight: (getVideo()?.offsetHeight - 200) + "px"}}
                     onMouseDown={(e) => e.stopPropagation()}>
                     <td style={{width: "100%"}}>
                         {this.getSponsorTimeMessages()}
@@ -215,6 +216,11 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     }
 
     submit(): void {
+        if (isCurrentTimeWrong()) {
+            alert(chrome.i18n.getMessage("submissionFailedServerSideAds"));
+            return;
+        }
+
         // save all items
         for (const ref of this.timeEditRefs) {
             ref.current.saveEditTimes();
@@ -283,7 +289,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     categoryChangeListener(index: number, category: Category): void {
         const dialogWidth = this.noticeRef?.current?.getElement()?.current?.offsetWidth;
         if (category !== "chooseACategory" && Config.config.showCategoryGuidelines
-                && this.contentContainer().v.offsetWidth > dialogWidth * 2) {
+                && getVideo().offsetWidth > dialogWidth * 2) {
             const options = {
                 title:  chrome.i18n.getMessage(`category_${category}`),
                 textBoxes: getGuidelineInfo(category),

src/components/options/AdvancedSkipOptionsComponent.tsx

@@ -0,0 +1,273 @@
+import * as React from "react";
+import * as CompileConfig from "../../../config.json";
+
+import Config from "../../config";
+import { AdvancedSkipRuleSet, SkipRuleAttribute, SkipRuleOperator } from "../../utils/skipRule";
+import { ActionType, ActionTypes, CategorySkipOption } from "../../types";
+
+let configSaveTimeout: NodeJS.Timeout | null = null;
+
+export function AdvancedSkipOptionsComponent() {
+    const [optionsOpen, setOptionsOpen] = React.useState(false);
+    const [config, setConfig] = React.useState(configToText(Config.local.skipRules));
+    const [configValid, setConfigValid] = React.useState(true);
+
+    return (
+        <div>
+            <div className="option-button" onClick={() => {
+                setOptionsOpen(!optionsOpen);
+            }}>
+                {chrome.i18n.getMessage("openAdvancedSkipOptions")}
+            </div>
+
+            {
+                optionsOpen &&
+                <div className="advanced-skip-options-menu">
+                    <div className={"advanced-config-help-message"}>
+                        <a target="_blank"
+                                rel="noopener noreferrer"
+                                href="https://wiki.sponsor.ajay.app/w/Advanced_Skip_Options">
+                            {chrome.i18n.getMessage("advancedSkipSettingsHelp")}
+                        </a>
+
+                        <span className={configValid ? "hidden" : "invalid-advanced-config"}>
+                            {" - "}
+                            {chrome.i18n.getMessage("advancedSkipNotSaved")}
+                        </span>
+                    </div>
+
+                    <textarea className={"option-text-box " + (configValid ? "" : "invalid-advanced-config")}
+                        rows={10}
+                        style={{ width: "80%" }}
+                        value={config}
+                        spellCheck={false}
+                        onChange={(e) => {
+                            setConfig(e.target.value);
+
+                            const compiled = compileConfig(e.target.value);
+                            setConfigValid(!!compiled && !(e.target.value.length > 0 && compiled.length === 0));
+
+                            if (compiled) {
+                                if (configSaveTimeout) {
+                                    clearTimeout(configSaveTimeout);
+                                }
+
+                                configSaveTimeout = setTimeout(() => {
+                                    Config.local.skipRules = compiled;
+                                }, 200);
+                            }
+                        }}
+                    />
+                </div>
+            }
+        </div>
+    );
+}
+
+function compileConfig(config: string): AdvancedSkipRuleSet[] | null {
+    const ruleSets: AdvancedSkipRuleSet[] = [];
+
+    let ruleSet: AdvancedSkipRuleSet = {
+        rules: [],
+        skipOption: null,
+        comment: ""
+    };
+
+    for (const line of config.split("\n")) {
+        if (line.trim().length === 0) {
+            // Skip empty lines
+            continue;
+        }
+
+        const comment = line.match(/^\s*\/\/(.+)$/);
+        if (comment) {
+            if (ruleSet.rules.length > 0) {
+                // Rule has already been created, add it to list if valid
+                if (ruleSet.skipOption !== null && ruleSet.rules.length > 0) {
+                    ruleSets.push(ruleSet);
+
+                    ruleSet = {
+                        rules: [],
+                        skipOption: null,
+                        comment: ""
+                    };
+                } else {
+                    return null;
+                }
+            }
+
+            if (ruleSet.comment.length > 0) {
+                ruleSet.comment += "; ";
+            }
+
+            ruleSet.comment += comment[1].trim();
+
+            // Skip comment lines
+            continue;
+        } else if (line.startsWith("if ")) {
+            if (ruleSet.rules.length > 0) {
+                // Rule has already been created, add it to list if valid
+                if (ruleSet.skipOption !== null && ruleSet.rules.length > 0) {
+                    ruleSets.push(ruleSet);
+
+                    ruleSet = {
+                        rules: [],
+                        skipOption: null,
+                        comment: ""
+                    };
+                } else {
+                    return null;
+                }
+            }
+
+            const ruleTexts = [...line.matchAll(/\S+ \S+ (?:"[^"\\]*(?:\\.[^"\\]*)*"|\d+)(?= and |$)/g)];
+            for (const ruleText of ruleTexts) {
+                if (!ruleText[0]) return null;
+
+                const ruleParts = ruleText[0].match(/(\S+) (\S+) ("[^"\\]*(?:\\.[^"\\]*)*"|\d+)/);
+                if (ruleParts.length !== 4) {
+                    return null; // Invalid rule format
+                }
+
+                const attribute = getSkipRuleAttribute(ruleParts[1]);
+                const operator = getSkipRuleOperator(ruleParts[2]);
+                const value = getSkipRuleValue(ruleParts[3]);
+                if (attribute === null || operator === null || value === null) {
+                    return null; // Invalid attribute or operator
+                }
+
+                if ([SkipRuleOperator.Equal, SkipRuleOperator.NotEqual].includes(operator)) {
+                    if (attribute === SkipRuleAttribute.Category
+                            && !CompileConfig.categoryList.includes(value as string)) {
+                        return null; // Invalid category value
+                    } else if (attribute === SkipRuleAttribute.ActionType
+                            && !ActionTypes.includes(value as ActionType)) {
+                        return null; // Invalid category value
+                    } else if (attribute === SkipRuleAttribute.Source
+                            && !["local", "youtube", "autogenerated", "server"].includes(value as string)) {
+                        return null; // Invalid category value
+                    }
+                }
+
+                ruleSet.rules.push({
+                    attribute,
+                    operator,
+                    value
+                });
+            }
+
+            // Make sure all rules were parsed
+            if (ruleTexts.length === 0 || !line.endsWith(ruleTexts[ruleTexts.length - 1][0])) {
+                return null;
+            }
+        } else {
+            // Only continue if a rule has been defined
+            if (ruleSet.rules.length === 0) {
+                return null; // No rules defined yet
+            }
+
+            switch (line.trim().toLowerCase()) {
+                case "disabled":
+                    ruleSet.skipOption = CategorySkipOption.Disabled;
+                    break;
+                case "show overlay":
+                    ruleSet.skipOption = CategorySkipOption.ShowOverlay;
+                    break;
+                case "manual skip":
+                    ruleSet.skipOption = CategorySkipOption.ManualSkip;
+                    break;
+                case "auto skip":
+                    ruleSet.skipOption = CategorySkipOption.AutoSkip;
+                    break;
+                default:
+                    return null; // Invalid skip option
+            }
+        }
+    }
+
+    if (ruleSet.rules.length > 0 && ruleSet.skipOption !== null) {
+        ruleSets.push(ruleSet);
+    } else if (ruleSet.rules.length > 0 || ruleSet.skipOption !== null) {
+        // Incomplete rule set
+        return null;
+    }
+
+    return ruleSets;
+}
+
+function getSkipRuleAttribute(attribute: string): SkipRuleAttribute | null {
+    if (attribute && Object.values(SkipRuleAttribute).includes(attribute as SkipRuleAttribute)) {
+        return attribute as SkipRuleAttribute;
+    }
+
+    return null;
+}
+
+function getSkipRuleOperator(operator: string): SkipRuleOperator | null {
+    if (operator && Object.values(SkipRuleOperator).includes(operator as SkipRuleOperator)) {
+        return operator as SkipRuleOperator;
+    }
+
+    return null;
+}
+
+function getSkipRuleValue(value: string): string | number | null {
+    if (!value) return null;
+
+    if (value.startsWith('"')) {
+        try {
+            return JSON.parse(value);
+        } catch (e) {
+            return null; // Invalid JSON string
+        }
+    } else {
+        const numValue = Number(value);
+        if (!isNaN(numValue)) {
+            return numValue;
+        }
+
+        return null;
+    }
+}
+
+function configToText(config: AdvancedSkipRuleSet[]): string {
+    let result = "";
+
+    for (const ruleSet of config) {
+        if (ruleSet.comment) {
+            result += "// " + ruleSet.comment + "\n";
+        }
+
+        result += "if ";
+        let firstRule = true;
+        for (const rule of ruleSet.rules) {
+            if (!firstRule) {
+                result += " and ";
+            }
+
+            result += `${rule.attribute} ${rule.operator} ${JSON.stringify(rule.value)}`;
+            firstRule = false;
+        }
+
+        switch (ruleSet.skipOption) {
+            case CategorySkipOption.Disabled:
+                result += "\nDisabled";
+                break;
+            case CategorySkipOption.ShowOverlay:
+                result += "\nShow Overlay";
+                break;
+            case CategorySkipOption.ManualSkip:
+                result += "\nManual Skip";
+                break;
+            case CategorySkipOption.AutoSkip:
+                result += "\nAuto Skip";
+                break;
+            default:
+                return null; // Invalid skip option
+        }
+
+        result += "\n\n";
+    }
+
+    return result.trim();
+}

src/components/options/CategorySkipOptionsComponent.tsx

@@ -234,11 +234,18 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     configKey: "showSegmentNameInChapterBar",
                     label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
                     dontDisable: true
+                }, {
+                    configKey: "showAutogeneratedChapters",
+                    label: chrome.i18n.getMessage("showAutogeneratedChapters"),
+                    dontDisable: true
                 }];
             case "music_offtopic":
                 return [{
                     configKey: "autoSkipOnMusicVideos",
                     label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                }, {
+                    configKey: "skipNonMusicOnlyOnYoutubeMusic",
+                    label: chrome.i18n.getMessage("skipNonMusicOnlyOnYoutubeMusic"),
                 }];
             default:
                 return [];

src/components/options/KeybindDialogComponent.tsx

@@ -146,7 +146,9 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
                 this.props.option !== "actuallySubmitKeybind" && this.equals(Config.config['actuallySubmitKeybind']) ||
                 this.props.option !== "previewKeybind" && this.equals(Config.config['previewKeybind']) ||
                 this.props.option !== "closeSkipNoticeKeybind" && this.equals(Config.config['closeSkipNoticeKeybind']) ||
-                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
+                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']) ||
+                this.props.option !== "downvoteKeybind" && this.equals(Config.config['downvoteKeybind']) ||
+                this.props.option !== "upvoteKeybind" && this.equals(Config.config['upvoteKeybind']))
             return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
 
         return null;

src/config.ts

@@ -1,12 +1,9 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
 import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
 import { HashedValue } from "../maze-utils/src/hash";
-
-export interface Permission {
-    canSubmit: boolean;
-}
+import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
 
 interface SBConfig {
     userID: string;
@@ -31,7 +28,8 @@ interface SBConfig {
     trackDownvotes: boolean;
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
-    noticeVisibilityMode: NoticeVisbilityMode;
+    showUpcomingNotice: boolean;
+    noticeVisibilityMode: NoticeVisibilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
     hideDeleteButtonPlayerControls: boolean;
@@ -47,7 +45,6 @@ interface SBConfig {
     audioNotificationOnSkip: boolean;
     checkForUnlistedVideos: boolean;
     testingServer: boolean;
-    refetchWhenNotFound: boolean;
     ytInfoPermissionGranted: boolean;
     allowExpirements: boolean;
     showDonationLink: boolean;
@@ -57,6 +54,7 @@ interface SBConfig {
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
+    skipNonMusicOnlyOnYoutubeMusic: boolean;
     colorPalette: {
         red: string;
         white: string;
@@ -69,6 +67,7 @@ interface SBConfig {
     showCategoryGuidelines: boolean;
     showCategoryWithoutPermission: boolean;
     showSegmentNameInChapterBar: boolean;
+    showAutogeneratedChapters: boolean;
     useVirtualTime: boolean;
     showSegmentFailedToFetchWarning: boolean;
     allowScrollingToEdit: boolean;
@@ -96,6 +95,8 @@ interface SBConfig {
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
     closeSkipNoticeKeybind: Keybind;
+    upvoteKeybind: Keybind;
+    downvoteKeybind: Keybind;
 
     // What categories should be skipped
     categorySelections: CategorySelection[];
@@ -145,6 +146,8 @@ interface SBStorage {
 
     /* Contains unsubmitted segments that the user has created. */
     unsubmittedSegments: Record<string, SponsorTime[]>;
+
+    skipRules: AdvancedSkipRuleSet[];
 }
 
 class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
@@ -164,6 +167,15 @@ class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
 }
 
 function migrateOldSyncFormats(config: SBConfig) {
+    if (!config["changeChapterColor"]) {
+        config.barTypes["chapter"].color = "#ffd983";
+        config["changeChapterColor"] = true;
+        chrome.storage.sync.set({
+            "changeChapterColor": true,
+            "barTypes": config.barTypes
+        });
+    }
+
     if (config["showZoomToFillError"]) {
         chrome.storage.sync.remove("showZoomToFillError");
     }
@@ -293,7 +305,8 @@ const syncDefaults = {
     trackDownvotes: true,
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
-    noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
+    showUpcomingNotice: false,
+    noticeVisibilityMode: NoticeVisibilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
     hideDeleteButtonPlayerControls: false,
@@ -309,7 +322,6 @@ const syncDefaults = {
     audioNotificationOnSkip: false,
     checkForUnlistedVideos: false,
     testingServer: false,
-    refetchWhenNotFound: true,
     ytInfoPermissionGranted: false,
     allowExpirements: true,
     showDonationLink: true,
@@ -319,6 +331,7 @@ const syncDefaults = {
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
+    skipNonMusicOnlyOnYoutubeMusic: false,
     scrollToEditTimeUpdate: false, // false means the tooltip will be shown
     categoryPillUpdate: false,
     showChapterInfoMessage: true,
@@ -326,6 +339,7 @@ const syncDefaults = {
     showCategoryGuidelines: true,
     showCategoryWithoutPermission: false,
     showSegmentNameInChapterBar: true,
+    showAutogeneratedChapters: true,
     useVirtualTime: true,
     showSegmentFailedToFetchWarning: true,
     allowScrollingToEdit: true,
@@ -354,6 +368,8 @@ const syncDefaults = {
     nextChapterKeybind: { key: "ArrowRight", ctrl: true },
     previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
     closeSkipNoticeKeybind: { key: "Backspace" },
+    downvoteKeybind: { key: "h", shift: true },
+    upvoteKeybind: { key: "g", shift: true },
 
     categorySelections: [{
         name: "sponsor" as Category,
@@ -464,7 +480,11 @@ const syncDefaults = {
         "preview-filler": {
             color: "#2E0066",
             opacity: "0.7"
-        }
+        },
+        "chapter": {
+            color: "#ffd983",
+            opacity: "0"
+        },
     }
 };
 
@@ -473,8 +493,31 @@ const localDefaults = {
     navigationApiAvailable: null,
     alreadyInstalled: false,
 
-    unsubmittedSegments: {}
+    unsubmittedSegments: {},
+    skipRules: []
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
-export default Config;
+export default Config;
+
+export function generateDebugDetails(): string {
+    // Build output debug information object
+    const output = {
+        debug: {
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+            language: navigator.language,
+            extensionVersion: chrome.runtime.getManifest().version
+        },
+        config: JSON.parse(JSON.stringify(Config.cachedSyncConfig)) // Deep clone config object
+    };
+
+    // Sanitise sensitive user config values
+    delete output.config.userID;
+    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
+        ? "Default server address" : "Custom server address";
+    output.config.invidiousInstances = output.config.invidiousInstances.length;
+    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+
+    return JSON.stringify(output, null, 4);
+}

src/globals.d.ts

@@ -1,19 +1,4 @@
 import { SBObject } from "./config";
 declare global {
     interface Window { SB: SBObject }
-    // Remove this once the API becomes stable and types are shipped in @types/chrome
-    namespace chrome {
-        namespace declarativeContent {
-            export interface RequestContentScriptOptions {
-                allFrames?: boolean;
-                css?: string[];
-                instanceType?: "declarativeContent.RequestContentScript";
-                js?: string[];
-                matchAboutBlanck?: boolean;
-            }
-            export class RequestContentScript {
-                constructor(options: RequestContentScriptOptions);
-            }
-        }
-    }
 }

src/js-components/previewBar.ts

@@ -3,8 +3,6 @@ Based on code from
 https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
 */
 
-'use strict';
-
 import Config from "../config";
 import { ChapterVote } from "../render/ChapterVote";
 import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
@@ -13,7 +11,9 @@ import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
 import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
-import { isVisible } from "../utils/pageUtils";
+import { hasAutogeneratedChapters, isVisible } from "../utils/pageUtils";
+import { isVorapisInstalled } from "../utils/compatibility";
+import { isOnYTTV } from "../../maze-utils/src/video";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -40,6 +40,12 @@ class PreviewBar {
     categoryTooltip?: HTMLDivElement;
     categoryTooltipContainer?: HTMLElement;
     chapterTooltip?: HTMLDivElement;
+
+    // ScrubTooltips for YTTV only
+    categoryScrubTooltip?: HTMLDivElement;
+    categoryScrubTooltipContainer?: HTMLElement;
+    chapterScrubTooltip?: HTMLDivElement;
+
     lastSmallestSegment: Record<string, {
         index: number;
         segment: PreviewBarSegment;
@@ -48,9 +54,11 @@ class PreviewBar {
     parent: HTMLElement;
     onMobileYouTube: boolean;
     onInvidious: boolean;
+    onYTTV: boolean;
     progressBar: HTMLElement;
 
     segments: PreviewBarSegment[] = [];
+    hasYouTubeChapters = false;
     existingChapters: PreviewBarSegment[] = [];
     videoDuration = 0;
     updateExistingChapters: () => void;
@@ -68,14 +76,19 @@ class PreviewBar {
     unfilteredChapterGroups: ChapterGroup[];
     chapterGroups: ChapterGroup[];
 
-    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
+    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, onYTTV: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
         if (test) return;
         this.container = document.createElement('ul');
         this.container.id = 'previewbar';
 
+        if (onYTTV) {
+            this.container.classList.add("sponsorblock-yttv-container");
+        }
+
         this.parent = parent;
         this.onMobileYouTube = onMobileYouTube;
         this.onInvidious = onInvidious;
+        this.onYTTV = onYTTV;
         this.chapterVote = chapterVote;
         this.updateExistingChapters = updateExistingChapters;
 
@@ -95,24 +108,49 @@ class PreviewBar {
 
         // Create label placeholder
         this.categoryTooltip = document.createElement("div");
-        this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.categoryTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
         this.chapterTooltip = document.createElement("div");
-        this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.chapterTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
 
-        // global chaper tooltip or duration tooltip
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
-        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip)") as HTMLElement;
+        if (isOnYTTV()) {
+            this.categoryScrubTooltip = document.createElement("div");
+            this.categoryScrubTooltip.className = "sponsorCategoryTooltip";
+            this.chapterScrubTooltip = document.createElement("div");
+            this.chapterScrubTooltip.className = "sponsorCategoryTooltip";
+        }
+
+        // global chapter tooltip or duration tooltip
+        // YT, Vorapis, unknown, YTTV
+        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container, .yssi-slider .ys-seek-details .time-info-bar") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip), .current-time:not(.sponsorCategoryTooltip)") as HTMLElement;
         if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;
 
         // Grab the tooltip from the text wrapper as the tooltip doesn't have its classes on init
         this.categoryTooltipContainer = tooltipTextWrapper.parentElement;
-        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title") as HTMLElement;
+        // YT, Vorapis, YTTV
+        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text, .current-time") as HTMLElement;
         if (!this.categoryTooltipContainer || !titleTooltip) return;
 
         tooltipTextWrapper.insertBefore(this.categoryTooltip, titleTooltip.nextSibling);
         tooltipTextWrapper.insertBefore(this.chapterTooltip, titleTooltip.nextSibling);
 
-        const seekBar = document.querySelector(".ytp-progress-bar-container");
+        if (isOnYTTV()) {
+            const scrubTooltipTextWrapper = document.querySelector(".yssi-slider .ysl-filmstrip-lens .time-info-bar")
+            if (!this.categoryTooltipContainer) return;
+    
+            scrubTooltipTextWrapper.appendChild(this.categoryScrubTooltip);
+            scrubTooltipTextWrapper.appendChild(this.chapterScrubTooltip);
+        }
+
+        const seekBar = (document.querySelector(".ytp-progress-bar-container, .ypcs-scrub-slider-slot.ytu-player-controls"));
         if (!seekBar) return;
 
         let mouseOnSeekBar = false;
@@ -128,12 +166,12 @@ class PreviewBar {
         seekBar.addEventListener("mousemove", (e: MouseEvent) => {
             if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title, .ytp-progress-tooltip-timestamp");
             const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
 
             // Find the segment at that location, using the shortest if multiple found
             const [normalSegments, chapterSegments] =
-                partition(this.segments.filter((s) => s.source !== SponsorSourceType.YouTube),
+                partition(this.segments,
                     (segment) => segment.actionType !== ActionType.Chapter);
             let mainSegment = this.getSmallestSegment(timeInSeconds, normalSegments, "normal");
             let secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments, "chapter");
@@ -142,38 +180,75 @@ class PreviewBar {
                 secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments.filter((s) => s !== secondarySegment));
             }
 
+            const hasAYouTubeChapterRemoved = this.hasYouTubeChapters
+                || (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters());
+            if (hasAYouTubeChapterRemoved) {
+                // Hide original tooltip if some chapter has been filtered out
+                originalTooltip.style.display = "none";
+                noYoutubeChapters = true;
+
+                originalTooltip.classList.add("sponsorTooltipHasYTChapters");
+            } else {
+                originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
+            }
+
             if (mainSegment === null && secondarySegment === null) {
-                this.categoryTooltipContainer.classList.remove(TOOLTIP_VISIBLE_CLASS);
-                originalTooltip.style.removeProperty("display");
+                if (!hasAYouTubeChapterRemoved) {
+                    this.categoryTooltipContainer.classList.remove(TOOLTIP_VISIBLE_CLASS);
+                    originalTooltip.style.removeProperty("display");
+                }
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
+
+                this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
             } else {
                 this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
-                if (mainSegment !== null && secondarySegment !== null) {
+                const hasTwoTooltips = mainSegment !== null && secondarySegment !== null;
+                if (hasTwoTooltips) {
                     this.categoryTooltipContainer.classList.add("sponsorTwoTooltips");
+                    originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
                 } else {
                     this.categoryTooltipContainer.classList.remove("sponsorTwoTooltips");
                 }
 
                 this.setTooltipTitle(mainSegment, this.categoryTooltip);
                 this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
+
+                if (isVorapisInstalled()) {
+                    const tooltipParent = tooltipTextWrapper.parentElement!;
+                    tooltipParent.classList.add("with-text");
+                }
 
                 if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
-                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) {
+                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)
+                        || !originalTooltip.textContent) {
                     if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none";
+                    this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
                     noYoutubeChapters = true;
                 } else if (originalTooltip.style.display === "none") {
                     originalTooltip.style.removeProperty("display");
+                    this.categoryTooltipContainer.classList.add("sponsorHasOriginalTooltip");
+                    noYoutubeChapters = false;
                 }
 
-                // Used to prevent overlapping
-                this.categoryTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
-                this.chapterTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
-
                 // To prevent offset issue
                 this.categoryTooltip.style.right = titleTooltip.style.right;
                 this.chapterTooltip.style.right = titleTooltip.style.right;
                 this.categoryTooltip.style.textAlign = titleTooltip.style.textAlign;
                 this.chapterTooltip.style.textAlign = titleTooltip.style.textAlign;
             }
+
+            // Used to prevent overlapping
+            this.categoryTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
+            this.chapterTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
         });
     }
 
@@ -197,13 +272,17 @@ class PreviewBar {
 
         if (this.onMobileYouTube) {
             this.container.style.transform = "none";
-            this.container.style.height = "var(--yt-progress-bar-height)";
         } else if (!this.onInvidious) {
             this.container.classList.add("sbNotInvidious");
         }
 
         // On the seek bar
-        this.parent.prepend(this.container);
+        if (this.onYTTV) {
+            // order of sibling elements matters on YTTV
+            this.parent.insertBefore(this.container, this.parent.firstChild.nextSibling.nextSibling);
+        } else {
+            this.parent.prepend(this.container);
+        }
     }
 
     clear(): void {
@@ -225,7 +304,22 @@ class PreviewBar {
     set(segments: PreviewBarSegment[], videoDuration: number): void {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
+        this.hasYouTubeChapters = segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source));
 
+        // Remove unnecessary original chapters if submitted replacements exist
+        for (const chapter of this.segments.filter((s) => s.actionType === ActionType.Chapter && s.source === SponsorSourceType.Server)) {
+            const segmentDuration = chapter.segment[1] - chapter.segment[0];
+            
+            const duplicate = this.segments.find((s) => s.actionType === ActionType.Chapter 
+                && [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source) 
+                && Math.abs(s.segment[0] - chapter.segment[0]) < Math.min(3, segmentDuration / 3)
+                && Math.abs(s.segment[1] - chapter.segment[1]) < Math.min(3, segmentDuration / 3));
+            
+            if (duplicate) {
+                const index = this.segments.indexOf(duplicate);
+                this.segments.splice(index, 1);
+            }
+        }
 
         this.updatePageElements();
         // Sometimes video duration is inaccurate, pull from accessibility info
@@ -239,7 +333,8 @@ class PreviewBar {
     }
 
     private updatePageElements(): void {
-        const allProgressBars = document.querySelectorAll(".ytp-progress-bar") as NodeListOf<HTMLElement>;
+        // YT, Vorapis v3
+        const allProgressBars = document.querySelectorAll(".ytp-progress-bar, .ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list") as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
         if (this.progressBar) {
@@ -264,7 +359,7 @@ class PreviewBar {
         this.chapterMargin = 2;
         if (this.originalChapterBar) {
             this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
-            this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
+            this.existingChapters = this.segments.filter((s) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source)).sort((a, b) => a.segment[0] - b.segment[0]);
 
             if (this.existingChapters?.length > 0) {
                 const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
@@ -286,7 +381,7 @@ class PreviewBar {
         this.createChaptersBar(this.segments.sort((a, b) => a.segment[0] - b.segment[0]));
 
         if (chapterChevron) {
-            if (this.segments.some((segment) => segment.source === SponsorSourceType.YouTube)) {
+            if (this.segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))) {
                 chapterChevron.style.removeProperty("display");
             } else if (this.segments) {
                 chapterChevron.style.display = "none";
@@ -323,6 +418,10 @@ class PreviewBar {
             bar.style.marginRight = `${this.chapterMargin}px`;
         }
 
+        if (this.onYTTV) {
+            bar.classList.add("previewbar-yttv");
+        }
+
         return bar;
     }
 
@@ -343,11 +442,13 @@ class PreviewBar {
             // Merge overlapping chapters
             this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
         }
-
-        if (segments.every((segments) => segments.source === SponsorSourceType.YouTube)
+        
+        if ((segments.every((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))
             || (!Config.config.renderSegmentsAsChapters
                 && segments.every((segment) => segment.actionType !== ActionType.Chapter
-                    || segment.source === SponsorSourceType.YouTube))) {
+                    || [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))))
+            && !(hasAutogeneratedChapters() && !Config.config.showAutogeneratedChapters)) {
+
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
             return;
@@ -373,6 +474,15 @@ class PreviewBar {
             this.chapterGroups = this.unfilteredChapterGroups;
         }
 
+        if (this.chapterGroups.length === 0 && !Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+            // Add placeholder chapter group for whole video
+            this.chapterGroups = [{
+                segment: [0, this.videoDuration],
+                originalDuration: 0,
+                actionType: null
+            }];
+        }
+
         if (!this.chapterGroups || this.chapterGroups.length <= 0) {
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
@@ -648,8 +758,21 @@ class PreviewBar {
                         if (changedData.scale !== null) {
                             const transformScale = (changedData.scale) / progressBar.clientWidth;
 
+                            const scale = Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft));
                             customChangedElement.style.transform =
-                                `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`;
+                                `scaleX(${scale})`;
+                            if (customChangedElement.style.backgroundSize) {
+                                const backgroundSize = Math.max(changedData.scale / scale, fullSectionWidth * progressBar.clientWidth);
+                                customChangedElement.style.backgroundSize = `${backgroundSize}px`;
+
+                                if (changedData.scale < (cursor + fullSectionWidth) * progressBar.clientWidth) {
+                                    customChangedElement.style.backgroundPosition = `-${backgroundSize - fullSectionWidth * progressBar.clientWidth}px`;
+                                } else {
+                                    // Passed this section
+                                    customChangedElement.style.backgroundPosition = `-${cursor * progressBar.clientWidth}px`;
+                                }
+                            }
+
                             if (firstUpdate) {
                                 customChangedElement.style.transition = "none";
                                 setTimeout(() => customChangedElement.style.removeProperty("transition"), 50);
@@ -752,7 +875,8 @@ class PreviewBar {
     updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] {
         if (!Config.config.showSegmentNameInChapterBar
                 || Config.config.disableSkipping
-                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
+                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0 
+                    && (Config.config.showAutogeneratedChapters || !hasAutogeneratedChapters()))) {
             const chaptersContainer = this.getChaptersContainer();
             if (chaptersContainer) {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
@@ -792,14 +916,22 @@ class PreviewBar {
                         return -1;
                     } else if (a.actionType !== ActionType.Chapter && b.actionType === ActionType.Chapter) {
                         return 1;
+                    } else if (a.actionType === ActionType.Chapter && b.actionType === ActionType.Chapter
+                                && a.source === SponsorSourceType.Server && b.source !== SponsorSourceType.Server) {
+                        return -0.5;
+                    } else if (a.actionType === ActionType.Chapter && b.actionType === ActionType.Chapter
+                                && a.source !== SponsorSourceType.Server && b.source === SponsorSourceType.Server) {
+                        return 0.5;
                     } else {
-                        return (b.segment[0] - a.segment[0]);
+                        return (b.segment[0] - a.segment[0]) * 4;
                     }
                 })[0];
 
                 const chapterButton = this.getChapterButton(chaptersContainer);
-                chapterButton.classList.remove("ytp-chapter-container-disabled");
-                chapterButton.disabled = false;
+                if (chapterButton) {
+                    chapterButton.classList.remove("ytp-chapter-container-disabled");
+                    chapterButton.disabled = false;
+                }
 
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
                 chapterTitle.style.display = "none";
@@ -808,6 +940,9 @@ class PreviewBar {
                     const elem = document.createElement("div");
                     chapterTitle.parentElement.insertBefore(elem, chapterTitle);
                     elem.classList.add("sponsorChapterText");
+                    if (document.location.host === "tv.youtube.com") {
+                        elem.style.lineHeight = "initial";
+                    }
                     return elem;
                 })()) as HTMLDivElement;
                 chapterCustomText.innerText = chosenSegment.description || shortCategoryName(chosenSegment.category);
@@ -820,7 +955,15 @@ class PreviewBar {
 
                 if (chosenSegment.source === SponsorSourceType.Server) {
                     const chapterVoteContainer = this.chapterVote.getContainer();
-                    if (!chapterButton.contains(chapterVoteContainer)) {
+                    if (document.location.host === "tv.youtube.com") {
+                        if (!chaptersContainer.contains(chapterVoteContainer)) {
+                            const oldVoteContainers = document.querySelectorAll("#chapterVote");
+                            if (oldVoteContainers.length > 0) {
+                                oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
+                            }
+                            chaptersContainer.appendChild(chapterVoteContainer);
+                        }
+                    } else if (!chapterButton.contains(chapterVoteContainer)) {
                         const oldVoteContainers = document.querySelectorAll("#chapterVote");
                         if (oldVoteContainers.length > 0) {
                             oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
@@ -834,6 +977,18 @@ class PreviewBar {
                 } else {
                     this.chapterVote.setVisibility(false);
                 }
+            } else if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+                // Keep original hidden
+                chaptersContainer.querySelector(".sponsorChapterText")?.remove();
+                const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
+
+                chapterTitle.style.display = "none";
+                chaptersContainer.classList.remove("sponsorblock-chapter-visible");
+
+                const titlePrefixDot = chaptersContainer.querySelector(".ytp-chapter-title-prefix") as HTMLElement;
+                if (titlePrefixDot) titlePrefixDot.style.display = "none";
+                
+                this.chapterVote.setVisibility(false);
             } else {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
@@ -847,6 +1002,18 @@ class PreviewBar {
     }
 
     private getChaptersContainer(): HTMLElement {
+        if (document.location.host === "tv.youtube.com") {
+            if (!document.querySelector(".ytp-chapter-container")) {
+                const dest = document.querySelector(".ypcs-control-buttons-left");
+                if (!dest) return null;
+                const sbChapterContainer = document.createElement("div");
+                sbChapterContainer.className = "ytp-chapter-container";
+                const sbChapterTitleContent = document.createElement("div");
+                sbChapterTitleContent.className = "ytp-chapter-title-content";
+                sbChapterContainer.appendChild(sbChapterTitleContent);
+                dest.appendChild(sbChapterContainer);
+            }
+        }
         return document.querySelector(".ytp-chapter-container") as HTMLElement;
     }
 

src/js-components/skipButtonControlBar.ts

@@ -9,6 +9,7 @@ export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
     selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 }
 
 export class SkipButtonControlBar {
@@ -21,6 +22,7 @@ export class SkipButtonControlBar {
 
     showKeybindHint = true;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 
     enabled = false;
 
@@ -40,6 +42,7 @@ export class SkipButtonControlBar {
     constructor(props: SkipButtonControlBarProps) {
         this.skip = props.skip;
         this.onMobileYouTube = props.onMobileYouTube;
+        this.onYTTV = props.onYTTV;
 
         this.container = document.createElement("div");
         this.container.classList.add("skipButtonControlBarContainer");
@@ -50,6 +53,10 @@ export class SkipButtonControlBar {
         this.skipIcon.src = chrome.runtime.getURL("icons/skipIcon.svg");
         this.skipIcon.classList.add("ytp-button");
         this.skipIcon.id = "sbSkipIconControlBarImage";
+        if (this.onYTTV) {
+            this.skipIcon.style.width = "24px";
+            this.skipIcon.style.height = "24px";
+        }
 
         this.textContainer = document.createElement("div");
 
@@ -84,7 +91,7 @@ export class SkipButtonControlBar {
         this.chapterText = document.querySelector(".ytp-chapter-container");
 
         if (mountingContainer && !mountingContainer.contains(this.container)) {
-            if (this.onMobileYouTube) {
+            if (this.onMobileYouTube || this.onYTTV) {
                 mountingContainer.appendChild(this.container);
             } else {
                 mountingContainer.insertBefore(this.container, this.chapterText);
@@ -101,8 +108,10 @@ export class SkipButtonControlBar {
     }
 
     private getMountingContainer(): HTMLElement {
-        if (!this.onMobileYouTube) {
+        if (!this.onMobileYouTube && !this.onYTTV) {
             return document.querySelector(".ytp-left-controls");
+        } else if (this.onYTTV) {
+            return document.querySelector(".ypcs-control-buttons-left");
         } else {
             return document.getElementById("player-container-id");
         }

src/messageTypes.ts

@@ -2,7 +2,7 @@
 // Message and Response Types
 //
 
-import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
+import { SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "./types";
 
 interface BaseMessage {
     from?: string;
@@ -12,12 +12,11 @@ interface DefaultMessage {
     message:
         "update"
         | "sponsorStart"
-        | "getVideoID"
         | "getChannelID"
-        | "isChannelWhitelisted"
         | "submitTimes"
         | "refreshSegments"
-        | "closePopup";
+        | "closePopup"
+        | "getLogs";
 }
 
 interface BoolValueMessage {
@@ -57,6 +56,11 @@ interface ImportSegmentsMessage {
     data: string;
 }
 
+interface LoopChapterMessage {
+    message: "loopChapter";
+    UUID: SegmentUUID;
+}
+
 interface KeyDownMessage {
     message: "keydown";
     key: string;
@@ -69,7 +73,7 @@ interface KeyDownMessage {
     metaKey: boolean;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage);
+export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage | LoopChapterMessage);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;
@@ -77,6 +81,9 @@ export interface IsInfoFoundMessageResponse {
     sponsorTimes: SponsorTime[];
     time: number;
     onMobileYouTube: boolean;
+    videoID: VideoID;
+    loopedChapter: SegmentUUID | null;
+    channelWhitelisted: boolean;
 }
 
 interface GetVideoIdResponse {
@@ -85,6 +92,7 @@ interface GetVideoIdResponse {
 
 export interface GetChannelIDResponse {
     channelID: string;
+    isYTTV: boolean;
 }
 
 export interface SponsorStartResponse {
@@ -95,6 +103,10 @@ export interface IsChannelWhitelistedResponse {
     value: boolean;
 }
 
+export interface LoopedChapterResponse {
+    UUID: SegmentUUID;
+}
+
 export type MessageResponse =
     IsInfoFoundMessageResponse
     | GetVideoIdResponse
@@ -104,7 +116,9 @@ export type MessageResponse =
     | Record<string, never> // empty object response {}
     | VoteResponse
     | ImportSegmentsResponse
-    | RefreshSegmentsResponse;
+    | RefreshSegmentsResponse
+    | LogResponse
+    | LoopedChapterResponse;
 
 export interface VoteResponse {
     successType: number;
@@ -120,6 +134,11 @@ export interface RefreshSegmentsResponse {
     hasVideo: boolean;
 }
 
+export interface LogResponse {
+    debug: string[];
+    warn: string[];
+}
+
 export interface TimeUpdateMessage {
     message: "time";
     time: number;

src/options.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { createRoot } from 'react-dom/client';
 
-import Config from "./config";
-import * as CompileConfig from "../config.json";
+import Config, { generateDebugDetails } from "./config";
 import * as invidiousList from "../ci/invidiouslist.json";
 
 // Make the config public for debugging purposes
@@ -19,6 +18,7 @@ import { getHash } from "../maze-utils/src/hash";
 import { isFirefoxOrSafari } from "../maze-utils/src";
 import { isDeArrowInstalled } from "./utils/crossExtension";
 import { asyncRequestToServer } from "./utils/requests";
+import AdvancedSkipOptions from "./render/AdvancedSkipOptions";
 const utils = new Utils();
 let embed = false;
 
@@ -115,8 +115,25 @@ async function init() {
 
         if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
             optionsElements[i].classList.add("hidden", "hiding");
-            if (!dependentOn)
+            if (!dependentOn) {
+                if (optionsElements[i].getAttribute("data-no-safari") === "true" && optionsElements[i].id === "support-invidious") {
+                    // Put message about being disabled on safari
+                    const infoBox = document.createElement("div");
+                    infoBox.innerText = chrome.i18n.getMessage("invidiousDisabledSafari");
+                    
+                    const link = document.createElement("a");
+                    link.style.display = "block";
+                    const url = "https://bugs.webkit.org/show_bug.cgi?id=290508";
+                    link.href = url;
+                    link.innerText = url;
+
+                    infoBox.appendChild(link);
+
+                    optionsElements[i].parentElement.insertBefore(infoBox, optionsElements[i].nextSibling);
+                }
+
                 continue;
+            }
         }
 
         const option = optionsElements[i].getAttribute("data-sync");
@@ -334,6 +351,9 @@ async function init() {
             case "react-CategoryChooserComponent":
                 categoryChoosers.push(new CategoryChooser(optionsElements[i]));
                 break;
+            case "react-AdvancedSkipOptionsComponent":
+                new AdvancedSkipOptions(optionsElements[i]);
+                break;
             case "react-UnsubmittedVideosComponent":
                 unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i]));
                 break;
@@ -698,32 +718,14 @@ function validateServerAddress(input: string): string {
 }
 
 function copyDebugOutputToClipboard() {
-    // Build output debug information object
-    const output = {
-        debug: {
-            userAgent: navigator.userAgent,
-            platform: navigator.platform,
-            language: navigator.language,
-            extensionVersion: chrome.runtime.getManifest().version
-        },
-        config: JSON.parse(JSON.stringify(Config.cachedSyncConfig)) // Deep clone config object
-    };
-
-    // Sanitise sensitive user config values
-    delete output.config.userID;
-    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
-        ? "Default server address" : "Custom server address";
-    output.config.invidiousInstances = output.config.invidiousInstances.length;
-    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
-
     // Copy object to clipboard
-    navigator.clipboard.writeText(JSON.stringify(output, null, 4))
-      .then(() => {
+    navigator.clipboard.writeText(generateDebugDetails())
+    .then(() => {
         alert(chrome.i18n.getMessage("copyDebugInformationComplete"));
-      })
-      .catch(() => {
+    })
+    .catch(() => {
         alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
-      });
+    });
 }
 
 function isIncognitoAllowed(): Promise<boolean> {

src/popup/PopupComponent.tsx

@@ -0,0 +1,453 @@
+import * as React from "react";
+import { YourWorkComponent } from "./YourWorkComponent";
+// import { ToggleOptionComponent } from "./ToggleOptionComponent";
+// import { FormattingOptionsComponent } from "./FormattingOptionsComponent";
+import { isSafari } from "../../maze-utils/src/config";
+import { showDonationLink } from "../utils/configUtils";
+import Config, { generateDebugDetails } from "../config";
+import { GetChannelIDResponse, IsInfoFoundMessageResponse, LogResponse, Message, MessageResponse, PopupMessage } from "../messageTypes";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { SegmentListComponent } from "./SegmentListComponent";
+import { ActionType, SegmentUUID, SponsorSourceType, SponsorTime } from "../types";
+import { SegmentSubmissionComponent } from "./SegmentSubmissionComponent";
+import { copyToClipboardPopup } from "./popupUtils";
+
+export enum LoadingStatus {
+    Loading,
+    SegmentsFound,
+    NoSegmentsFound,
+    ConnectionError,
+    StillLoading,
+    NoVideo
+}
+
+export interface LoadingData {
+    status: LoadingStatus;
+    code?: number;
+}
+
+let loadRetryCount = 0;
+
+export const PopupComponent = () => {
+    const [status, setStatus] = React.useState<LoadingData>({
+        status: LoadingStatus.Loading
+    });
+    const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping);
+    const [channelWhitelisted, setChannelWhitelisted] = React.useState<boolean | null>(null);
+    const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false);
+    const [showNoticeButton, setShowNoticeButton] = React.useState(Config.config!.dontShowNotice);
+
+    const [currentTime, setCurrentTime] = React.useState<number>(0);
+    const [segments, setSegments] = React.useState<SponsorTime[]>([]);
+    const [loopedChapter, setLoopedChapter] = React.useState<SegmentUUID | null>(null);
+
+    const [videoID, setVideoID] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        loadSegments({
+            updating: false,
+            setStatus,
+            setChannelWhitelisted,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        setupComPort({
+            setStatus,
+            setChannelWhitelisted,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        forwardClickEvents(sendMessage);
+    }, []);
+
+    return (
+        <div id="sponsorblockPopup">
+            {
+                window !== window.top &&
+                <button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
+                    sendMessage({ message: "closePopup" });
+                }}>
+                    <img src="icons/close.png" width="15" height="15" alt="Close icon"/>
+                </button>
+            }
+
+            {
+                Config.config!.testingServer &&
+                <div id="sbBetaServerWarning"
+                        title={chrome.i18n.getMessage("openOptionsPage")}
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openConfig", "hash": "advanced" });
+                        }}>
+                    {chrome.i18n.getMessage("betaServerWarning")}
+                </div>
+            }
+
+            <header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
+                <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
+                <p className="u-mZ">
+                    SponsorBlock
+                </p>
+            </header>
+
+            <p id="videoFound" 
+                    className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
+                {getVideoStatusText(status)}
+            </p>
+
+            <button id="refreshSegmentsButton" title={chrome.i18n.getMessage("refreshSegments")} onClick={(e) => {
+                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                loadSegments({
+                    updating: true,
+                    setStatus,
+                    setChannelWhitelisted,
+                    setVideoID,
+                    setCurrentTime,
+                    setSegments,
+                    setLoopedChapter
+                }).then(() => stopAnimation());
+            }}>
+                <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
+            </button>
+
+            <SegmentListComponent
+                videoID={videoID}
+                currentTime={currentTime}
+                status={status.status}
+                segments={segments}
+                loopedChapter={loopedChapter}
+                sendMessage={sendMessage} />
+
+            {/* Toggle Box */}
+            <div className="sbControlsMenu">
+                {/* github: mbledkowski/toggle-switch */}
+                {channelWhitelisted !== null && (
+                    <label id="whitelistButton" htmlFor="whitelistToggle" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
+                        <input type="checkbox" 
+                            style={{ "display": "none" }} 
+                            id="whitelistToggle" 
+                            checked={channelWhitelisted}
+                            onChange={async (e) => {
+                                const response = await sendMessage({ message: 'getChannelID' }) as GetChannelIDResponse;
+                                if (!response.channelID) {
+                                    if (response.isYTTV) {
+                                        alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
+                                    } else {
+                                        alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+                                    }
+
+                                    return;
+                                }
+
+                                const whitelistedChannels = Config.config.whitelistedChannels ?? [];
+                                if (e.target.checked) {
+                                    whitelistedChannels.splice(whitelistedChannels.indexOf(response.channelID), 1);
+                                } else {
+                                    whitelistedChannels.push(response.channelID);
+                                }
+                                Config.config.whitelistedChannels = whitelistedChannels;
+
+                                setChannelWhitelisted(!e.target.checked);
+                                if (!Config.config.forceChannelCheck) setShowForceChannelCheckWarning(true);
+
+                                // Send a message to the client
+                                sendMessage({
+                                    message: 'whitelistChange',
+                                    value: !e.target.checked
+                                });
+
+                            }}/>
+                        <svg viewBox="0 0 24 24" width="23" height="23" className={"SBWhitelistIcon sbControlsMenu-itemIcon " + (channelWhitelisted ? " rotated" : "")}>
+                            <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+                        </svg>
+                        <span id="whitelistChannel" className={channelWhitelisted ? " hidden" : ""}>
+                            {chrome.i18n.getMessage("whitelistChannel")}
+                        </span>
+                        <span id="unwhitelistChannel" className={!channelWhitelisted ? " hidden" : ""}>
+                            {chrome.i18n.getMessage("removeFromWhitelist")}
+                        </span>
+                    </label>
+                )}
+                <label id="disableExtension" htmlFor="toggleSwitch" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
+                    <span className="toggleSwitchContainer-switch">
+                        <input type="checkbox" 
+                            style={{ "display": "none" }} 
+                            id="toggleSwitch" 
+                            checked={extensionEnabled}
+                            onChange={(e) => {
+                                Config.config!.disableSkipping = !e.target.checked;
+                                setExtensionEnabled(e.target.checked)
+                            }}/>
+                        <span className="switchBg shadow"></span>
+                        <span className="switchBg white"></span>
+                        <span className="switchBg green"></span>
+                        <span className="switchDot"></span>
+                    </span>
+                    <span id="disableSkipping" className={extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("enableSkipping")}
+                    </span>
+                    <span id="enableSkipping" className={!extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("disableSkipping")}
+                    </span>
+                </label>
+                <button id="optionsButton" 
+                    className="sbControlsMenu-item" 
+                    title={chrome.i18n.getMessage("Options")}
+                    onClick={() => {
+                        chrome.runtime.sendMessage({ "message": "openConfig" });
+                    }}>
+                <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" className="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
+                    {chrome.i18n.getMessage("Options")}
+                </button>
+            </div>
+
+            {
+                showForceChannelCheckWarning &&
+                <a id="whitelistForceCheck" onClick={() => {
+                    chrome.runtime.sendMessage({ "message": "openConfig", "hash": "behavior" });
+                }}>
+                    {chrome.i18n.getMessage("forceChannelCheckPopup")}
+                </a>
+            }
+
+            {
+                !Config.config.cleanPopup &&
+                <SegmentSubmissionComponent
+                    videoID={videoID || ""}
+                    status={status.status}
+                    sendMessage={sendMessage} />
+            }
+            
+
+            {/* Your Work box */}
+            {
+                !Config.config.cleanPopup &&
+                <YourWorkComponent/>
+            }
+
+            {/* Footer */}
+            {
+                !Config.config.cleanPopup &&
+                <footer id="sbFooter">
+                    <a id="helpButton"
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openHelp" });
+                        }}>
+                            {chrome.i18n.getMessage("help")}
+                    </a>
+                    <a href="https://sponsor.ajay.app" target="_blank" rel="noreferrer">
+                        {chrome.i18n.getMessage("website")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noreferrer" className={isSafari() ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("viewLeaderboard")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" className={!showDonationLink() ? " hidden" : ""} onClick={() => {
+                        Config.config!.donateClicked = Config.config!.donateClicked + 1;
+                    }}>
+                        {chrome.i18n.getMessage("Donate")}
+                    </a>
+                    <br />
+                    <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noreferrer">
+                        GitHub
+                    </a>
+                    <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noreferrer">
+                        Discord
+                    </a>
+                    <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noreferrer">
+                        Matrix
+                    </a>
+                    <a id="debugLogs"
+                            onClick={async () => {
+                                const logs = await sendMessage({ message: "getLogs" }) as LogResponse;
+
+                                copyToClipboardPopup(`${generateDebugDetails()}\n\nWarn:\n${logs.warn.join("\n")}\n\nDebug:\n${logs.debug.join("\n")}`, sendMessage);
+                            }}>
+                        {chrome.i18n.getMessage("copyDebugLogs")}
+                    </a>
+                </footer>
+            }
+
+            {
+                showNoticeButton &&
+                <button id="showNoticeAgain" onClick={() => {
+                    Config.config!.dontShowNotice = false;
+                    setShowNoticeButton(false);
+                }}>
+                    { chrome.i18n.getMessage("showNotice") }
+                </button>
+            }
+        </div>
+    );
+};
+
+function getVideoStatusText(status: LoadingData): string {
+    switch (status.status) {
+        case LoadingStatus.Loading:
+            return chrome.i18n.getMessage("Loading");
+        case LoadingStatus.SegmentsFound:
+            return chrome.i18n.getMessage("sponsorFound");
+        case LoadingStatus.NoSegmentsFound:
+            return chrome.i18n.getMessage("sponsor404");
+        case LoadingStatus.ConnectionError:
+            return chrome.i18n.getMessage("connectionError") + status.code;
+        case LoadingStatus.StillLoading:
+            return chrome.i18n.getMessage("segmentsStillLoading");
+        case LoadingStatus.NoVideo:
+            return chrome.i18n.getMessage("noVideoID");
+    }
+}
+
+interface SegmentsLoadedProps {
+    setStatus: (status: LoadingData) => void;
+    setChannelWhitelisted: (whitelisted: boolean | null) => void;
+    setVideoID: (videoID: string | null) => void;
+    setCurrentTime: (time: number) => void;
+    setSegments: (segments: SponsorTime[]) => void;
+    setLoopedChapter: (loopedChapter: SegmentUUID | null) => void;
+}
+
+interface LoadSegmentsProps extends SegmentsLoadedProps {
+    updating: boolean;
+}
+
+async function loadSegments(props: LoadSegmentsProps): Promise<void> {
+    const response = await sendMessage({ message: "isInfoFound", updating: props.updating }) as IsInfoFoundMessageResponse;
+
+    if (response && response.videoID) {
+        segmentsLoaded(response, props);
+    } else {
+        // Handle error if it exists
+        chrome.runtime.lastError;
+
+        props.setStatus({
+            status: LoadingStatus.NoVideo,
+        });
+
+        if (!props.updating) {
+            loadRetryCount++;
+            if (loadRetryCount < 6) {
+                setTimeout(() => loadSegments(props), 100 * loadRetryCount);
+            }
+        }
+    }
+}
+
+function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void {
+    if (response.found) {
+        props.setStatus({
+            status: LoadingStatus.SegmentsFound
+        });
+    } else if (response.status === 404 || response.status === 200) {
+        props.setStatus({
+            status: LoadingStatus.NoSegmentsFound
+        });
+    } else if (response.status) {
+        props.setStatus({
+            status: LoadingStatus.ConnectionError,
+            code: response.status
+        });
+    } else {
+        props.setStatus({
+            status: LoadingStatus.StillLoading
+        });
+    }
+
+    
+    props.setVideoID(response.videoID);
+    props.setCurrentTime(response.time);
+    props.setChannelWhitelisted(response.channelWhitelisted);
+    props.setSegments((response.sponsorTimes || [])
+        .filter((segment) => segment.source === SponsorSourceType.Server)
+        .sort((a, b) => b.segment[1] - a.segment[1])
+        .sort((a, b) => a.segment[0] - b.segment[0])
+        .sort((a, b) => a.actionType === ActionType.Full ? -1 : b.actionType === ActionType.Full ? 1 : 0));
+    props.setLoopedChapter(response.loopedChapter);
+}
+
+function sendMessage(request: Message): Promise<MessageResponse> {
+    return new Promise((resolve) => {
+        if (chrome.tabs) {
+            chrome.tabs.query({
+                active: true,
+                currentWindow: true
+            }, (tabs) => chrome.tabs.sendMessage(tabs[0].id, request, resolve));
+        } else {
+            chrome.runtime.sendMessage({ message: "tabs", data: request }, resolve);
+        }
+    });
+}
+
+interface ComPortProps extends SegmentsLoadedProps {
+}
+
+function setupComPort(props: ComPortProps): void {
+    const port = chrome.runtime.connect({ name: "popup" });
+    port.onDisconnect.addListener(() => setupComPort(props));
+    port.onMessage.addListener((msg) => onMessage(props, msg));
+}
+
+function onMessage(props: ComPortProps, msg: PopupMessage) {
+    switch (msg.message) {
+        case "time":
+            props.setCurrentTime(msg.time);
+            break;
+        case "infoUpdated":
+            segmentsLoaded(msg, props);
+            break;
+        case "videoChanged":
+            props.setStatus({
+                status: LoadingStatus.StillLoading
+            });
+            props.setVideoID(msg.videoID);
+            props.setChannelWhitelisted(msg.whitelisted);
+            props.setSegments([]);
+            break;
+    }
+}
+
+function forwardClickEvents(sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window !== window.top) {
+        document.addEventListener("keydown", (e) => {
+            const target = e.target as HTMLElement;
+            if (target.tagName === "INPUT"
+                || target.tagName === "TEXTAREA"
+                || e.key === "ArrowUp"
+                || e.key === "ArrowDown") {
+                return;
+            }
+
+            if (e.key === " ") {
+                // No scrolling
+                e.preventDefault();
+            }
+
+            sendMessage({
+                message: "keydown",
+                key: e.key,
+                keyCode: e.keyCode,
+                code: e.code,
+                which: e.which,
+                shiftKey: e.shiftKey,
+                ctrlKey: e.ctrlKey,
+                altKey: e.altKey,
+                metaKey: e.metaKey
+            });
+        });
+    }
+}
+
+// Copy over styles from parent window
+window.addEventListener("message", async (e): Promise<void> => {
+    if (e.source !== window.parent) return;
+    if (e.origin.endsWith(".youtube.com") && e.data && e.data?.type === "style") {
+        const style = document.createElement("style");
+        style.textContent = e.data.css;
+        document.head.appendChild(style);
+    }
+});

src/popup/SegmentListComponent.tsx

@@ -0,0 +1,436 @@
+import * as React from "react";
+import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
+import Config from "../config";
+import { waitFor } from "../../maze-utils/src";
+import { shortCategoryName } from "../utils/categoryUtils";
+import { getErrorMessage, getFormattedTime } from "../../maze-utils/src/formating";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { asyncRequestToServer } from "../utils/requests";
+import { Message, MessageResponse, VoteResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+import GenericNotice from "../render/GenericNotice";
+import { exportTimes } from "../utils/exporter";
+import { copyToClipboardPopup } from "./popupUtils";
+
+interface SegmentListComponentProps {
+    videoID: VideoID;
+    currentTime: number;
+    status: LoadingStatus;
+    segments: SponsorTime[];
+    loopedChapter: SegmentUUID | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+enum SegmentListTab {
+    Segments,
+    Chapter
+}
+
+export const SegmentListComponent = (props: SegmentListComponentProps) => {
+    const [tab, setTab] = React.useState(SegmentListTab.Segments);
+    const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
+
+    React.useEffect(() => {
+        if (!Config.isReady()) {
+            waitFor(() => Config.isReady()).then(() => {
+                setIsVip(Config.config.isVip);
+            });
+        } else {
+            setIsVip(Config.config.isVip);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        setTab(SegmentListTab.Segments);
+    }, [props.videoID]);
+
+    const tabFilter = (segment: SponsorTime) => {
+        if (tab === SegmentListTab.Chapter) {
+            return segment.actionType === ActionType.Chapter;
+        } else {
+            return segment.actionType !== ActionType.Chapter;
+        }
+    };
+
+    return (
+        <div id="issueReporterContainer">
+            <div id="issueReporterTabs" className={props.segments && props.segments.find(s => s.actionType === ActionType.Chapter) ? "" : "hidden"}>
+                <span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Segments);
+                }}>
+                    <span>{chrome.i18n.getMessage("SegmentsCap")}</span>
+                </span>
+                <span id="issueReporterTabChapters" className={tab === SegmentListTab.Chapter ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Chapter);
+                }}>
+                    <span>{chrome.i18n.getMessage("Chapters")}</span>
+                </span>
+            </div>
+            <div id="issueReporterTimeButtons"
+                    onMouseLeave={() => selectSegment({
+                        segment: null,
+                        sendMessage: props.sendMessage
+                    })}>
+                {
+                    props.segments.map((segment) => (
+                        <SegmentListItem
+                            key={segment.UUID}
+                            videoID={props.videoID}
+                            segment={segment}
+                            currentTime={props.currentTime}
+                            isVip={isVip}
+                            startingLooped={props.loopedChapter === segment.UUID}
+
+                            tabFilter={tabFilter}
+                            sendMessage={props.sendMessage}
+                        />
+                    ))
+                }
+            </div>
+            
+            <ImportSegments
+                status={props.status}
+                segments={props.segments}
+                sendMessage={props.sendMessage}
+            />
+        </div>
+    );
+};
+
+function SegmentListItem({ segment, videoID, currentTime, isVip, startingLooped, tabFilter, sendMessage }: {
+    segment: SponsorTime;
+    videoID: VideoID;
+    currentTime: number;
+    isVip: boolean;
+    startingLooped: boolean;
+    
+    tabFilter: (segment: SponsorTime) => boolean;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}) {
+    const [voteMessage, setVoteMessage] = React.useState<string | null>(null);
+    const [hidden, setHidden] = React.useState(segment.hidden || SponsorHideType.Visible);
+    const [isLooped, setIsLooped] = React.useState(startingLooped);
+
+    let extraInfo = "";
+    if (segment.hidden === SponsorHideType.Downvoted) {
+        // This one is downvoted
+        extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
+    } else if (segment.hidden === SponsorHideType.MinimumDuration) {
+        // This one is too short
+        extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
+    } else if (segment.hidden === SponsorHideType.Hidden) {
+        extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
+    }
+
+    return (
+        <details data-uuid={segment.UUID}
+                onDoubleClick={() => skipSegment({
+                    segment,
+                    sendMessage
+                })}
+                onMouseEnter={() => {
+                    selectSegment({
+                        segment,
+                        sendMessage
+                    });
+                }}
+                className={"votingButtons " + (!tabFilter(segment) ? "hidden" : "")}>
+            <summary className={"segmentSummary " + (
+                currentTime >= segment.segment[0] ? (
+                    currentTime < segment.segment[1] ? "segmentActive" : "segmentPassed"
+                ) : ""
+            )}>
+                <div>
+                    {
+                        segment.actionType !== ActionType.Chapter &&
+                        <span className="sponsorTimesCategoryColorCircle dot" style={{ backgroundColor: Config.config.barTypes[segment.category]?.color }}></span>
+                    }
+                    <span className="summaryLabel">{(segment.description || shortCategoryName(segment.category)) + extraInfo}</span>
+                </div>
+
+                <div style={{ margin: "5px" }}>
+                    {
+                        segment.actionType === ActionType.Full ? chrome.i18n.getMessage("full") :
+                        (getFormattedTime(segment.segment[0], true) +
+                            (segment.actionType !== ActionType.Poi
+                                ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment.segment[1], true)
+                                : ""))
+                    }
+                </div>
+            </summary>
+
+            <div className={"sbVoteButtonsContainer " + (voteMessage ? "hidden" : "")}>
+                <img
+                    className="voteButton"
+                    title="Upvote"
+                    src={chrome.runtime.getURL("icons/thumbs_up.svg")}
+                    onClick={() => {
+                        vote({
+                            type: 1,
+                            UUID: segment.UUID,
+                            setVoteMessage: setVoteMessage,
+                            sendMessage
+                        });
+                    }}/>
+                <img
+                    className="voteButton"
+                    title="Downvote"
+                    src={segment.locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg")}
+                    onClick={() => {
+                        vote({
+                            type: 0,
+                            UUID: segment.UUID,
+                            setVoteMessage: setVoteMessage,
+                            sendMessage
+                        });
+                    }}/>
+                <img
+                    className="voteButton"
+                    title="Copy Segment ID"
+                    src={chrome.runtime.getURL("icons/clipboard.svg")}
+                    onClick={async (e) => {
+                        const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                        if (segment.UUID.length > 60) {
+                            copyToClipboardPopup(segment.UUID, sendMessage);
+                        } else {
+                            const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                                UUID: segment.UUID,
+                                videoID: videoID
+                            });
+                
+                            if (segmentIDData.ok && segmentIDData.responseText) {
+                                copyToClipboardPopup(segmentIDData.responseText, sendMessage);
+                            }
+                        }
+
+                        stopAnimation();
+                    }}/>
+                {
+                    segment.actionType === ActionType.Chapter &&
+                    <img
+                        className="voteButton"
+                        title={isLooped ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter")}
+                        src={isLooped ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg")}
+                        onClick={(e) => {
+                            if (isLooped) {
+                                loopChapter({
+                                    segment: null,
+                                    element: e.currentTarget,
+                                    sendMessage
+                                });
+                            } else {
+                                loopChapter({
+                                    segment,
+                                    element: e.currentTarget,
+                                    sendMessage
+                                });
+                            }
+
+                            setIsLooped(!isLooped);
+                        }}/>
+                }
+                {
+                    (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Mute
+                        || segment.actionType === ActionType.Poi
+                        && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segment.hidden)) &&
+                    <img
+                        className="voteButton"
+                        title="Hide Segment"
+                        src={hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                        onClick={(e) => {
+                            const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                            stopAnimation();
+
+                            if (segment.hidden === SponsorHideType.Hidden) {
+                                segment.hidden = SponsorHideType.Visible;
+                                setHidden(SponsorHideType.Visible);
+                            } else {
+                                segment.hidden = SponsorHideType.Hidden;
+                                setHidden(SponsorHideType.Hidden);
+                            }
+
+                            sendMessage({
+                                message: "hideSegment",
+                                type: segment.hidden,
+                                UUID: segment.UUID
+                            });
+                        }}/>
+                }
+                {
+                    segment.actionType !== ActionType.Full &&
+                    <img
+                        className="voteButton"
+                        title={segment.actionType === ActionType.Chapter ? chrome.i18n.getMessage("playChapter") : chrome.i18n.getMessage("skipSegment")}
+                        src={chrome.runtime.getURL("icons/skip.svg")}
+                        onClick={(e) => {
+                            skipSegment({
+                                segment,
+                                element: e.currentTarget,
+                                sendMessage
+                            });
+                        }}/>
+                }
+            </div>
+
+            <div className={"sponsorTimesVoteStatusContainer " + (voteMessage ? "" : "hidden")}>
+                <div className="sponsorTimesThanksForVotingText">
+                    {voteMessage}
+                </div>
+            </div>
+        </details>
+    );
+}
+
+async function vote(props: {
+    type: number;
+    UUID: SegmentUUID;
+    setVoteMessage: (message: string | null) => void;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): Promise<void> {
+    props.setVoteMessage(chrome.i18n.getMessage("Loading"));
+
+    const response = await props.sendMessage({
+        message: "submitVote",
+        type: props.type,
+        UUID: props.UUID
+    }) as VoteResponse;
+
+    if (response != undefined) {
+        // See if it was a success or failure
+        if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+            // Success (treat rate limits as a success)
+            props.setVoteMessage(chrome.i18n.getMessage("voted"));
+        } else if (response.successType == -1) {
+            props.setVoteMessage(getErrorMessage(response.statusCode, response.responseText));
+        }
+        setTimeout(() => props.setVoteMessage(null), 1500);
+    }
+}
+
+function skipSegment({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element?: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    if (segment.actionType === ActionType.Chapter) {
+        sendMessage({
+            message: "unskip",
+            UUID: segment.UUID
+        });
+    } else {
+        sendMessage({
+            message: "reskip",
+            UUID: segment.UUID
+        });
+    }
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+function selectSegment({ segment, sendMessage }: {
+    segment: SponsorTime | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "selectSegment",
+        UUID: segment?.UUID
+    });
+}
+
+function loopChapter({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "loopChapter",
+        UUID: segment?.UUID
+    });
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+interface ImportSegmentsProps {
+    status: LoadingStatus;
+    segments: SponsorTime[];
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+function ImportSegments(props: ImportSegmentsProps) {
+    const [importMenuVisible, setImportMenuVisible] = React.useState(false);
+    const textArea = React.useRef<HTMLTextAreaElement>(null);
+
+    return (
+        <div id="issueReporterImportExport" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <div id="importExportButtons">
+            <button id="importSegmentsButton"
+                    className={props.status === LoadingStatus.SegmentsFound || props.status === LoadingStatus.NoSegmentsFound ? "" : "hidden"}
+                    title={chrome.i18n.getMessage("importSegments")}
+                    onClick={() => {
+                        setImportMenuVisible(!importMenuVisible);
+                    }}>
+                <img src="/icons/import.svg" alt="Import icon" id="importSegments" />
+            </button>
+            <button id="exportSegmentsButton"
+                    className={props.segments.length === 0 ? "hidden" : ""}
+                    title={chrome.i18n.getMessage("exportSegments")}
+                    onClick={(e) => {
+                        copyToClipboardPopup(exportTimes(props.segments), props.sendMessage);
+
+                        const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+                        stopAnimation();
+                        new GenericNotice(null, "exportCopied", {
+                            title:  chrome.i18n.getMessage(`CopiedExclamation`),
+                            timed: true,
+                            maxCountdownTime: () => 0.6,
+                            referenceNode: e.currentTarget.parentElement,
+                            dontPauseCountdown: true,
+                            style: {
+                                top: 0,
+                                bottom: 0,
+                                minWidth: 0,
+                                right: "30px",
+                                margin: "auto",
+                                height: "max-content"
+                            },
+                            hideLogo: true,
+                            hideRightInfo: true
+                        });
+                    }}>
+                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
+            </button>
+            </div>
+
+            <span id="importSegmentsMenu" className={importMenuVisible ? "" : "hidden"}>
+                <textarea id="importSegmentsText" rows={5} style={{ width: "80%" }} ref={textArea}></textarea>
+
+                <button id="importSegmentsSubmit"
+                        title={chrome.i18n.getMessage("importSegments")}
+                        onClick={() => {
+                            const text = textArea.current.value;
+
+                            props.sendMessage({
+                                message: "importSegments",
+                                data: text
+                            });
+
+                            setImportMenuVisible(false);
+                        }}>
+                    {chrome.i18n.getMessage("Import")}
+                </button>
+            </span>
+        </div>
+    )
+}

src/popup/SegmentSubmissionComponent.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { VideoID } from "../types";
+import Config from "../config";
+import { Message, MessageResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+
+interface SegmentSubmissionComponentProps {
+    videoID: VideoID;
+    status: LoadingStatus;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+export const SegmentSubmissionComponent = (props: SegmentSubmissionComponentProps) => {
+    const segments = Config.local.unsubmittedSegments[props.videoID];
+
+    const [showSubmitButton, setShowSubmitButton] = React.useState(segments && segments.length > 0);
+    const [showStartSegment, setShowStartSegment] = React.useState(!segments || segments[segments.length - 1].segment.length === 2);
+
+    return (
+        <div id="mainControls" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <h1 className="sbHeader">
+                {chrome.i18n.getMessage("recordTimesDescription")}
+            </h1>
+            <sub className="sponsorStartHint grey-text">
+                {chrome.i18n.getMessage("popupHint")}
+            </sub>
+            <div style={{ textAlign: "center", margin: "8px 0" }}>
+                <button id="sponsorStart" 
+                        className="sbMediumButton"
+                        style={{ marginRight: "8px" }}
+                        onClick={() => {
+                            props.sendMessage({
+                                from: "popup",
+                                message: "sponsorStart"
+                            });
+
+                            setShowStartSegment(!showStartSegment);
+                            setShowSubmitButton(true);
+
+                            // Once data is saved, make sure it is correct
+                            setTimeout(() => {
+                                const segments = Config.local.unsubmittedSegments[props.videoID];
+                                setShowStartSegment(!segments || segments[segments.length - 1].segment.length === 2);
+
+                                setShowSubmitButton(segments && segments.length > 0);
+                            }, 200);
+                        }}>
+                    {showStartSegment ? chrome.i18n.getMessage("sponsorStart") : chrome.i18n.getMessage("sponsorEnd")}
+                </button>
+                <button id="submitTimes" 
+                        className={"sbMediumButton " + (showSubmitButton ? "" : "hidden")}
+                        onClick={() => {
+                            props.sendMessage({
+                                message: "submitTimes"
+                            });
+                        }}>
+                    {chrome.i18n.getMessage("OpenSubmissionMenu")}
+                </button>
+            </div>
+            <span id="submissionHint" className={showSubmitButton ? "" : "hidden"}>
+                {chrome.i18n.getMessage("submissionEditHint")}
+            </span>
+        </div>
+    );
+};

src/popup/YourWorkComponent.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { getHash } from "../../maze-utils/src/hash";
+import { getErrorMessage } from "../../maze-utils/src/formating";
+import Config from "../config";
+import { asyncRequestToServer } from "../utils/requests";
+import PencilIcon from "../svg-icons/pencilIcon";
+import ClipboardIcon from "../svg-icons/clipboardIcon";
+import CheckIcon from "../svg-icons/checkIcon";
+
+export const YourWorkComponent = () => {
+    const [isSettingUsername, setIsSettingUsername] = React.useState(false);
+    const [username, setUsername] = React.useState("");
+    const [newUsername, setNewUsername] = React.useState("");
+    const [usernameSubmissionStatus, setUsernameSubmissionStatus] = React.useState("");
+    const [submissionCount, setSubmissionCount] = React.useState("");
+    const [viewCount, setViewCount] = React.useState(0);
+    const [minutesSaved, setMinutesSaved] = React.useState(0);
+    const [showDonateMessage, setShowDonateMessage] = React.useState(false);
+
+    React.useEffect(() => {
+        (async () => {
+            const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions", "segmentCount"];
+            const result = await asyncRequestToServer("GET", "/api/userInfo", {
+                publicUserID: await getHash(Config.config!.userID!),
+                values
+            });
+
+            if (result.ok) {
+                const userInfo = JSON.parse(result.responseText);
+                setUsername(userInfo.userName);
+                setSubmissionCount(Math.max(Config.config.sponsorTimesContributed ?? 0, userInfo.segmentCount).toLocaleString());
+                setViewCount(userInfo.viewCount);
+                setMinutesSaved(userInfo.minutesSaved);
+
+                Config.config!.isVip = userInfo.vip;
+                Config.config!.permissions = userInfo.permissions;
+
+                setShowDonateMessage(Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
+                    && viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10);
+            }
+        })();
+    }, []);
+
+    return (
+        <div className="sbYourWorkBox">
+            <h2 className="sbHeader" style={{ "padding": "8px 15px" }}>
+                {chrome.i18n.getMessage("yourWork")}
+            </h2>
+            <div className="sbYourWorkCols">
+                {/* Username */}
+                <div id="usernameElement">
+                    <p className="u-mZ grey-text">
+                        {chrome.i18n.getMessage("Username")}:
+                        {/* loading/errors */}
+                        <span id="setUsernameStatus" 
+                            className={`u-mZ white-text${!usernameSubmissionStatus ? " hidden" : ""}`}>
+                            {usernameSubmissionStatus}
+                        </span>
+                    </p>
+                    <div id="setUsernameContainer" className={isSettingUsername ? " hidden" : ""}>
+                        <p id="usernameValue">{username}</p>
+                        <button id="setUsernameButton" 
+                            title={chrome.i18n.getMessage("setUsername")}
+                            onClick={() => {
+                                setNewUsername(username);
+                                setIsSettingUsername(!isSettingUsername);
+                            }}>
+                            <PencilIcon id="sbPopupIconEdit" className="sbPopupButton" />
+                        </button>
+                        <button id="copyUserID" 
+                            title={chrome.i18n.getMessage("copyPublicID")}
+                            onClick={async () => {
+                                window.navigator.clipboard.writeText(await getHash(Config.config!.userID!));
+                            }}>
+                            <ClipboardIcon id="sbPopupIconCopyUserID" className="sbPopupButton" />
+                        </button>
+                    </div>
+                    <div id="setUsername" className={!isSettingUsername ? " hidden" : " SBExpanded"}>
+                        <input id="usernameInput" 
+                            placeholder={chrome.i18n.getMessage("Username")}
+                            value={newUsername}
+                            onChange={(e) => {
+                                setNewUsername(e.target.value);
+                            }}/>
+                        <button id="submitUsername"
+                            onClick={() => {
+                                if (newUsername.length > 0) {
+                                    setUsernameSubmissionStatus(chrome.i18n.getMessage("Loading"));
+                                    asyncRequestToServer("POST", `/api/setUsername?userID=${Config.config!.userID}&username=${newUsername}`)
+                                    .then((result) => {
+                                        if (result.ok) {
+                                            setUsernameSubmissionStatus("");
+                                            setUsername(newUsername);
+                                            setIsSettingUsername(!isSettingUsername);
+                                        } else {
+                                            setUsernameSubmissionStatus(getErrorMessage(result.status, result.responseText));
+                                        }
+                                    }).catch((e) => {
+                                        setUsernameSubmissionStatus(`${chrome.i18n.getMessage("Error")}: ${e}`);
+                                    });
+                                }
+                            }}>
+                            <CheckIcon id="sbPopupIconCheck" className="sbPopupButton" />
+                        </button>
+                    </div>
+                </div>
+                <SubmissionCounts
+                    isSettingUsername={isSettingUsername}
+                    submissionCount={submissionCount}
+                />
+            </div>
+
+            <TimeSavedMessage
+                viewCount={viewCount}
+                minutesSaved={minutesSaved}
+            />
+
+            {showDonateMessage && <DonateMessage onClose={() => {
+                setShowDonateMessage(false);
+                Config.config.showPopupDonationCount = 100;
+            }} />}
+
+        </div>
+    );
+};
+
+function SubmissionCounts(props: { isSettingUsername: boolean; submissionCount: string }): JSX.Element {
+    return <>
+        <div id="sponsorTimesContributionsContainer" className={props.isSettingUsername ? " hidden" : ""}>
+            <p className="u-mZ grey-text">
+                {chrome.i18n.getMessage("Submissions")}:
+            </p>
+            <p id="sponsorTimesContributionsDisplay" className="u-mZ">{props.submissionCount}</p>
+        </div>
+    </>
+}
+
+function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minutesSaved: number }): JSX.Element {
+    return (
+        <>
+            {
+                viewCount > 0 &&
+                <p id="sponsorTimesViewsContainer" className="u-mZ sbStatsSentence">
+                    {chrome.i18n.getMessage("savedPeopleFrom")}
+                    <b>
+                        <span id="sponsorTimesViewsDisplay">{viewCount.toLocaleString()}</span>{" "}
+                    </b>
+                    <span id="sponsorTimesViewsDisplayEndWord">{viewCount !== 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>
+                    <br />
+                    <span className="sbExtraInfo">
+                        {"("}{" "}
+                        <b>
+                            <span id="sponsorTimesOthersTimeSavedDisplay">{getFormattedHours(minutesSaved)}</span>{" "}
+                            <span id="sponsorTimesOthersTimeSavedEndWord">{minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                        </b>
+                        <span>{chrome.i18n.getMessage("youHaveSavedTimeEnd")}</span>{" "}
+                        {" )"}
+                    </span>
+                </p>
+            }
+            <p id="sponsorTimesSkipsDoneContainer" className="u-mZ sbStatsSentence">
+                {chrome.i18n.getMessage("youHaveSkipped")}
+                <b>
+                    <span id="sponsorTimesSkipsDoneDisplay">{Config.config.skipCount}</span>{" "}
+                </b>
+                <span id="sponsorTimesSkipsDoneEndWord">{Config.config.skipCount > 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>{" "}
+                <span className="sbExtraInfo">
+                    {"("}{" "}
+                    <b>
+                        <span id="sponsorTimeSavedDisplay">{Config.config.minutesSaved}</span>{" "}
+                        <span id="sponsorTimeSavedEndWord">{Config.config.minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                    </b>
+                    {")"}
+                </span>
+            </p>
+        </>
+    );
+}
+
+function DonateMessage(props: { onClose: () => void }): JSX.Element {
+    return (
+        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
+            <img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
+            <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
+                Config.config.donateClicked = Config.config.donateClicked + 1;
+            }}>
+                {chrome.i18n.getMessage("considerDonating")}
+            </a>
+            <img id="sbCloseDonate" src="/icons/close.png" alt={chrome.i18n.getMessage("closeIcon")} height="8" style={{ paddingLeft: "5px", cursor: "pointer" }} onClick={props.onClose} />
+        </div>
+    );
+}
+
+/**
+ * Converts time in minutes to 2d 5h 25.1
+ * If less than 1 hour, just returns minutes
+ *
+ * @param {float} minutes
+ * @returns {string}
+ */
+function getFormattedHours(minutes) {
+    minutes = Math.round(minutes * 10) / 10;
+    const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
+    const days = Math.floor(minutes / 1440) % 365;
+    const hours = Math.floor(minutes / 60) % 24;
+    return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
+}

src/popup/popup.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { PopupComponent } from "./PopupComponent";
+import { waitFor } from "../../maze-utils/src";
+import Config from "../config";
+
+
+document.addEventListener("DOMContentLoaded", async () => {
+    await waitFor(() => Config.isReady());
+
+    const root = createRoot(document.body);
+    root.render(<PopupComponent/>);
+})

src/popup/popupUtils.ts

@@ -0,0 +1,12 @@
+import { Message, MessageResponse } from "../messageTypes";
+
+export function copyToClipboardPopup(text: string, sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window === window.top) {
+        window.navigator.clipboard.writeText(text);
+    } else {
+        sendMessage({
+            message: "copyToClipboard",
+            text
+        });
+    }
+}

src/render/AdvancedSkipOptions.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { createRoot } from 'react-dom/client';
+
+import { AdvancedSkipOptionsComponent } from "../components/options/AdvancedSkipOptionsComponent";
+
+class AdvancedSkipOptions {
+    constructor(element: Element) {
+        const root = createRoot(element);
+        root.render(
+            <AdvancedSkipOptionsComponent />
+        );
+    }
+}
+
+export default AdvancedSkipOptions;

src/render/CategoryPill.tsx

@@ -43,7 +43,7 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        let referenceNode = 
+        let referenceNode =
             await waitFor(() => getYouTubeTitleNode());
 
         // Experimental YouTube layout with description on right
@@ -119,6 +119,8 @@ export class CategoryPill {
     }
 
     async setSegment(segment: SponsorTime): Promise<void> {
+        await waitFor(() => this.ref.current);
+
         if (this.ref.current?.state?.segment !== segment) {
             const newState = {
                 segment,

src/render/ChapterVote.tsx

@@ -20,6 +20,10 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
+        if (document.location.host === "tv.youtube.com") {
+            this.container.style.lineHeight = "initial";
+        }
+
         this.root = createRoot(this.container);
         this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
     }

src/render/GenericNotice.tsx

@@ -8,6 +8,7 @@ const utils = new Utils();
 import { ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
 import { ButtonListener } from "../../maze-utils/src/components/component-types";
+import { getVideo } from "../../maze-utils/src/video";
 
 export interface TextBox {
     icon: string;
@@ -75,7 +76,7 @@ export default class GenericNotice {
                     {options.textBoxes?.length > 0 ?
                         <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
                             className="sponsorTimeMessagesRow"
-                            style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
+                            style={{maxHeight: getVideo() ? (getVideo().offsetHeight - 200) + "px" : null}}>
                             <td style={{width: "100%"}}>
                                 {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
                             </td>

src/render/SkipNotice.tsx

@@ -5,7 +5,7 @@ import Utils from "../utils";
 const utils = new Utils();
 
 import SkipNoticeComponent from "../components/SkipNoticeComponent";
-import { SponsorTime, ContentContainer, NoticeVisbilityMode } from "../types";
+import { SponsorTime, ContentContainer, NoticeVisibilityMode } from "../types";
 import Config from "../config";
 import { SkipNoticeAction } from "../utils/noticeUtils";
 
@@ -20,7 +20,7 @@ class SkipNotice {
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
     root: Root;
 
-    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
+    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean, voteNotice = false) {
         this.skipNoticeRef = React.createRef();
 
         this.segments = segments;
@@ -42,18 +42,20 @@ class SkipNotice {
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
-
         this.root = createRoot(this.noticeElement);
         this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
+                voteNotice={voteNotice}
                 contentContainer={contentContainer}
                 ref={this.skipNoticeRef}
                 closeListener={() => this.close()}
-                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />
+                smaller={!voteNotice && (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAll 
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAutoSkip && autoSkip))}
+                fadeIn={!upcomingNoticeShown && !voteNotice}
+                unskipTime={unskipTime}
+                componentDidMount={componentDidMount} />
         );
     }
 
@@ -79,6 +81,26 @@ class SkipNotice {
     unmutedListener(time: number): void {
         this.skipNoticeRef?.current?.unmutedListener(time);
     }
+
+    async waitForSkipNoticeRef(): Promise<SkipNoticeComponent> {
+        const waitForRef = () => new Promise<SkipNoticeComponent>((resolve) => {
+            const observer = new MutationObserver(() => {
+            if (this.skipNoticeRef.current) {
+                observer.disconnect();
+                resolve(this.skipNoticeRef.current);
+            }
+            });
+
+            observer.observe(document.getElementsByClassName("sponsorSkipNoticeContainer")[0], { childList: true, subtree: true});
+
+            if (this.skipNoticeRef.current) {
+            observer.disconnect();
+            resolve(this.skipNoticeRef.current);
+            }
+        });
+
+        return this.skipNoticeRef?.current || await waitForRef();
+    }
 }
 
 export default SkipNotice;

src/render/UpcomingNotice.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { createRoot, Root } from "react-dom/client";
+import { ContentContainer, SponsorTime } from "../types";
+
+import Utils from "../utils";
+import SkipNoticeComponent from "../components/SkipNoticeComponent";
+const utils = new Utils();
+
+class UpcomingNotice {
+    segments: SponsorTime[];
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    noticeElement: HTMLDivElement;
+
+    upcomingNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+    root: Root;
+
+    closed = false;
+
+    constructor(segments: SponsorTime[], contentContainer: ContentContainer, timeLeft: number, autoSkip: boolean) {
+        this.upcomingNoticeRef = React.createRef();
+
+        this.segments = segments;
+        this.contentContainer = contentContainer;
+
+        const referenceNode = utils.findReferenceNode();
+
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
+
+        referenceNode.prepend(this.noticeElement);
+
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
+            <SkipNoticeComponent segments={segments} 
+                autoSkip={autoSkip} 
+                upcomingNotice={true}
+                contentContainer={contentContainer}
+                ref={this.upcomingNoticeRef}
+                closeListener={() => this.close()}
+                smaller={true}
+                fadeIn={true}
+                maxCountdownTime={timeLeft} />
+        );
+    }
+
+    close(): void {
+        this.root.unmount();
+        this.noticeElement.remove();
+
+        this.closed = true;
+    }
+
+    sameNotice(segments: SponsorTime[]): boolean {
+        if (segments.length !== this.segments.length) return false;
+
+        for (let i = 0; i < segments.length; i++) {
+            if (segments[i].UUID !== this.segments[i].UUID) return false;
+        }
+
+        return true;
+    }
+}
+
+export default UpcomingNotice;

src/svg-icons/checkIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface CheckIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const CheckIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: CheckIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/>
+  </svg>
+);
+
+export default CheckIcon;

src/svg-icons/clipboardIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface ClipboardIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const ClipboardIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: ClipboardIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z" />
+  </svg>
+);
+
+export default ClipboardIcon;

src/svg-icons/pencilIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface PencilIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const PencilIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: PencilIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/>
+  </svg>
+);
+
+export default PencilIcon;

src/types.ts

@@ -6,11 +6,10 @@ export interface ContentContainer {
     (): {
         vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void;
         dontShowNoticeAgain: () => void;
-        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void;
+        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean, voteNotice?: boolean) => void;
         sponsorTimes: SponsorTime[];
         sponsorTimesSubmitting: SponsorTime[];
         skipNotices: SkipNotice[];
-        v: HTMLVideoElement;
         sponsorVideoID;
         reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void;
         updatePreviewBar: () => void;
@@ -57,7 +56,13 @@ export enum ActionType {
     Poi = "poi"
 }
 
-export const ActionTypes = [ActionType.Skip, ActionType.Mute];
+export const ActionTypes = [
+    ActionType.Skip,
+    ActionType.Mute,
+    ActionType.Chapter,
+    ActionType.Full,
+    ActionType.Poi
+];
 
 export type SegmentUUID = string  & { __segmentUUIDBrand: unknown };
 export type Category = string & { __categoryBrand: unknown };
@@ -65,7 +70,8 @@ export type Category = string & { __categoryBrand: unknown };
 export enum SponsorSourceType {
     Server = undefined,
     Local = 1,
-    YouTube = 2
+    YouTube = 2,
+    Autogenerated = 3
 }
 
 export interface SegmentContainer {
@@ -214,7 +220,7 @@ export interface ToggleSkippable {
     setShowKeybindHint: (show: boolean) => void;
 }
 
-export enum NoticeVisbilityMode {
+export enum NoticeVisibilityMode {
     FullSize = 0,
     MiniForAutoSkip = 1,
     MiniForAll = 2,

src/utils.ts

@@ -1,10 +1,11 @@
 import Config, { VideoDownvotes } from "./config";
-import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } from "./types";
+import { SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType } from "./types";
 
 import { getHash, HashedValue } from "../maze-utils/src/hash";
-import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
+import { waitFor } from "../maze-utils/src";
 import { findValidElementFromSelector } from "../maze-utils/src/dom";
 import { isSafari } from "../maze-utils/src/config";
+import { asyncRequestToServer } from "./utils/requests";
 
 export default class Utils {
     
@@ -46,10 +47,7 @@ export default class Utils {
      */
     setupExtraSitePermissions(callback: (granted: boolean) => void): void {
         const permissions = [];
-        if (!isFirefoxOrSafari()) {
-            permissions.push("declarativeContent");
-        }
-        if (!isFirefoxOrSafari() || isSafari()) {
+        if (isSafari()) {
             permissions.push("webNavigation");
         }
 
@@ -67,6 +65,17 @@ export default class Utils {
         });
     }
 
+    getExtraSiteRegistration(): Registration {
+        return {
+            message: "registerContentScript",
+            id: "invidious",
+            allFrames: true,
+            js: this.js,
+            css: this.css,
+            matches: this.getPermissionRegex()
+        };
+    }
+
     /**
      * Registers the content scripts for the extra sites.
      * Will use a different method depending on the browser.
@@ -75,14 +84,7 @@ export default class Utils {
      * For now, it is just SB.config.invidiousInstances.
      */
     setupExtraSiteContentScripts(): void {
-        const registration: Registration = {
-            message: "registerContentScript",
-            id: "invidious",
-            allFrames: true,
-            js: this.js,
-            css: this.css,
-            matches: this.getPermissionRegex()
-        };
+        const registration = this.getExtraSiteRegistration();
 
         if (this.backgroundScriptContainer) {
             this.backgroundScriptContainer.registerFirefoxContentScript(registration);
@@ -106,11 +108,6 @@ export default class Utils {
             });
         }
 
-        if (!isFirefoxOrSafari() && chrome.declarativeContent) {
-            // Only if we have permission
-            chrome.declarativeContent.onPageChanged.removeRules(["invidious"]);
-        }
-
         chrome.permissions.remove({
             origins: this.getPermissionRegex()
         });
@@ -135,8 +132,10 @@ export default class Utils {
 
     containsInvidiousPermission(): Promise<boolean> {
         return new Promise((resolve) => {
-            let permissions = ["declarativeContent"];
-            if (isFirefoxOrSafari()) permissions = [];
+            const permissions = [];
+            if (isSafari()) {
+                permissions.push("webNavigation");
+            }
 
             chrome.permissions.contains({
                 origins: this.getPermissionRegex(),
@@ -200,7 +199,7 @@ export default class Utils {
 
     getSponsorIndexFromUUID(sponsorTimes: SponsorTime[], UUID: string): number {
         for (let i = 0; i < sponsorTimes.length; i++) {
-            if (sponsorTimes[i].UUID === UUID) {
+            if (sponsorTimes[i].UUID && (sponsorTimes[i].UUID.startsWith(UUID) || UUID.startsWith(sponsorTimes[i].UUID))) {
                 return i;
             }
         }
@@ -212,15 +211,6 @@ export default class Utils {
         return sponsorTimes[this.getSponsorIndexFromUUID(sponsorTimes, UUID)];
     }
 
-    getCategorySelection(category: string): CategorySelection {
-        for (const selection of Config.config.categorySelections) {
-            if (selection.name === category) {
-                return selection;
-            }
-        }
-        return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
-    }
-
     /**
      * @returns {String[]} Domains in regex form
      */
@@ -250,6 +240,7 @@ export default class Utils {
             ".main-video-section > .video-container", // Cloudtube
             ".shaka-video-container", // Piped
             "#player-container.ytk-player", // YT Kids
+            "#id-tv-container" // YTTV
         ];
 
         let referenceNode = findValidElementFromSelector(selectors)
@@ -284,6 +275,17 @@ export default class Utils {
         if ((chrome.extension.inIncognitoContext && !Config.config.trackDownvotesInPrivate)
                 || !Config.config.trackDownvotes) return;
 
+        if (segmentUUID.length < 60) {
+            const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                UUID: segmentUUID,
+                videoID
+            });
+
+            if (segmentIDData.ok && segmentIDData.responseText) {
+                segmentUUID = segmentIDData.responseText;
+            }
+        }
+
         const hashedVideoID = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
         const UUIDHash = await getHash(segmentUUID, 1);
 

src/utils/categoryUtils.ts

@@ -6,6 +6,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     if (autoSkip) {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skipped";
                 break;
@@ -21,6 +22,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     } else {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skip_category";
                 break;
@@ -36,6 +38,23 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     }
 }
 
+export function getUpcomingText(segments: SponsorTime[]): string {
+    const categoryName = chrome.i18n.getMessage(segments.length > 1 ? "multipleSegments" 
+        : "category_" + segments[0].category + "_short") || chrome.i18n.getMessage("category_" + segments[0].category);
+        
+    const messageId = "upcoming";
+    return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
+}
+
+export function getVoteText(segments: SponsorTime[]): string {
+    const categoryName = chrome.i18n.getMessage(segments.length > 1 ? "multipleSegments" 
+        : "category_" + segments[0].category + "_short") || chrome.i18n.getMessage("category_" + segments[0].category);
+        
+    const messageId = "voted_on";
+    return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
+}
+
+
 export function getCategorySuffix(category: Category): string {
     if (category.startsWith("poi_")) {
         return "_POI";
@@ -51,5 +70,4 @@ export function getCategorySuffix(category: Category): string {
 export function shortCategoryName(categoryName: string): string {
     return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName);
 }
-
 export const DEFAULT_CATEGORY = "chooseACategory";

src/utils/compatibility.ts

@@ -12,4 +12,8 @@ export function runCompatibilityChecks() {
             Config.config.showZoomToFillError2 = false;
         }, 10000);
     }
+}
+
+export function isVorapisInstalled() {
+    return document.querySelector(`.v3`);
 }

src/utils/exporter.ts

@@ -16,7 +16,7 @@ export function exportTimes(segments: SponsorTime[]): string {
     let result = "";
     for (const segment of segments) {
         if (![ActionType.Full, ActionType.Mute].includes(segment.actionType)
-                && segment.source !== SponsorSourceType.YouTube) {
+                && ![SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source)) {
             result += exportTime(segment) + "\n";
         }
     }
@@ -34,9 +34,12 @@ function exportTime(segment: SponsorTime): string {
 
 export function importTimes(data: string, videoDuration: number): SponsorTime[] {
     const lines = data.split("\n");
+    const timeRegex = /(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g;
+    const anyLineHasTime = lines.some((line) => timeRegex.test(line));
+
     const result: SponsorTime[] = [];
     for (const line of lines) {
-        const match = line.match(/(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g);
+        const match = line.match(timeRegex);
         if (match) {
             const startTime = getFormattedTimeToSeconds(match[0]);
             if (startTime !== null) {
@@ -71,6 +74,18 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
 
                 result.push(segment);
             }
+        } else if (!anyLineHasTime) {
+            // Adding chapters with placeholder times
+            const segment: SponsorTime = {
+                segment: [0, 0],
+                category: "chapter" as Category,
+                actionType: ActionType.Chapter,
+                description: line,
+                source: SponsorSourceType.Local,
+                UUID: generateUserID() as SegmentUUID
+            };
+
+            result.push(segment);
         }
     }
 

src/utils/logger.ts

@@ -1,12 +1,22 @@
-window["SBLogs"] = {
-    debug: [],
-    warn: []
-};
+if (typeof (window) !== "undefined") {
+    window["SBLogs"] = {
+        debug: [],
+        warn: []
+    };
+}
 
 export function logDebug(message: string) {
-    window["SBLogs"].debug.push(`[${new Date().toISOString()}] ${message}`);
+    if (typeof (window) !== "undefined") {
+        window["SBLogs"].debug.push(`[${new Date().toISOString()}] ${message}`);
+    } else {
+        console.log(`[${new Date().toISOString()}] ${message}`)
+    }
 }
 
 export function logWarn(message: string) {
-    window["SBLogs"].warn.push(`[${new Date().toISOString()}] ${message}`);
+    if (typeof (window) !== "undefined") {
+        window["SBLogs"].warn.push(`[${new Date().toISOString()}] ${message}`);
+    } else {
+        console.warn(`[${new Date().toISOString()}] ${message}`)
+    }
 }

src/utils/pageUtils.ts

@@ -1,8 +1,11 @@
 import { ActionType, Category, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
+import Config from "../config";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
+        // New YouTube (2025 April)
+        ".ytp-right-controls-right",
         // YouTube
         ".ytp-right-controls",
         // Mobile YouTube
@@ -10,7 +13,11 @@ export function getControls(): HTMLElement {
         // Invidious/videojs video element's controls element
         ".vjs-control-bar",
         // Piped shaka player
-        ".shaka-bottom-controls"
+        ".shaka-bottom-controls",
+        // Vorapis v3
+        ".html5-player-chrome",
+        // tv.youtube.com
+        ".ypcs-control-buttons-right"
     ];
 
     for (const controlsSelector of controlsSelectors) {
@@ -53,11 +60,18 @@ export function getHashParams(): Record<string, unknown> {
     return {};
 }
 
+export function hasAutogeneratedChapters(): boolean {
+    return !!document.querySelector("ytd-engagement-panel-section-list-renderer ytd-macro-markers-list-renderer #menu");
+}
+
 export function getExistingChapters(currentVideoID: VideoID, duration: number): SponsorTime[] {
     const chaptersBox = document.querySelector("ytd-macro-markers-list-renderer");
-    const title = document.querySelector("[target-id=engagement-panel-macro-markers-auto-chapters] #title-text");
+    const title = chaptersBox?.closest("ytd-engagement-panel-section-list-renderer")?.querySelector("#title-text.ytd-engagement-panel-title-header-renderer");
     if (title?.textContent?.includes("Key moment")) return [];
 
+    const autogenerated = hasAutogeneratedChapters();
+    if (!Config.config.showAutogeneratedChapters && autogenerated) return [];
+
     const chapters: SponsorTime[] = [];
     // .ytp-timed-markers-container indicates that key-moments are present, which should not be divided
     if (chaptersBox) {
@@ -80,7 +94,7 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
                     category: "chapter" as Category,
                     actionType: ActionType.Chapter,
                     description: description.innerText,
-                    source: SponsorSourceType.YouTube,
+                    source: autogenerated ? SponsorSourceType.Autogenerated : SponsorSourceType.YouTube,
                     UUID: null
                 };
             }

src/utils/requests.ts

@@ -9,8 +9,8 @@ import { FetchResponse, sendRequestToCustomServer } from "../../maze-utils/src/b
  * @param address The address to add to the SponsorBlock server address
  * @param callback 
  */    
-export function asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
-    return sendRequestToCustomServer(type, url, data);
+export function asyncRequestToCustomServer(type: string, url: string, data = {}, headers = {}): Promise<FetchResponse> {
+    return sendRequestToCustomServer(type, url, data, headers);
 }
 
 /**
@@ -20,10 +20,10 @@ export function asyncRequestToCustomServer(type: string, url: string, data = {})
  * @param address The address to add to the SponsorBlock server address
  * @param callback 
  */    
-export async function asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
+export async function asyncRequestToServer(type: string, address: string, data = {}, headers = {}): Promise<FetchResponse> {
     const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
 
-    return await (asyncRequestToCustomServer(type, serverAddress + address, data));
+    return await (asyncRequestToCustomServer(type, serverAddress + address, data, headers));
 }
 
 /**

src/utils/segmentData.ts

@@ -0,0 +1,105 @@
+import { DataCache } from "../../maze-utils/src/cache";
+import { getHash, HashedValue } from "../../maze-utils/src/hash";
+import Config, {  } from "../config";
+import * as CompileConfig from "../../config.json";
+import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
+import { getHashParams } from "./pageUtils";
+import { asyncRequestToServer } from "./requests";
+import { extensionUserAgent } from "../../maze-utils/src";
+
+const segmentDataCache = new DataCache<VideoID, SegmentResponse>(() => {
+    return {
+        segments: null,
+        status: 200
+    };
+}, 5);
+
+const pendingList: Record<VideoID, Promise<SegmentResponse>> = {};
+
+export interface SegmentResponse {
+    segments: SponsorTime[] | null;
+    status: number;
+}
+
+export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean): Promise<SegmentResponse> {
+    if (!ignoreCache) {
+        const cachedData = segmentDataCache.getFromCache(videoID);
+        if (cachedData) {
+            segmentDataCache.cacheUsed(videoID);
+            return cachedData;
+        }
+    }
+
+    if (pendingList[videoID]) {
+        return await pendingList[videoID];
+    }
+
+    const pendingData = fetchSegmentsForVideo(videoID);
+    pendingList[videoID] = pendingData;
+
+    const result = await pendingData;
+    delete pendingList[videoID];
+
+    return result;
+}
+
+async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse> {
+    const extraRequestData: Record<string, unknown> = {};
+    const hashParams = getHashParams();
+    if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
+
+    const hashPrefix = (await getHash(videoID, 1)).slice(0, 5) as VideoID & HashedValue;
+    const hasDownvotedSegments = !!Config.local.downvotedSegments[hashPrefix.slice(0, 4)];
+    const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
+        categories: CompileConfig.categoryList,
+        actionTypes: ActionTypes,
+        trimUUIDs: hasDownvotedSegments ? null : 5,
+        ...extraRequestData
+    }, {
+        "X-CLIENT-NAME": extensionUserAgent(),
+    });
+
+    if (response.ok) {
+        const enabledActionTypes = getEnabledActionTypes();
+
+        const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
+                    ?.filter((video) => video.videoID === videoID)
+                    ?.map((video) => video.segments)?.[0]
+                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType))
+                    ?.map((segment) => ({
+                        ...segment,
+                        source: SponsorSourceType.Server
+                    }))
+                    ?.sort((a, b) => a.segment[0] - b.segment[0]);
+
+        if (receivedSegments && receivedSegments.length) {
+            const result = {
+                segments: receivedSegments,
+                status: response.status
+            };
+
+            segmentDataCache.setupCache(videoID).segments = result.segments;
+            return result;
+        } else {
+            // Setup with null data
+            segmentDataCache.setupCache(videoID);
+        }
+    }
+
+    return {
+        segments: null,
+        status: response.status
+    };
+}
+
+function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
+    const actionTypes = [ActionType.Skip, ActionType.Poi, ActionType.Chapter];
+    if (Config.config.muteSegments) {
+        actionTypes.push(ActionType.Mute);
+    }
+    if (Config.config.fullVideoSegments || forceFullVideo) {
+        actionTypes.push(ActionType.Full);
+    }
+
+    return actionTypes;
+}

src/utils/skipRule.ts

@@ -0,0 +1,164 @@
+import { getChannelIDInfo, getVideoDuration } from "../../maze-utils/src/video";
+import Config from "../config";
+import { CategorySelection, CategorySkipOption, SponsorSourceType, SponsorTime } from "../types";
+import { VideoLabelsCacheData } from "./videoLabels";
+
+export interface Permission {
+    canSubmit: boolean;
+}
+
+export enum SkipRuleAttribute {
+    StartTime = "time.start",
+    EndTime = "time.end",
+    Duration = "time.duration",
+    StartTimePercent = "time.startPercent",
+    EndTimePercent = "time.endPercent",
+    DurationPercent = "time.durationPercent",
+    Category = "category",
+    ActionType = "actionType",
+    Description = "chapter.name",
+    Source = "chapter.source",
+    ChannelID = "channel.id",
+    ChannelName = "channel.name"
+}
+
+export enum SkipRuleOperator {
+    Less = "<",
+    LessOrEqual = "<=",
+    Greater = ">",
+    GreaterOrEqual = ">=",
+    Equal = "==",
+    NotEqual = "!=",
+    Contains = "*=",
+    NotContains = "!*=",
+    Regex = "~=",
+    RegexIgnoreCase = "~i=",
+    NotRegex = "!~=",
+    NotRegexIgnoreCase = "!~i="
+}
+
+export interface AdvancedSkipRule {
+    attribute: SkipRuleAttribute;
+    operator: SkipRuleOperator;
+    value: string | number;
+}
+
+export interface AdvancedSkipRuleSet {
+    rules: AdvancedSkipRule[];
+    skipOption: CategorySkipOption;
+    comment: string;
+}
+
+export function getCategorySelection(segment: SponsorTime | VideoLabelsCacheData): CategorySelection {
+    for (const ruleSet of Config.local.skipRules) {
+        if (ruleSet.rules.every((rule) => isSkipRulePassing(segment, rule))) {
+            return { name: segment.category, option: ruleSet.skipOption } as CategorySelection;
+        }
+    }
+
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === segment.category) {
+            return selection;
+        }
+    }
+    return { name: segment.category, option: CategorySkipOption.Disabled} as CategorySelection;
+}
+
+function getSkipRuleValue(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipRule): string | number | undefined {
+    switch (rule.attribute) {
+        case SkipRuleAttribute.StartTime:
+            return (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.EndTime:
+            return (segment as SponsorTime).segment?.[1];
+        case SkipRuleAttribute.Duration:
+            return (segment as SponsorTime).segment?.[1] - (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.StartTimePercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            if (startTime === undefined) return undefined;
+
+            return startTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.EndTimePercent: {
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (endTime === undefined) return undefined;
+
+            return endTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.DurationPercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (startTime === undefined || endTime === undefined) return undefined;
+
+            return (endTime - startTime) / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.Category:
+            return segment.category;
+        case SkipRuleAttribute.ActionType:
+            return (segment as SponsorTime).actionType;
+        case SkipRuleAttribute.Description:
+            return (segment as SponsorTime).description || "";
+        case SkipRuleAttribute.Source:
+            switch ((segment as SponsorTime).source) {
+                case SponsorSourceType.Local:
+                    return "local";
+                case SponsorSourceType.YouTube:
+                    return "youtube";
+                case SponsorSourceType.Autogenerated:
+                    return "autogenerated";
+                case SponsorSourceType.Server:
+                    return "server";
+                default:
+                    return undefined;
+            }
+        case SkipRuleAttribute.ChannelID:
+            getChannelIDInfo()
+            return getChannelIDInfo().id;
+        case SkipRuleAttribute.ChannelName:
+            getChannelIDInfo()
+            return getChannelIDInfo().author;
+        default:
+            return undefined;
+    }
+}
+
+function isSkipRulePassing(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipRule): boolean {
+    const value = getSkipRuleValue(segment, rule);
+    
+    switch (rule.operator) {
+        case SkipRuleOperator.Less:
+            return typeof value === "number" && value < (rule.value as number);
+        case SkipRuleOperator.LessOrEqual:
+            return typeof value === "number" && value <= (rule.value as number);
+        case SkipRuleOperator.Greater:
+            return typeof value === "number" && value > (rule.value as number);
+        case SkipRuleOperator.GreaterOrEqual:
+            return typeof value === "number" && value >= (rule.value as number);
+        case SkipRuleOperator.Equal:
+            return value === rule.value;
+        case SkipRuleOperator.NotEqual:
+            return value !== rule.value;
+        case SkipRuleOperator.Contains:
+            return String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.NotContains:
+            return !String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.Regex:
+            return new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.RegexIgnoreCase:
+            return new RegExp(rule.value as string, "i").test(String(value));
+        case SkipRuleOperator.NotRegex:
+            return !new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.NotRegexIgnoreCase:
+            return !new RegExp(rule.value as string, "i").test(String(value));
+        default:
+            return false;
+    }
+}
+
+export function getCategoryDefaultSelection(category: string): CategorySelection {
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === category) {
+            return selection;
+        }
+    }
+    return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
+}

src/utils/thumbnails.ts

@@ -1,10 +1,15 @@
 import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
 import Config from "../config";
-import { getVideoLabel } from "./videoLabels";
-import { setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
+import { getHasStartSegment, getVideoLabel } from "./videoLabels";
+import { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
+import { VideoID } from "../types";
+import { getSegmentsForVideo } from "./segmentData";
 
-export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
-    await Promise.all(thumbnails.map((t) => labelThumbnail(t)));
+export async function handleThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
+    await Promise.all(thumbnails.map((t) => {
+        labelThumbnail(t);
+        setupThumbnailHover(t);
+    }));
 }
 
 export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLElement | null> {
@@ -13,9 +18,7 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
         return null;
     }
     
-    const link = (isOnInvidious() ? thumbnail.parentElement : thumbnail.querySelector("#thumbnail")) as HTMLAnchorElement
-    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
-    const videoID = parseYouTubeVideoIDFromURL(link.href)?.videoID;
+    const videoID = extractVideoID(thumbnail);
     if (!videoID) {
         hideThumbnailLabel(thumbnail);
         return null;
@@ -37,6 +40,64 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
     return overlay;
 }
 
+export async function setupThumbnailHover(thumbnail: HTMLImageElement): Promise<void> {
+    // Cache would be reset every load due to no SPA
+    if (isOnInvidious()) return;
+
+    const mainElement = thumbnail.closest("#dismissible") as HTMLElement;
+    if (mainElement) {
+        mainElement.removeEventListener("mouseenter", thumbnailHoverListener);
+        mainElement.addEventListener("mouseenter", thumbnailHoverListener);
+    }
+}
+
+function thumbnailHoverListener(e: MouseEvent) {
+    if (!chrome.runtime?.id) return;
+
+    const thumbnail = (e.target as HTMLElement).querySelector(getThumbnailSelector()) as HTMLImageElement;
+    if (!thumbnail) return;
+
+    // Pre-fetch data for this video
+    let fetched = false;
+    const preFetch = async () => {
+        fetched = true;
+        const videoID = extractVideoID(thumbnail);
+        if (videoID && await getHasStartSegment(videoID)) {
+            void getSegmentsForVideo(videoID, false);
+        }
+    };
+    const timeout = setTimeout(preFetch, 100);
+    const onMouseDown = () => {
+        clearTimeout(timeout);
+        if (!fetched) {
+            preFetch();
+        }
+    };
+
+    e.target.addEventListener("mousedown", onMouseDown, { once: true });
+    e.target.addEventListener("mouseleave", () => {
+        clearTimeout(timeout);
+        e.target.removeEventListener("mousedown", onMouseDown);
+    }, { once: true });
+}
+
+function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {
+    if (isOnInvidious()) {
+        return thumbnail.parentElement as HTMLAnchorElement | null;
+    } else if (thumbnail.nodeName.toLowerCase() === "yt-thumbnail-view-model") {
+        return thumbnail.closest("yt-lockup-view-model")?.querySelector("a.yt-lockup-metadata-view-model-wiz__title");
+    } else {
+        return thumbnail.querySelector("#thumbnail");
+    }
+}
+
+function extractVideoID(thumbnail: HTMLImageElement): VideoID | null {
+    const link = getLink(thumbnail);
+    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
+
+    return parseYouTubeVideoIDFromURL(link.href)?.videoID;
+}
+
 function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {
     return thumbnail.querySelector(".sponsorThumbnailLabel") as HTMLElement | null;
 }   
@@ -109,7 +170,7 @@ function insertSBIconDefinition() {
 }
 
 export function setupThumbnailListener(): void {
-    setThumbnailListener(labelThumbnails, () => {
+    setThumbnailListener(handleThumbnails, () => {
         insertSBIconDefinition();
     }, () => Config.isReady());
 }

src/utils/videoLabels.ts

@@ -1,14 +1,17 @@
 import { Category, CategorySkipOption, VideoID } from "../types";
 import { getHash } from "../../maze-utils/src/hash";
-import Utils from "../utils";
 import { logWarn } from "./logger";
 import { asyncRequestToServer } from "./requests";
+import { getCategorySelection } from "./skipRule";
 
-const utils = new Utils();
+export interface VideoLabelsCacheData {
+    category: Category;
+    hasStartSegment: boolean;
+}
 
 export interface LabelCacheEntry {
     timestamp: number;
-    videos: Record<VideoID, Category>;
+    videos: Record<VideoID, VideoLabelsCacheData>;
 }
 
 const labelCache: Record<string, LabelCacheEntry> = {};
@@ -21,7 +24,7 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
         return cachedEntry;
     }
 
-    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
+    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}?hasStartSegment=true`);
     if (response.status !== 200) {
         // No video labels or server down
         labelCache[hashPrefix] = {
@@ -36,7 +39,10 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
 
         const newEntry: LabelCacheEntry = {
             timestamp: Date.now(),
-            videos: Object.fromEntries(data.map(video => [video.videoID, video.segments[0].category])),
+            videos: Object.fromEntries(data.map(video => [video.videoID, {
+                category: video.segments[0]?.category,
+                hasStartSegment: video.hasStartSegment
+            }])),
         };
         labelCache[hashPrefix] = newEntry;
 
@@ -55,17 +61,28 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
 }
 
 export async function getVideoLabel(videoID: VideoID): Promise<Category | null> {
-    const prefix = (await getHash(videoID, 1)).slice(0, 3);
+    const prefix = (await getHash(videoID, 1)).slice(0, 4);
     const result = await getLabelHashBlock(prefix);
 
     if (result) {
-        const category = result.videos[videoID];
-        if (category && utils.getCategorySelection(category).option !== CategorySkipOption.Disabled) {
+        const category = result.videos[videoID]?.category;
+        if (category && getCategorySelection(result.videos[videoID]).option !== CategorySkipOption.Disabled) {
             return category;
         } else {
             return null;
         }
     }
 
+    return null;
+}
+
+export async function getHasStartSegment(videoID: VideoID): Promise<boolean | null> {
+    const prefix = (await getHash(videoID, 1)).slice(0, 4);
+    const result = await getLabelHashBlock(prefix);
+
+    if (result) {
+        return result?.videos[videoID]?.hasStartSegment ?? false;
+    }
+
     return null;
 }

test/previewBar.test.ts

@@ -1,9 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import PreviewBar, { PreviewBarSegment } from "../src/js-components/previewBar";
 
 describe("createChapterRenderGroups", () => {
     let previewBar: PreviewBar;
     beforeEach(() => {
-        previewBar = new PreviewBar(null, null, null, null, null, true);
+        previewBar = new PreviewBar(null, null, null, null, null, null, true);
     })
 
     it("Two unrelated times", () => {

test/selenium.test.ts

@@ -58,7 +58,7 @@ async function setup(): Promise<WebDriver> {
     options.addArguments("--headless=new");
     options.addArguments("--window-size=1920,1080");
 
-    const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();
+    const driver = await new Builder().forBrowser("chromium").setChromeOptions(options).build();
     driver.manage().setTimeouts({
         implicit: 5000
     });
@@ -127,6 +127,8 @@ async function editSegments(driver: WebDriver, index: number, expectedStartTimeB
     await endTimeBox.clear();
     await endTimeBox.sendKeys(endTime);
 
+    await driver.sleep(1000);
+
     editButton = await driver.findElement(By.id("sponsorTimeEditButtonSubmissionNotice" + index));
     await editButton.click();
 

tsconfig.json

@@ -12,7 +12,7 @@
         "resolveJsonModule": true,
         "jsx": "react",
         "lib": [
-            "es2019",
+            "es2020",
             "dom",
             "dom.iterable"
         ]

webpack/webpack.common.js

@@ -93,7 +93,7 @@ module.exports = env => {
 
     return {
         entry: {
-            popup: path.join(__dirname, srcDir + 'popup.ts'),
+            popup: path.join(__dirname, srcDir + 'popup/popup.tsx'),
             background: path.join(__dirname, srcDir + 'background.ts'),
             content: path.join(__dirname, srcDir + 'content.ts'),
             options: path.join(__dirname, srcDir + 'options.ts'),
@@ -170,6 +170,13 @@ module.exports = env => {
                                         parsed.Description.message = parsed.Description.message.slice(0, 77) + "...";
                                     }
                                 }
+
+                                if (env.browser.toLowerCase() === "edge") {
+                                    parsed.Description.message = parsed.Description.message.match(/^.+(?=\. )/)?.[0] || parsed.Description.message;
+                                    if (parsed.Description.message.length > 132) {
+                                        parsed.Description.message = parsed.Description.message.slice(0, 129) + "...";
+                                    }
+                                }
                 
                                 return Buffer.from(JSON.stringify(parsed));
                             }
@@ -185,6 +192,12 @@ module.exports = env => {
                 stream: env.stream
             }),
             new configDiffPlugin()
-        ]
+        ],
+        performance: {
+            hints: false,
+            maxEntrypointSize: 512000,
+            maxAssetSize: 512000
+        }
+
     };
 };

webpack/webpack.manifest.js

@@ -11,6 +11,7 @@ const chromeManifestExtra = require("../manifest/chrome-manifest-extra.json");
 const safariManifestExtra = require("../manifest/safari-manifest-extra.json");
 const betaManifestExtra = require("../manifest/beta-manifest-extra.json");
 const firefoxBetaManifestExtra = require("../manifest/firefox-beta-manifest-extra.json");
+const manifestV2ManifestExtra = require("../manifest/manifest-v2-extra.json");
 
 // schema for options object
 const schema = {
@@ -41,13 +42,16 @@ class BuildManifest {
 
         // Add missing manifest elements
         if (this.options.browser.toLowerCase() === "firefox") {
+            mergeObjects(manifest, manifestV2ManifestExtra);
             mergeObjects(manifest, firefoxManifestExtra);
         } else if (this.options.browser.toLowerCase() === "chrome" 
                 || this.options.browser.toLowerCase() === "chromium"
                 || this.options.browser.toLowerCase() === "edge") {
             mergeObjects(manifest, chromeManifestExtra);
         }  else if (this.options.browser.toLowerCase() === "safari") {
+            mergeObjects(manifest, manifestV2ManifestExtra);
             mergeObjects(manifest, safariManifestExtra);
+            manifest.optional_permissions = manifest.optional_permissions.filter((a) => a !== "*://*/*");
         }
 
         if (this.options.stream === "beta") {