bump version

Fix #2074 and Fix #2078

README.md

@@ -75,4 +75,4 @@ Icons made by:
 
 ### License
 
-This project is licensed under GNU LGPL v3 or any later version
+This project is licensed under GNU GPL v3 or any later version

ci/generateList.ts

@@ -7,8 +7,7 @@ This file should not be shipped with the extension
 /*
 Criteria for inclusion:
 Invidious
-- 30d uptime >= 90%
+- uptime >= 80%
-- available for at least 80/90 days
 - 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
+const mapped = (data as InvidiousInstance[])
-  .filter((i: InvidiousInstance) => i[1]?.type === "https")
+  .filter((i) =>
-  .map((instance: InvidiousInstance) => {
+    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,
+      uptime: monitor.uptime || 0,
-      thirtyDayUptime: instance[1]?.monitor["30dRatio"].ratio,
+      down: monitor.down ?? false,
+      created_at: monitor.created_at,
     }
   });
 
 // reliability and sanity checks
 const reliableCheck = mapped
   .filter(instance => {
-    // 30d uptime >= 90%
+    const uptime = instance.uptime > 80 && !instance.down;
-    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90;
+    const nameIncluded = instance.url.includes(instance.name);
-    // available for at least 80/90 days
+    const ninetyDays = 90 * 24 * 60 * 60 * 1000;
-    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black");
+    const ninetyDaysAgo = new Date(Date.now() - ninetyDays);
-    return thirtyDayUptime && dailyRatioCheck.length >= 80;
+    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[] {
+export const getInvidiousList = (): string[] =>
-  return reliableCheck.map(instance => instance.name).sort()
+  reliableCheck.map(instance => instance.name).sort()
-}

ci/invidiousType.ts

@@ -1,26 +1,56 @@
-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 | {
+    stats: null | ivStats;
+    cors: null | boolean;
+    api: null | boolean;
+    type: "https" | "http" | "onion" | "i2p";
+    uri: string;
+    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: string;
+    name: "invidious" | string;
     version: string;
-        branch: string;
+    branch: "master" | string;
   };
   openRegistrations: boolean;
   usage: {
@@ -34,21 +64,9 @@ export type InvidiousInstance = [
     updatedAt: number;
     lastChannelRefreshedAt: number;
   };
+  playback: {
+    totalRequests: number;
+    successfulRequests: number;
+    ratio: number;
   };
-    cors: boolean | null;
+}
-    api: boolean | null;
-    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;
-    };
-  }
-]

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"]

manifest/chrome-manifest-extra.json

@@ -1,12 +1,156 @@
 {
-  "optional_permissions": [
+  "host_permissions": [
-    "declarativeContent",
+    "https://*.youtube.com/*",
-    "webNavigation"
+    "https://sponsor.ajay.app/*"
   ],
-  "background": {
+  "optional_host_permissions": [
-    "persistent": false
+    "*://*/*"
+  ],
+  "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.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"
+    ],
+    "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"
     },
-  "permissions": [
+    {
-    "https://*.youtube.com/*"
+      "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
+        }
     ]
+  },
+  "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.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": [
+        "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.5",
+    "version": "5.9.2",
     "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,9 +2,6 @@
   "background": {
     "persistent": false
   },
-  "permissions": [
-    "scripting"
-  ],
   "optional_permissions": [
     "webNavigation"
   ]

package.json

@@ -38,14 +38,14 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "4.9",
-    "web-ext": "^7.6.2",
+    "web-ext": "^8.2.0",
-    "webpack": "^5.75.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

@@ -26,6 +26,11 @@
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+/* May 2024 hover preview */
+.YtPlayerProgressBarProgressBar #previewbar {
+	transform: none;
+}
+
 .ytp-big-mode #previewbar {
 	transform: scaleY(0.625) translateY(-30%) translateY(1.5px);
 }
@@ -780,6 +785,18 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
+/* Description on right layout */
+#title > #categoryPillParent {
+	font-size: 2rem;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	line-height: 2.8rem;
+}
+#title > #categoryPillParent > #categoryPill.cbPillOpen {
+	margin-bottom: 5px;
+}
+
 #categoryPillParent {
 	height: fit-content;
     margin-top: auto;

public/options/options.html

@@ -219,9 +219,10 @@
 							__MSG_showSkipNotice__
 						</label>
 					</div>
-				</div>
 
-				<div data-type="selector" data-sync="noticeVisibilityMode">
+					<div data-type="selector" data-sync="noticeVisibilityMode" data-dependent-on="dontShowNotice">
+						<br/>
+						
 						<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__:</label>
 	
 						<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
@@ -232,6 +233,7 @@
 							<option value="4">__MSG_noticeVisibilityMode4__</option>
 						</select>
 					</div>
+				</div>
 	
 				<div data-type="toggle" data-sync="showCategoryGuidelines">
 					<div class="switch-container">
@@ -635,6 +637,18 @@
 					<div class="small-description">__MSG_whatTrackDownvotes__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="trackDownvotesInPrivate" data-confirm-on="false">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="trackDownvotesInPrivate" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="trackDownvotesInPrivate">
+							__MSG_enableTrackDownvotesInPrivate__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
 					<div class="option-button trigger-button">
 						__MSG_copyDebugInformation__

public/popup.html

@@ -196,6 +196,8 @@
         <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>
+        <br />
+        <a id="debugLogs">__MSG_copyDebugLogs__</a>
       </footer>
 
       <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>

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";
@@ -123,7 +119,7 @@ chrome.runtime.onInstalled.addListener(function () {
         // If there is no userID, then it is the first install.
         if (!userID && !Config.local.alreadyInstalled){
             //open up the install page
-            chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+            chrome.tabs.create({url: chrome.runtime.getURL("/help/index.html")});
 
             //generate a userID
             const newUserID = generateUserID();
@@ -137,14 +133,21 @@ chrome.runtime.onInstalled.addListener(function () {
 
         if (Config.config.supportInvidious) {
             if (!(await utils.containsInvidiousPermission())) {
-                chrome.tabs.create({url: chrome.extension.getURL("/permissions/index.html")});
+                chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
             }
         }
     }, 1500);
 
-    // Only do this once the old version understands how to clean itself up
+    if (!isFirefoxOrSafari()) {
-    if (!isFirefoxOrSafari() && chrome.runtime.getManifest().version !== "5.4.13") {
         injectUpdatedScripts().catch(logWarn);
+
+        waitFor(() => Config.isReady()).then(() => {
+            if (Config.config.supportInvidious) {
+                injectUpdatedScripts([
+                    utils.getExtraSiteRegistration()
+                ])
+            }
+        }).catch(logWarn);
     }
 });
 
@@ -160,8 +163,8 @@ async function registerFirefoxContentScript(options: Registration) {
             ids: [options.id]
         }).catch(() => []);
 
-        if (existingRegistrations.length > 0 
+        if (existingRegistrations && existingRegistrations.length > 0 
-            && existingRegistrations[0].matches.every((match) => options.matches.includes(match))) {
+            && options.matches.every((match) => existingRegistrations[0].matches.includes(match))) {
             // No need to register another script, already registered
             return;
         }
@@ -222,7 +225,7 @@ async function submitVote(type: number, UUID: string, category: string) {
 
     const typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
 
-    //publish this vote
+    try {
         const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
     
         if (response.ok) {
@@ -245,6 +248,14 @@ async function submitVote(type: number, UUID: string, category: string) {
                 responseText: await response.text()
             };
         }
+    } catch (e) {
+        console.error(e);
+        return {
+            successType: -1,
+            statusCode: -1,
+            responseText: ""
+        };
+    }
 }
 
 

src/components/CategoryPillComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 
@@ -23,12 +23,14 @@ export interface CategoryPillState {
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
-
+    mainRef: React.MutableRefObject<HTMLSpanElement>;
     tooltip?: Tooltip;
 
     constructor(props: CategoryPillProps) {
         super(props);
 
+        this.mainRef = React.createRef();
+
         this.state = {
             segment: null,
             show: false,
@@ -43,17 +45,21 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             color: this.getTextColor(),
         }
 
+        // To be able to remove the margin from the parent
+        this.mainRef?.current?.parentElement?.classList?.toggle("cbPillOpen", this.state.show);
+
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
-                onMouseLeave={() => this.closeTooltip()}>
+                onMouseLeave={() => this.closeTooltip()}
+                ref={this.mainRef}>
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {
@@ -86,7 +92,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.extension.getURL("icons/close.png")}
+                <img src={chrome.runtime.getURL("icons/close.png")}
                     className="categoryPillClose"
                     onClick={() => {
                         this.setState({ show: false });

src/components/ChapterVoteComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 

src/components/NoticeComponent.tsx

@@ -207,7 +207,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                     
 
                                         {/* Close button */}
-                                        <img src={chrome.extension.getURL("icons/close.png")}
+                                        <img src={chrome.runtime.getURL("icons/close.png")}
                                             className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
                                                             + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
                                             onClick={() => this.close()}>

src/components/SkipNoticeComponent.tsx

@@ -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
@@ -685,7 +686,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()) * (1 / getVideo().playbackRate));
 
             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;
@@ -34,7 +35,7 @@ export interface SponsorTimeEditState {
     chapterNameSelectorHovering: boolean;
 }
 
-const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
+const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => !["chapter", "intro"].includes(name))
     .map((name) => chrome.i18n.getMessage("category_" + name).split(/\/|\s|-/)));
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
@@ -81,13 +82,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     componentDidMount(): void {
         // Prevent inputs from triggering key events
-        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', function (event) {
+        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', (e) => {
-            event.stopPropagation();
+            e.stopPropagation();
         });
 
         // Prevent scrolling while changing times
-        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', function (event) {
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', (e) => {
-            event.preventDefault();
+            if (this.state.editing) {
+                e.preventDefault();
+            }
         }, {passive: false});
 
         // Add as a config listener
@@ -221,7 +224,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.extension.getURL("icons/help.svg")}
+                            src={chrome.runtime.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>
@@ -270,10 +273,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </div>
                 ): ""}
 
-                <br/>
-
                 {/* Editing Tools */}
 
+                <div style={{ marginTop: "3px" }}>
                     <span id={"sponsorTimeDeleteButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={this.deleteTime.bind(this)}>
@@ -313,6 +315,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         </span>
                     ): ""}
                 </div>
+
+            </div>
         );
     }
 
@@ -398,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")) {
@@ -550,7 +554,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     setTimeToEnd(): void {
-        this.setTimeTo(1, this.props.contentContainer().v.duration);
+        this.setTimeTo(1, getVideoDuration());
     }
 
     /**
@@ -637,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();
         }
 
@@ -680,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,12 +9,13 @@ 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
     contentContainer: ContentContainer;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     closeListener: () => void;
 }
@@ -66,9 +67,16 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             this.forceUpdate();
         });
 
-        this.videoObserver.observe(this.contentContainer().v, {
+        this.videoObserver.observe(getVideo(), {
             attributes: true
         });
+
+        // Prevent zooming while changing times
+        document.getElementById("sponsorSkipNoticeMiddleRow" + this.state.idSuffix).addEventListener('wheel', function (event) {
+            if (event.ctrlKey) {
+                event.preventDefault();
+            }
+        }, {passive: false});
     }
 
     componentWillUnmount(): void {
@@ -100,7 +108,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.sortSegments()}
                 title={chrome.i18n.getMessage("sortSegments")}
                 key="sortButton"
-                src={chrome.extension.getURL("icons/sort.svg")}>
+                src={chrome.runtime.getURL("icons/sort.svg")}>
             </img>;
         const exportButton = 
             <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
@@ -108,7 +116,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.exportSegments()}
                 title={chrome.i18n.getMessage("exportSegments")}
                 key="exportButton"
-                src={chrome.extension.getURL("icons/export.svg")}>
+                src={chrome.runtime.getURL("icons/export.svg")}>
             </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
@@ -124,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()}
@@ -208,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();
@@ -232,10 +245,12 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             }
         }
 
-        this.props.callback();
+        this.props.callback().then((success) => {
-
+            if (success) {
                 this.cancel();
             }
+        });
+    }
 
     sortSegments(): void {
         let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
@@ -274,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/CategorySkipOptionsComponent.tsx

@@ -158,7 +158,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             });
         }
 
-        Config.forceLocalUpdate("categorySelections");
+        Config.forceSyncUpdate("categorySelections");
     }
 
     getCategorySkipOptions(): JSX.Element[] {

src/config.ts

@@ -29,6 +29,7 @@ interface SBConfig {
     trackViewCount: boolean;
     trackViewCountInPrivate: boolean;
     trackDownvotes: boolean;
+    trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
     noticeVisibilityMode: NoticeVisbilityMode;
     hideVideoPlayerControls: boolean;
@@ -139,7 +140,7 @@ interface SBStorage {
     downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
     navigationApiAvailable: boolean;
     
-    // Used when sync storage disbaled
+    // Used when sync storage disabled
     alreadyInstalled: boolean;
 
     /* Contains unsubmitted segments that the user has created. */
@@ -290,6 +291,7 @@ const syncDefaults = {
     trackViewCount: true,
     trackViewCountInPrivate: true,
     trackDownvotes: true,
+    trackDownvotesInPrivate: false,
     dontShowNotice: false,
     noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
@@ -476,3 +478,25 @@ const localDefaults = {
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
 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

@@ -11,9 +11,9 @@ import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceT
 import { partition } from "../utils/arrayUtils";
 import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
-import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
 import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
+import { isVisible } from "../utils/pageUtils";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -125,34 +125,11 @@ class PreviewBar {
             mouseOnSeekBar = false;
         });
 
-        const observer = new MutationObserver((mutations) => {
+        seekBar.addEventListener("mousemove", (e: MouseEvent) => {
-            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer) return;
+            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            // Only care about mutations to time tooltip
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
-            if (!mutations.some((mutation) => (mutation.target as HTMLElement).classList.contains("ytp-tooltip-text"))) {
+            const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
-                return;
-            }
-
-            const tooltipTextElements = tooltipTextWrapper.querySelectorAll(".ytp-tooltip-text");
-            let timeInSeconds: number | null = null;
-            let noYoutubeChapters = false;
-
-            for (const tooltipTextElement of tooltipTextElements) {
-                if (tooltipTextElement.classList.contains('ytp-tooltip-text-no-title')) noYoutubeChapters = true;
-
-                const tooltipText = tooltipTextElement.textContent;
-                if (tooltipText === null || tooltipText.length === 0) continue;
-
-                timeInSeconds = getFormattedTimeToSeconds(tooltipText);
-
-                if (timeInSeconds !== null) break;
-            }
-
-            if (timeInSeconds === null) {
-                originalTooltip.style.removeProperty("display");
-
-                return;
-            }
 
             // Find the segment at that location, using the shortest if multiple found
             const [normalSegments, chapterSegments] =
@@ -198,15 +175,6 @@ class PreviewBar {
                 this.chapterTooltip.style.textAlign = titleTooltip.style.textAlign;
             }
         });
-
-        observer.observe(tooltipTextWrapper, {
-            childList: true,
-            subtree: true,
-        });
-
-        addCleanupListener(() => {
-            observer.disconnect();
-        });
     }
 
     private setTooltipTitle(segment: PreviewBarSegment, tooltip: HTMLElement): void {
@@ -229,7 +197,6 @@ 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");
         }
@@ -258,10 +225,12 @@ class PreviewBar {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
 
+
         this.updatePageElements();
         // Sometimes video duration is inaccurate, pull from accessibility info
         const ariaDuration = parseInt(this.progressBar?.getAttribute('aria-valuemax')) ?? 0;
-        if (ariaDuration && Math.abs(ariaDuration - this.videoDuration) > 3) {
+        const multipleActiveVideos = [...document.querySelectorAll("video")].filter((v) => isVisible(v)).length > 1;
+        if (!multipleActiveVideos && ariaDuration && Math.abs(ariaDuration - this.videoDuration) > 3) {
             this.videoDuration = ariaDuration;
         }
 
@@ -269,7 +238,7 @@ class PreviewBar {
     }
 
     private updatePageElements(): void {
-        const allProgressBars = document.querySelectorAll('.ytp-progress-bar') as NodeListOf<HTMLElement>;
+        const allProgressBars = document.querySelectorAll(".ytp-progress-bar") as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
         if (this.progressBar) {
@@ -307,6 +276,7 @@ class PreviewBar {
             return (b[1] - b[0]) - (a[1] - a[0]);
         });
         for (const segment of sortedSegments) {
+            if (segment.actionType === ActionType.Chapter) continue;
             const bar = this.createBar(segment);
 
             this.container.appendChild(bar);
@@ -346,7 +316,7 @@ class PreviewBar {
         bar.style.left = this.timeToPercentage(startTime);
 
         if (duration > 0) {
-            bar.style.right = this.timeToPercentage(this.videoDuration - endTime);
+            bar.style.right = this.timeToRightPercentage(endTime);
         }
         if (this.chapterFilter(barSegment) && segment[1] < this.videoDuration) {
             bar.style.marginRight = `${this.chapterMargin}px`;
@@ -780,6 +750,7 @@ class PreviewBar {
 
     updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] {
         if (!Config.config.showSegmentNameInChapterBar
+                || Config.config.disableSkipping
                 || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
             const chaptersContainer = this.getChaptersContainer();
             if (chaptersContainer) {
@@ -919,7 +890,22 @@ class PreviewBar {
         return `${this.timeToDecimal(time) * 100}%`
     }
 
+    timeToRightPercentage(time: number): string {
+        return `${(1 - this.timeToDecimal(time)) * 100}%`
+    }
+
     timeToDecimal(time: number): number {
+        return this.decimalTimeConverter(time, true);
+    }
+
+    decimalToTime(decimal: number): number {
+        return this.decimalTimeConverter(decimal, false);
+    }
+
+    /**
+     * Decimal to time or time to decimal
+     */
+    decimalTimeConverter(value: number, isTime: boolean): number {
         if (this.originalChapterBarBlocks?.length > 1 && this.existingChapters.length === this.originalChapterBarBlocks?.length) {
             // Parent element to still work when display: none
             const totalPixels = this.originalChapterBar.parentElement.clientWidth;
@@ -929,8 +915,9 @@ class PreviewBar {
                 const chapterElement = this.originalChapterBarBlocks[i];
                 const widthPixels = parseFloat(chapterElement.style.width.replace("px", ""));
 
-                if (time >= this.existingChapters[i].segment[1]) {
                 const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
+                if ((isTime && value >= this.existingChapters[i].segment[1])
+                        || (!isTime && value >= (pixelOffset + widthPixels + marginPixels) / totalPixels)) {
                     pixelOffset += widthPixels + marginPixels;
                     lastCheckedChapter = i;
                 } else {
@@ -944,13 +931,22 @@ class PreviewBar {
                 const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", ""));
                 const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0];
 
-                const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration;
+                if (isTime) {
+                    const percentageInCurrentChapter = (value - latestChapter.segment[0]) / latestChapterDuration;
                     const sizeOfCurrentChapter = latestWidth / totalPixels;
                     return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
+                } else {
+                    const percentageInCurrentChapter = (value * totalPixels - pixelOffset) / latestWidth;
+                    return Math.max(0, latestChapter.segment[0] + (percentageInCurrentChapter * latestChapterDuration));
+                }
             }
         }
 
-        return Math.min(1, time / this.videoDuration);
+        if (isTime) {
+            return Math.min(1, value / this.videoDuration);
+        } else {
+            return Math.max(0, value * this.videoDuration);
+        }
     }
 
     /*

src/js-components/skipButtonControlBar.ts

@@ -1,7 +1,7 @@
 import Config from "../config";
 import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
 import { isMobileControlsOpen } from "../utils/mobileUtils";
 

src/messageTypes.ts

@@ -17,7 +17,8 @@ interface DefaultMessage {
         | "isChannelWhitelisted"
         | "submitTimes"
         | "refreshSegments"
-        | "closePopup";
+        | "closePopup"
+        | "getLogs";
 }
 
 interface BoolValueMessage {
@@ -103,7 +104,9 @@ export type MessageResponse =
     | IsChannelWhitelistedResponse
     | Record<string, never> // empty object response {}
     | VoteResponse
-    | ImportSegmentsResponse;
+    | ImportSegmentsResponse
+    | RefreshSegmentsResponse
+    | LogResponse;
 
 export interface VoteResponse {
     successType: number;
@@ -115,6 +118,15 @@ interface ImportSegmentsResponse {
     importedSegments: SponsorTime[];
 }
 
+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 Config, { generateDebugDetails } from "./config";
-import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
 
 // Make the config public for debugging purposes
@@ -286,7 +285,7 @@ async function init() {
                             break;
                         case "resetToDefault":
                             Config.resetToDefault();
-                            window.location.reload();
+                            setTimeout(() => window.location.reload(), 200);
                             break;
                     }
                 });
@@ -632,8 +631,7 @@ async function setTextOption(option: string, element: HTMLElement, value: string
                         await invidiousOnClick(checkbox, "supportInvidious");
                     }
 
-                    window.location.reload();
+                    setTimeout(() => window.location.reload(), 200);
-
                 } catch (e) {
                     alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
                 }
@@ -699,26 +697,8 @@ 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))
+    navigator.clipboard.writeText(generateDebugDetails())
     .then(() => {
         alert(chrome.i18n.getMessage("copyDebugInformationComplete"));
     })

src/popup.ts

@@ -1,4 +1,4 @@
-import Config from "./config";
+import Config, { generateDebugDetails } from "./config";
 
 import Utils from "./utils";
 import {
@@ -12,14 +12,16 @@ import {
     GetChannelIDResponse,
     IsChannelWhitelistedResponse,
     IsInfoFoundMessageResponse,
+    LogResponse,
     Message,
     MessageResponse,
     PopupMessage,
+    RefreshSegmentsResponse,
     SponsorStartResponse,
     VoteResponse,
 } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
-import { AnimationUtils } from "./utils/animationUtils";
+import { AnimationUtils } from "../maze-utils/src/animationUtils";
 import { shortCategoryName } from "./utils/categoryUtils";
 import { localizeHtmlPage } from "../maze-utils/src/setup";
 import { exportTimes } from "./utils/exporter";
@@ -183,7 +185,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "exportSegmentsButton",
         "importSegmentsMenu",
         "importSegmentsText",
-        "importSegmentsSubmit"
+        "importSegmentsSubmit",
+        "debugLogs"
 
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
@@ -254,6 +257,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     PageElements.helpButton.addEventListener("click", openHelp);
     PageElements.refreshSegmentsButton.addEventListener("click", refreshSegments);
     PageElements.sbPopupIconCopyUserID.addEventListener("click", async () => copyToClipboard(await getHash(Config.config.userID)));
+    PageElements.debugLogs.addEventListener("click", copyDebgLogs);
 
     // Forward click events
     if (window !== window.top) {
@@ -302,7 +306,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         PageElements.showNoticeAgain.style.display = "unset";
     }
 
-    const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions"];
+    const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions", "segmentCount"];
 
     asyncRequestToServer("GET", "/api/userInfo", {
         publicUserID: await getHash(Config.config.userID),
@@ -335,16 +339,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 PageElements.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
             }
 
+            //get the amount of times this user has contributed and display it to thank them
+            PageElements.sponsorTimesContributionsDisplay.innerText = Math.max(Config.config.sponsorTimesContributed ?? 0, userInfo.segmentCount).toLocaleString();
+            PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
+
+            PageElements.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
+
             Config.config.isVip = userInfo.vip;
             Config.config.permissions = userInfo.permissions;
         }
     });
 
-    //get the amount of times this user has contributed and display it to thank them
+    
-    if (Config.config.sponsorTimesContributed != undefined) {
-        PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed.toLocaleString();
-        PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
-    }
 
     //get the amount of times this user has skipped a sponsor
     if (Config.config.skipCount != undefined) {
@@ -459,14 +465,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             stopLoadingAnimation = null;
         }
 
-        if (chrome.runtime.lastError) {
+        if (chrome.runtime.lastError || request == undefined || request.found == undefined) {
             //This page doesn't have the injected content script, or at least not yet
+            // Or if the request is empty, meaning the current page is not YouTube or a video page
             displayNoVideo();
             return;
         }
 
-        //if request is undefined, then the page currently being browsed is not YouTube
-        if (request != undefined) {
         //remove loading text
         PageElements.mainControls.style.display = "block";
         if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
@@ -490,7 +495,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
             PageElements.issueReporterImportExport.classList.remove("hidden");
         }
-        }
 
         //see if whitelist button should be swapped
         const response = await sendTabMessageAsync({ message: 'isChannelWhitelisted' }) as IsChannelWhitelistedResponse;
@@ -562,7 +566,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     return true;
                 }
             })
-            .sort((a, b) => a.segment[1] - b.segment[1])
+            .sort((a, b) => b.segment[1] - a.segment[1])
             .sort((a, b) => a.segment[0] - b.segment[0]);
 
         //add them as buttons to the issue reporting container
@@ -980,9 +984,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         stopLoadingAnimation = AnimationUtils.applyLoadingAnimation(PageElements.refreshSegmentsButton, 0.3);
     }
 
-    function refreshSegments() {
+    async function refreshSegments() {
         startLoadingAnimation();
-        sendTabMessage({ message: 'refreshSegments' });
+        const response = await sendTabMessageAsync({ message: 'refreshSegments' }) as RefreshSegmentsResponse;
+
+        if (response == null || !response.hasVideo) {
+            if (stopLoadingAnimation != null) {
+                stopLoadingAnimation();
+                stopLoadingAnimation = null;
+            }
+            displayNoVideo();
+        }
     }
 
     function skipSegment(actionType: ActionType, UUID: SegmentUUID, element?: HTMLElement): void {
@@ -1134,6 +1146,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
     }
 
+    function copyDebgLogs() {
+        sendTabMessage({ message: "getLogs" }, (logs: LogResponse) => {
+            copyToClipboard(`${generateDebugDetails()}\n\nWarn:\n${logs.warn.join("\n")}\n\nDebug:\n${logs.debug.join("\n")}`);
+        });
+    }
+
     function onMessage(msg: PopupMessage) {
         switch (msg.message) {
             case "time":

src/render/CategoryPill.tsx

@@ -43,9 +43,15 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        const referenceNode = 
+        let referenceNode = 
             await waitFor(() => getYouTubeTitleNode());
 
+        // Experimental YouTube layout with description on right
+        const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
+        if (isOnDescriptionOnRightLayout) {
+            referenceNode = referenceNode.parentElement;
+        }
+
         if (referenceNode && !referenceNode.contains(this.container)) {
             if (!this.container) {
                 this.container = document.createElement('span');
@@ -91,9 +97,11 @@ export class CategoryPill {
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);
+            if (!isOnDescriptionOnRightLayout) {
                 referenceNode.style.display = "flex";
             }
         }
+    }
 
     close(): void {
         this.root.unmount();

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/RectangleTooltip.tsx

@@ -59,7 +59,7 @@ export class RectangleTooltip {
                     className="sponsorBlockRectangleTooltip" >
                     <div>
                         <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                         <span className="sponsorSkipObject">
                             {this.text + (props.link ? ". " : "")}

src/render/SubmissionNotice.tsx

@@ -11,7 +11,7 @@ class SubmissionNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => unknown;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
@@ -19,7 +19,7 @@ class SubmissionNotice {
 
     root: Root;
 
-    constructor(contentContainer: ContentContainer, callback: () => unknown) {
+    constructor(contentContainer: ContentContainer, callback: () => Promise<boolean>) {
         this.noticeRef = React.createRef();
 
         this.contentContainer = contentContainer;

src/types.ts

@@ -10,7 +10,6 @@ export interface ContentContainer {
         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 };

src/utils.ts

@@ -2,7 +2,7 @@ import Config, { VideoDownvotes } from "./config";
 import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } 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";
 
@@ -46,10 +46,7 @@ export default class Utils {
      */
     setupExtraSitePermissions(callback: (granted: boolean) => void): void {
         const permissions = [];
-        if (!isFirefoxOrSafari()) {
+        if (isSafari()) {
-            permissions.push("declarativeContent");
-        }
-        if (!isFirefoxOrSafari() || isSafari()) {
             permissions.push("webNavigation");
         }
 
@@ -67,6 +64,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 +83,7 @@ export default class Utils {
      * For now, it is just SB.config.invidiousInstances.
      */
     setupExtraSiteContentScripts(): void {
-        const registration: Registration = {
+        const registration = this.getExtraSiteRegistration();
-            message: "registerContentScript",
-            id: "invidious",
-            allFrames: true,
-            js: this.js,
-            css: this.css,
-            matches: this.getPermissionRegex()
-        };
 
         if (this.backgroundScriptContainer) {
             this.backgroundScriptContainer.registerFirefoxContentScript(registration);
@@ -106,11 +107,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 +131,10 @@ export default class Utils {
 
     containsInvidiousPermission(): Promise<boolean> {
         return new Promise((resolve) => {
-            let permissions = ["declarativeContent"];
+            const permissions = [];
-            if (isFirefoxOrSafari()) permissions = [];
+            if (isSafari()) {
+                permissions.push("webNavigation");
+            }
 
             chrome.permissions.contains({
                 origins: this.getPermissionRegex(),
@@ -281,7 +279,8 @@ export default class Utils {
     }
 
     async addHiddenSegment(videoID: VideoID, segmentUUID: string, hidden: SponsorHideType) {
-        if (chrome.extension.inIncognitoContext || !Config.config.trackDownvotes) return;
+        if ((chrome.extension.inIncognitoContext && !Config.config.trackDownvotesInPrivate)
+                || !Config.config.trackDownvotes) return;
 
         const hashedVideoID = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
         const UUIDHash = await getHash(segmentUUID, 1);

src/utils/animationUtils.ts

@@ -1,78 +0,0 @@
- /**
- * Starts a spinning animation and returns a function to be called when it should be stopped
- * The callback will be called when the animation is finished 
- * It waits until a full rotation is complete
- */
-function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => Promise<void> {
-    element.style.animation = `rotate ${time}s 0s infinite`;
-
-    return async () => new Promise((resolve) => {
-        // Make the animation finite
-        element.style.animation = `rotate ${time}s`;
-
-        // When the animation is over, hide the button
-        const animationEndListener = () => {
-            if (callback) callback();
-
-            element.style.animation = "none";
-
-            element.removeEventListener("animationend", animationEndListener);
-
-            resolve();
-        };
-
-        element.addEventListener("animationend", animationEndListener);
-    });
-}
-
-function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } {
-    if (enabled) element.classList.add("autoHiding");
-    element.classList.add("sbhidden");
-    element.classList.add("animationDone");
-    if (!rightSlide) element.classList.add("autoHideLeft");
-
-    let mouseEntered = false;
-
-    return {
-        hide: () => {
-            mouseEntered = false;
-            if (element.classList.contains("autoHiding")) {
-                element.classList.add("sbhidden");
-            }
-        },
-        show: () => {
-            mouseEntered = true;
-            element.classList.remove("animationDone");
-
-            // Wait for next event loop
-            setTimeout(() => {
-                if (mouseEntered) element.classList.remove("sbhidden")
-            }, 10);
-        }
-    };
-}
-
-function setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
-    const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
-
-    container.addEventListener("mouseleave", () => hide());
-    container.addEventListener("mouseenter", () => show());
-}
-
-function enableAutoHideAnimation(element: Element): void {
-    element.classList.add("autoHiding");
-    element.classList.add("sbhidden");
-}
-
-function disableAutoHideAnimation(element: Element): void {
-    element.classList.remove("autoHiding");
-    element.classList.remove("sbhidden");
-}
-
-export const AnimationUtils = {
-    applyLoadingAnimation,
-    setupAutoHideAnimation,
-    setupCustomHideAnimation,
-    enableAutoHideAnimation,
-    disableAutoHideAnimation
-};

src/utils/exporter.ts

@@ -53,14 +53,14 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
                 titleRight = removeIf(split2[split2.length - 1], specialCharMatchers)
 
                 const title = titleLeft?.length > titleRight?.length ? titleLeft : titleRight;
-                if (title) {
                 const determinedCategory = chapterNames.find(c => c.names.includes(title))?.code as Category;
 
+                const category = title ? (determinedCategory ?? ("chapter" as Category)) : "chooseACategory" as Category;
                 const segment: SponsorTime = {
                     segment: [startTime, getFormattedTimeToSeconds(match[1])],
-                        category: determinedCategory ?? ("chapter" as Category),
+                    category,
-                        actionType: determinedCategory ? ActionType.Skip : ActionType.Chapter,
+                    actionType: category === "chapter" ? ActionType.Chapter : ActionType.Skip,
-                        description: title,
+                    description: category === "chapter" ? title : null,
                     source: SponsorSourceType.Local,
                     UUID: generateUserID() as SegmentUUID
                 };
@@ -73,7 +73,6 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
             }
         }
     }
-    }
 
     if (result.length > 0 && result[result.length - 1].segment[1] === null) {
         result[result.length - 1].segment[1] = videoDuration;

src/utils/logger.ts

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

src/utils/pageUtils.ts

@@ -55,7 +55,7 @@ export function getHashParams(): Record<string, unknown> {
 
 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 chapters: SponsorTime[] = [];

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> {
+export function asyncRequestToCustomServer(type: string, url: string, data = {}, headers = {}): Promise<FetchResponse> {
-    return sendRequestToCustomServer(type, url, data);
+    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,104 @@
+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";
+
+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 categories: string[] = Config.config.categorySelections.map((category) => category.name);
+
+    const extraRequestData: Record<string, unknown> = {};
+    const hashParams = getHashParams();
+    if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
+    
+    const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
+    const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
+        categories: CompileConfig.categoryList,
+        actionTypes: ActionTypes,
+        ...extraRequestData
+    }, {
+        "X-CLIENT-NAME": `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
+    });
+
+    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) && categories.includes(segment.category))
+                    ?.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/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 { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
+import { VideoID } from "../types";
+import { getSegmentsForVideo } from "./segmentData";
 
-export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
+export async function handleThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
-    await Promise.all(thumbnails.map((t) => labelThumbnail(t)));
+    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
+    const videoID = extractVideoID(thumbnail);
-    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
-    const videoID = parseYouTubeVideoIDFromURL(link.href)?.videoID;
     if (!videoID) {
         hideThumbnailLabel(thumbnail);
         return null;
@@ -37,6 +40,37 @@ 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
+    const videoID = extractVideoID(thumbnail);
+    if (videoID) {
+        void getSegmentsForVideo(videoID, false);
+    }
+}
+
+function extractVideoID(thumbnail: HTMLImageElement): VideoID | null {
+    const link = (isOnInvidious() ? thumbnail.parentElement : thumbnail.querySelector("#thumbnail")) as HTMLAnchorElement
+    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 +143,7 @@ function insertSBIconDefinition() {
 }
 
 export function setupThumbnailListener(): void {
-    setThumbnailListener(labelThumbnails, () => {
+    setThumbnailListener(handleThumbnails, () => {
         insertSBIconDefinition();
     }, () => Config.isReady());
 }

webpack/webpack.common.js

@@ -160,7 +160,7 @@ module.exports = env => {
                             if (path.match(/(\/|\\)_locales(\/|\\).+/)) {
                                 const parsed = JSON.parse(content.toString());
                                 if (env.browser.toLowerCase() === "safari") {
-                                    parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
+                                    parsed.fullName.message = parsed.fullName.message.match(/^.+(?= [-–])/)?.[0] || parsed.fullName.message;
                                     if (parsed.fullName.message.length > 50) {
                                         parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
                                     }
@@ -171,6 +171,13 @@ module.exports = env => {
                                     }
                                 }
 
+                                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,12 +42,14 @@ 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);
         }