update translations

bump version
Fix exporter test
2025-12-07 20:17:05 +03:00 · 2025-06-19 17:11:21 -04:00 · 2025-06-19 17:10:57 -04:00 · 2025-06-19 17:07:34 -04:00 · 2025-06-19 16:57:17 -04:00 · 2025-06-19 14:58:01 -04:00
38 changed files with 1858 additions and 1537 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -16,7 +16,7 @@ jobs:
        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:
--- a/CONTRIBUTING.md
+++ b/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
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -1,7 +1,7 @@
 {
    "name": "__MSG_fullName__",
    "short_name": "SponsorBlock",
-    "version": "5.12.4",
+    "version": "5.13",
    "default_locale": "en",
    "description": "__MSG_Description__",
    "homepage_url": "https://sponsor.ajay.app",
--- a/2
+++ b/2
--- a/public/_locales
+++ b/public/_locales
--- a/public/content.css
+++ b/public/content.css
@@ -115,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;
 }
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -732,3 +732,16 @@ 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;
 }
--- a/public/options/options.html
+++ b/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">
--- a/public/popup.css
+++ b/public/popup.css
@@ -582,6 +582,10 @@
  margin: 0 !important;
 }
 #sponsorBlockPopupBody .u-mZ.cleanPopupMargin {
  margin-top: 10px !important;
 }
 #sponsorBlockPopupBody .hidden {
  display: none !important;
 }
@@ -619,3 +623,8 @@
 #issueReporterTabs > span.sbSelected > span::after {
  transform: scaleX(0.8);
 }
 .sbPopupButton {
  width: 16px;
  fill: var(--sb-main-fg-color);
 }
--- a/public/popup.html
+++ b/public/popup.html
@@ -1,209 +1,13 @@
 <!DOCTYPE html>
 <html id="sponsorBlockPopupHTML">
-  <head>
+    <head>
-    <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <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>
-  <body id="sponsorBlockPopupBody" style="visibility: hidden">
+        <link href="popup.css" rel="stylesheet">
-    <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
+        <link href="shared.css" rel="stylesheet">
        <script src="./js/popup.js"></script>
    </head>
-      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
+    <body id="sponsorBlockPopupBody">
        <img src="icons/close.png" width="15" height="15" alt="Close icon">
      </button>
-      <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
+    </body>
        __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="Import 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" role="button" tabIndex="0">
          <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" role="button" tabIndex="0">
          <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>
        <br />
        <a id="debugLogs">__MSG_copyDebugLogs__</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>
--- a/src/components/options/AdvancedSkipOptionsComponent.tsx
+++ b/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();
 }
--- a/src/config.ts
+++ b/src/config.ts
@@ -3,10 +3,7 @@ import * as invidiousList from "../ci/invidiouslist.json";
 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";
-
+import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
 export interface Permission {
    canSubmit: boolean;
 }
 interface SBConfig {
    userID: string;
@@ -149,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> {
@@ -168,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");
    }
@@ -474,7 +482,7 @@ const syncDefaults = {
            opacity: "0.7"
        },
        "chapter": {
-            color: "#fff",
+            color: "#ffd983",
            opacity: "0"
        },
    }
@@ -485,7 +493,8 @@ const localDefaults = {
    navigationApiAvailable: null,
    alreadyInstalled: false,
-    unsubmittedSegments: {}
+    unsubmittedSegments: {},
    skipRules: []
 };
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
--- a/src/content.ts
+++ b/src/content.ts
@@ -52,6 +52,7 @@ import { isMobileControlsOpen } from "./utils/mobileUtils";
 import { defaultPreviewTime } from "./utils/constants";
 import { onVideoPage } from "../maze-utils/src/pageInfo";
 import { getSegmentsForVideo } from "./utils/segmentData";
 import { getCategoryDefaultSelection, getCategorySelection } from "./utils/skipRule";
 cleanPage();
@@ -221,9 +222,12 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
            sendResponse({
                found: sponsorDataFound,
                status: lastResponseStatus,
-                sponsorTimes: sponsorTimes,
+                sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
                time: getCurrentTime() ?? 0,
-                onMobileYouTube: isOnMobileYouTube()
+                onMobileYouTube: isOnMobileYouTube(),
                videoID: getVideoID(),
                loopedChapter: loopedChapter?.UUID,
                channelWhitelisted
            });
            if (!request.updating && popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
@@ -232,12 +236,6 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
            }
            popupInitialised = true;
            break;
        case "getVideoID":
            sendResponse({
                videoID: getVideoID(),
            });
            break;
        case "getChannelID":
            sendResponse({
@@ -245,12 +243,6 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                isYTTV: (document.location.host === "tv.youtube.com")
            });
            break;
        case "isChannelWhitelisted":
            sendResponse({
                value: channelWhitelisted
            });
            break;
        case "whitelistChange":
            channelWhitelisted = request.value;
@@ -308,14 +300,8 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                break;
            }
            loopedChapter = {...utils.getSponsorTimeFromUUID(sponsorTimes, request.UUID)};
            loopedChapter.actionType = ActionType.Skip;
            loopedChapter.segment = [loopedChapter.segment[1], loopedChapter.segment[0]];
            break;
        case "getLoopedChapter":
            sendResponse({
                UUID: loopedChapter?.UUID,
            });
            break;
        case "importSegments": {
            const importedSegments = importTimes(request.data, getVideoDuration());
            let addedSegments = false;
@@ -326,7 +312,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                            && s.description === segment.description)) {
                    const hasChaptersPermission = (Config.config.showCategoryWithoutPermission
                        || Config.config.permissions["chapter"]);
-                    if (segment.category === "chapter" && (!utils.getCategorySelection("chapter") || !hasChaptersPermission)) {
+                    if (segment.category === "chapter" && (!getCategoryDefaultSelection("chapter") || !hasChaptersPermission)) {
                        segment.category = "chooseACategory" as Category;
                        segment.actionType = ActionType.Skip;
                        segment.description = "";
@@ -748,7 +734,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                    }
                }
-                if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip
+                if (getCategorySelection(currentSkip)?.option === CategorySkipOption.ManualSkip
                        || currentSkip.actionType === ActionType.Mute) {
                    forcedSkipTime = skipTime[0] + 0.001;
                } else {
@@ -1266,21 +1252,27 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
        }
    }
    notifyPopupOfSegments();
    importExistingChapters(true);
    if (Config.config.isVip) {
        lockedCategoriesLookup();
    }
 }
 function notifyPopupOfSegments(): void {
    // notify popup of segment changes
    chrome.runtime.sendMessage({
        message: "infoUpdated",
        found: sponsorDataFound,
        status: lastResponseStatus,
-        sponsorTimes: sponsorTimes,
+        sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
        time: getCurrentTime() ?? 0,
-        onMobileYouTube: isOnMobileYouTube()
+        onMobileYouTube: isOnMobileYouTube(),
        videoID: getVideoID(),
        loopedChapter: loopedChapter?.UUID,
        channelWhitelisted
    });
    if (Config.config.isVip) {
        lockedCategoriesLookup();
    }
 }
 function importExistingChapters(wait: boolean) {
@@ -1366,7 +1358,7 @@ function startSkipScheduleCheckingForStartSponsors() {
                && time.actionType === ActionType.Poi && time.hidden === SponsorHideType.Visible)
            .sort((a, b) => b.segment[0] - a.segment[0]);
        for (const time of poiSegments) {
-            const skipOption = utils.getCategorySelection(time.category)?.option;
+            const skipOption = getCategorySelection(time)?.option;
            if (skipOption !== CategorySkipOption.ShowOverlay) {
                skipToTime({
                    v: getVideo(),
@@ -1414,7 +1406,7 @@ function updatePreviewBar(): void {
    const previewBarSegments: PreviewBarSegment[] = [];
    if (sponsorTimes) {
        sponsorTimes.forEach((segment) => {
-            if (segment.hidden !== SponsorHideType.Visible) return;
+            if (segment.hidden !== SponsorHideType.Visible || getCategorySelection(segment).option === CategorySkipOption.Disabled) return;
            previewBarSegments.push({
                segment: segment.segment as [number, number],
@@ -1468,6 +1460,9 @@ async function channelIDChange(channelIDInfo: ChannelIDInfo) {
    // check if the start of segments were missed
    if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();
    updatePreviewBar();
    notifyPopupOfSegments();
 }
 function videoElementChange(newVideo: boolean, video: HTMLVideoElement): void {
@@ -1515,12 +1510,12 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
        {array: ScheduledTime[]; index: number; endIndex: number; extraIndexes: number[]; openNotice: boolean} {
    const autoSkipSorter = (segment: ScheduledTime) => {
-        const skipOption = utils.getCategorySelection(segment.category)?.option;
+        const skipOption = getCategorySelection(segment)?.option;
        if (segment.hidden !== SponsorHideType.Visible) {
            // Hidden segments sometimes end up here if another segment is at the same time, use them last
            return 3;
        } else if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
-                && segment.actionType === ActionType.Skip) {
+                && (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter)) {
            return 0;
        } else if (skipOption !== CategorySkipOption.ShowOverlay) {
            return 1;
@@ -1739,6 +1734,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
            && getCurrentTime() !== skipTime[1]) {
        switch(skippingSegments[0].actionType) {
            case ActionType.Poi:
            case ActionType.Chapter:
            case ActionType.Skip: {
                // Fix for looped videos not working when skipping to the end #426
                // for some reason you also can't skip to 1 second before the end
@@ -1861,7 +1857,7 @@ function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forc
        videoMuted = false;
    }
-    if (forceSeek || segment.actionType === ActionType.Skip || voteNotice) {
+    if (forceSeek || segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter || voteNotice) {
        //add a tiny bit of time to make sure it is not skipped again
        setCurrentTime(unskipTime ?? segment.segment[0] + 0.001);
    }
@@ -1932,7 +1928,7 @@ function shouldAutoSkip(segment: SponsorTime): boolean {
    }
    return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
-        && (utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
+        && (getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip ||
            (Config.config.autoSkipOnMusicVideos && canSkipNonMusic && sponsorTimes?.some((s) => s.category === "music_offtopic")
                && segment.actionType === ActionType.Skip)
            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment))
@@ -1941,15 +1937,14 @@ function shouldAutoSkip(segment: SponsorTime): boolean {
 function shouldSkip(segment: SponsorTime): boolean {
    return (segment.actionType !== ActionType.Full
-            && segment.source !== SponsorSourceType.YouTube
+            && getCategorySelection(segment)?.option > CategorySkipOption.ShowOverlay)
            && utils.getCategorySelection(segment.category)?.option !== CategorySkipOption.ShowOverlay)
            || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
                && segment.actionType === ActionType.Skip)
            || isLoopedChapter(segment);
 }
-function isLoopedChapter(segment: SponsorTime) :boolean{
+function isLoopedChapter(segment: SponsorTime): boolean{
-    return !!segment && !!loopedChapter && segment.actionType === ActionType.Skip && segment.segment[1] != undefined
+    return !!segment && !!loopedChapter && segment.segment[1] != undefined
        && segment.segment[0] === loopedChapter.segment[0] && segment.segment[1] === loopedChapter.segment[1];
 }
--- a/src/js-components/previewBar.ts
+++ b/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";
@@ -205,9 +203,12 @@ class PreviewBar {
                    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 {
@@ -227,11 +228,15 @@ class PreviewBar {
                }
                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;
                }
                // To prevent offset issue
@@ -299,14 +304,14 @@ class PreviewBar {
    set(segments: PreviewBarSegment[], videoDuration: number): void {
        this.segments = segments ?? [];
        this.videoDuration = videoDuration ?? 0;
-        this.hasYouTubeChapters = segments.some((segment) => segment.source === SponsorSourceType.YouTube);
+        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 
-                && s.source === SponsorSourceType.YouTube
+                && [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));
@@ -354,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", ""));
@@ -376,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";
@@ -438,10 +443,10 @@ class PreviewBar {
            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";
--- a/src/messageTypes.ts
+++ b/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,14 +12,11 @@ interface DefaultMessage {
    message:
        "update"
        | "sponsorStart"
        | "getVideoID"
        | "getChannelID"
        | "isChannelWhitelisted"
        | "submitTimes"
        | "refreshSegments"
        | "closePopup"
-        | "getLogs"
+        | "getLogs";
        | "getLoopedChapter";
 }
 interface BoolValueMessage {
@@ -84,6 +81,9 @@ export interface IsInfoFoundMessageResponse {
    sponsorTimes: SponsorTime[];
    time: number;
    onMobileYouTube: boolean;
    videoID: VideoID;
    loopedChapter: SegmentUUID | null;
    channelWhitelisted: boolean;
 }
 interface GetVideoIdResponse {
--- a/src/options.ts
+++ b/src/options.ts
@@ -18,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;
@@ -350,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;
--- a/src/popup.ts
+++ b/src/popup.ts
--- a/src/popup/PopupComponent.tsx
+++ b/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);
    }
 });
--- a/src/popup/SegmentListComponent.tsx
+++ b/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>
    )
 }
--- a/src/popup/SegmentSubmissionComponent.tsx
+++ b/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>
    );
 };
--- a/src/popup/YourWorkComponent.tsx
+++ b/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);
 }
--- a/src/popup/popup.tsx
+++ b/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/>);
 })
--- a/src/popup/popupUtils.ts
+++ b/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
        });
    }
 }
--- a/src/render/AdvancedSkipOptions.tsx
+++ b/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;
--- a/src/svg-icons/checkIcon.tsx
+++ b/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;
--- a/src/svg-icons/clipboardIcon.tsx
+++ b/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;
--- a/src/svg-icons/pencilIcon.tsx
+++ b/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;
--- a/src/types.ts
+++ b/src/types.ts
@@ -70,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 {
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,5 @@
 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 { waitFor } from "../maze-utils/src";
@@ -211,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
     */
@@ -321,7 +312,6 @@ export default class Utils {
            allDownvotes[hashedVideoID] = currentVideoData;
        }
        console.log(allDownvotes)
        const entries = Object.entries(allDownvotes);
        if (entries.length > 10000) {
--- a/src/utils/categoryUtils.ts
+++ b/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;
--- a/src/utils/exporter.ts
+++ b/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";
        }
    }
--- a/src/utils/pageUtils.ts
+++ b/src/utils/pageUtils.ts
@@ -68,7 +68,9 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
    const chaptersBox = document.querySelector("ytd-macro-markers-list-renderer");
    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 [];
-    if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) 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
@@ -92,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
                };
            }
--- a/src/utils/segmentData.ts
+++ b/src/utils/segmentData.ts
@@ -1,6 +1,6 @@
 import { DataCache } from "../../maze-utils/src/cache";
 import { getHash, HashedValue } from "../../maze-utils/src/hash";
-import Config from "../config";
+import Config, {  } from "../config";
 import * as CompileConfig from "../../config.json";
 import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getHashParams } from "./pageUtils";
@@ -44,8 +44,6 @@ export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean
 }
 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;
@@ -67,7 +65,7 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
        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))
+                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType))
                    ?.map((segment) => ({
                        ...segment,
                        source: SponsorSourceType.Server
--- a/src/utils/skipRule.ts
+++ b/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;
 }
--- a/src/utils/videoLabels.ts
+++ b/src/utils/videoLabels.ts
@@ -1,12 +1,10 @@
 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 {
 interface VideoLabelsCacheData {
    category: Category;
    hasStartSegment: boolean;
 }
@@ -68,7 +66,7 @@ export async function getVideoLabel(videoID: VideoID): Promise<Category | null>
    if (result) {
        const category = result.videos[videoID]?.category;
-        if (category && utils.getCategorySelection(category).option !== CategorySkipOption.Disabled) {
+        if (category && getCategorySelection(result.videos[videoID]).option !== CategorySkipOption.Disabled) {
            return category;
        } else {
            return null;
--- a/test/selenium.test.ts
+++ b/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
    });
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
        "resolveJsonModule": true,
        "jsx": "react",
        "lib": [
-            "es2019",
+            "es2020",
            "dom",
            "dom.iterable"
        ]
--- a/webpack/webpack.common.js
+++ b/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'),
Author	SHA1	Message	Date
Ajay	4d92f1fbbb	update translations	2025-06-19 17:11:21 -04:00
Ajay	af682801c6	bump version	2025-06-19 17:10:57 -04:00
Ajay	1a404afede	Fix exporter test	2025-06-19 17:07:34 -04:00
Ajay	bbdb03f50d	Use chromium for tests	2025-06-19 16:57:17 -04:00
Ajay	efe2906dde	Update chrome package name	2025-06-19 14:58:01 -04:00
Ajay	5127ba88a6	Use apt get instead of apt	2025-06-19 14:48:45 -04:00
Ajay	49968c3b45	Fix apt not having sudo	2025-06-19 14:48:19 -04:00
Ajay	4f29058b4f	Remove old chrome version	2025-06-19 14:46:10 -04:00
Ajay	616d09171e	Remove extra chrome driver install	2025-06-19 13:34:56 -04:00
Ajay	8022fa77cb	Speed up channel info fetching	2025-06-19 03:08:48 -04:00
Ajay	993c9becf4	Update recommended node version	2025-06-13 14:40:44 -04:00
Ajay	689594851d	Fix overlapping text on tooltip when chapters are present	2025-06-12 04:07:11 -04:00
Ajay	9a7c65899e	Increase es version	2025-06-11 15:28:33 -04:00
Ajay	da1a535de7	Add channel id and name attribute for advanced skip options	2025-06-07 01:01:52 -04:00
Ajay	ec1df44cbc	Also check values for not equals	2025-06-06 23:54:57 -04:00
Ajay	b2461a6a30	Add not contains, not regex and regex ignore case	2025-06-06 23:51:36 -04:00
Ajay	3fb9286e47	Add action type attribute	2025-06-06 23:46:07 -04:00
Ajay	dc5bb5b8aa	Move skip rule code to new file	2025-06-06 23:39:51 -04:00
Ajay	1b5dc38750	Add percentage options for advanced skip options	2025-06-06 23:21:35 -04:00
Ajay	72d3f68957	Add autogenerated type for source in advance skip options	2025-06-06 23:15:34 -04:00
Ajay	d5ff71b367	Case insensitive contains	2025-06-06 22:56:57 -04:00
Ajay	09bd27a59b	Add advanced skip options	2025-06-06 22:03:07 -04:00
Ajay	cf2d39ae3f	Delete old popup	2025-06-04 01:02:33 -04:00
Ajay	4330d5a726	Copy styles over to popup	2025-06-04 00:57:25 -04:00
Ajay	3734b61c81	Add copy debug log button to popup	2025-06-02 16:22:21 -04:00
Ajay	0f2bd699c4	Only show import segments button when video open	2025-06-02 04:38:13 -04:00
Ajay	71b9e497d6	Fix errors	2025-06-02 04:33:14 -04:00
Ajay	550608cdb5	Fix loading indicator in popup	2025-06-02 04:29:59 -04:00
Ajay	e4a050f905	Rewrite popup in react	2025-06-02 04:11:52 -04:00