Update Invidious List

update translations
bump version
2025-12-06 03:27:03 +03:00 · 2025-10-01 00:31:48 +00:00 · 2025-09-30 03:45:53 -04:00 · 2025-09-30 03:44:57 -04:00 · 2025-09-30 01:59:31 -04:00 · 2025-09-30 01:33:38 -04:00
35 changed files with 2043 additions and 833 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,7 +12,8 @@ jobs:

    steps:
      # Initialization
-      - uses: actions/checkout@v4
+      - name: Checkout release branch w/submodules
+        uses: actions/checkout@v5
        with:
          submodules: recursive
      - uses: actions/setup-node@v4
@@ -34,12 +35,27 @@ jobs:
          path: ../builds/SourceCodeUseThisOne.zip
          repo-token: ${{ secrets.GITHUB_TOKEN }}

+      - name: Checkout source maps branch
+        uses: actions/checkout@v5
+        with:
+          path: source-maps
+          ref: source-maps
+      - name: Set up committer info
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
      - run: npm ci

      # Create Firefox artifacts
      - name: Create Firefox artifacts
-        run: npm run build:firefox
+        run: npm run build:firefox -- --env ghpSourceMaps
      - run: mkdir ./builds
+      - name: Move Firefox source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/firefox/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/firefox/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/firefox/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/FirefoxExtension.zip *
      - name: Upload FirefoxExtension to release
@@ -52,7 +68,13 @@ jobs:
      
      # Create Chrome artifacts
      - name: Create Chrome artifacts
-        run: npm run build:chrome
+        run: npm run build:chrome -- --env ghpSourceMaps
+      - name: Move Chrome source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/chrome/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/chrome/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/chrome/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/ChromeExtension.zip *
      - name: Upload ChromeExtension to release
@@ -67,7 +89,13 @@ jobs:
      - name: Clear dist for Edge
        run: rm -rf ./dist
      - name: Create Edge artifacts
-        run: npm run build:edge
+        run: npm run build:edge -- --env ghpSourceMaps
+      - name: Move Edge source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/edge/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/edge/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/edge/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/EdgeExtension.zip *
      - name: Upload EdgeExtension to release
@@ -80,7 +108,13 @@ jobs:

      # Create Safari artifacts
      - name: Create Safari artifacts
-        run: npm run build:safari
+        run: npm run build:safari -- --env ghpSourceMaps
+      - name: Move Safari source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/safari/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/safari/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/safari/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
      - name: Upload SafariExtension to release
@@ -93,7 +127,13 @@ jobs:

      # Create Beta artifacts (Builds with the name changed to beta)
      - name: Create Chrome Beta artifacts
-        run: npm run build:chrome -- --env stream=beta
+        run: npm run build:chrome -- --env stream=beta --env ghpSourceMaps
+      - name: Move Chrome Beta source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/chrome-beta/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/chrome-beta/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/chrome-beta/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
      - name: Upload ChromeExtensionBeta to release
@@ -106,11 +146,17 @@ jobs:

      # Firefox Beta
      - name: Create Firefox Beta artifacts
-        run: npm run build:firefox -- --env stream=beta
+        run: npm run build:firefox -- --env stream=beta --env autoupdate --env ghpSourceMaps
      - uses: actions/upload-artifact@v4
        with:
          name: FirefoxExtensionBeta
          path: dist
+      - name: Move Firefox Beta source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/firefox-beta/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/firefox-beta/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/firefox-beta/$VERSION/"
      - name: Zip Artifacts
        run: cd ./dist ; zip -r ../builds/FirefoxExtensionBeta.zip *

@@ -120,10 +166,8 @@ jobs:
        env:
          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
          WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
-      - name: Install rename
-        run: sudo apt-get install rename
      - name: Rename signed file
-        run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
+        run: mv ./web-ext-artifacts/* ./web-ext-artifacts/FirefoxSignedInstaller.xpi
      - uses: actions/upload-artifact@v4
        with:
          name: FirefoxExtensionSigned.xpi
@@ -137,3 +181,80 @@ jobs:
          path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
          repo-token: ${{ secrets.GITHUB_TOKEN }}

+      - name: Commit & push new source maps
+        if: always()
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          cd ./source-maps
+          git add .
+          git commit -m "Publish source maps for version $VERSION"
+          git push
+
+      - name: Prepare new github pages deployment
+        shell: python
+        run: |
+          from pathlib import Path
+          import json
+          import shutil
+          import os
+
+          # config stuff
+          installer_name = "FirefoxSignedInstaller.xpi"
+          owner, repo_name = os.environ["GITHUB_REPOSITORY"].split("/")
+          owner = owner.lower()
+
+          # create the github paged dir
+          ghp_dir = Path("./github-pages")
+          ghp_dir.mkdir(parents=True, exist_ok=True)
+
+          # move in the installer
+          Path("./web-ext-artifacts", installer_name).rename(ghp_dir / installer_name)
+
+          # read manifest.json and extract parameters
+          with open("./dist/manifest.json") as f:
+            manifest = json.load(f)
+          current_version = manifest["version"]
+          ext_id = manifest["browser_specific_settings"]["gecko"]["id"]
+
+          # generate updates file
+          updates = {
+            "addons": {
+              ext_id: {
+                "updates": [
+                  {
+                    "version": current_version,
+                    # param doesn't actually matter, it's just a cachebuster
+                    "update_link": f"https://{owner}.github.io/{repo_name}/{installer_name}?v={current_version}",
+                  },
+                ],
+              },
+            },
+          }
+          (ghp_dir / "updates.json").write_text(json.dumps(updates))
+
+          # copy in source maps
+          def only_sourcemaps(cur, ls):
+            if '/' in cur:
+              return []
+            return set(ls) - {"chrome", "chrome-beta", "edge", "firefox", "firefox-beta", "safari"}
+          shutil.copytree("source-maps", ghp_dir, ignore=only_sourcemaps, dirs_exist_ok=True)
+
+      - name: Upload new github pages deployment
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./github-pages
+
+  deploy-ghp:
+    name: Deploy to github pages
+    needs: build
+    permissions:
+      id-token: write
+      pages: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
--- a/ci/invidiouslist.json
+++ b/ci/invidiouslist.json
@@ -1 +1 @@
-["www.youtubekids.com","inv.nadeko.net","inv.tux.pizza","invidious.adminforge.de","invidious.jing.rocks","invidious.nerdvpn.de","invidious.perennialte.ch","invidious.privacyredirect.com","invidious.reallyaweso.me","invidious.yourdevice.ch","iv.ggtyler.dev","iv.nboeck.de","yewtu.be"]
+["www.youtubekids.com","inv.nadeko.net","invidious.nerdvpn.de","yewtu.be"]
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -1,7 +1,7 @@
 {
    "name": "__MSG_fullName__",
    "short_name": "SponsorBlock",
-    "version": "5.14",
+    "version": "6.0.1",
    "default_locale": "en",
    "description": "__MSG_Description__",
    "homepage_url": "https://sponsor.ajay.app",
@@ -16,7 +16,8 @@
    },
    "permissions": [
        "storage",
-        "scripting"
+        "scripting",
+        "unlimitedStorage"
    ],
    "options_ui": {
        "page": "options/options.html",
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,7 @@
        "ts-loader": "^9.4.2",
        "ts-node": "^10.9.1",
        "typescript": "4.9",
-        "web-ext": "^8.9.0",
+        "web-ext": "^8.10.0",
        "webpack": "^5.94.0",
        "webpack-cli": "^4.10.0",
        "webpack-merge": "^5.8.0"
@@ -529,9 +529,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
@@ -1617,9 +1617,9 @@
      }
    },
    "node_modules/@mdn/browser-compat-data": {
-      "version": "6.0.32",
-      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-6.0.32.tgz",
-      "integrity": "sha512-XXZ0RbkrIw8mr71WbVYmtZk+zWYutS71+/8/E+gyPE3yt/ZNiW4UU5/NcrpgLO4NfIB+VBuWhPzSN6Pb1VxAWA==",
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-7.1.5.tgz",
+      "integrity": "sha512-j7XpHbvSU3GOtXawlGq6TIETj0wgcE9o7FXu88ragQE/ak8/OsqOxn+wZ2v/2QUe8vrVhb9OJes+gHgyGEOYEQ==",
      "dev": true
    },
    "node_modules/@nodelib/fs.scandir": {
@@ -2580,14 +2580,14 @@
      }
    },
    "node_modules/addons-linter": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-7.18.0.tgz",
-      "integrity": "sha512-XJ2FiBjwuprKaFte/5KEOPgym3OuBJw1sutUipeYtQ8q2StVzXqwKY+Fwp0wciDlFkmiQmxP9AMeDiKrc0MdRw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-7.20.0.tgz",
+      "integrity": "sha512-c6drrGsO91oGyqEdEZ3KIBFrSiSlhM5CKxoebBatH1l2vN1ByuRAlp9YUHLCjypLONThPcb+tVTA7X6yKIhpsw==",
      "dev": true,
      "dependencies": {
        "@fluent/syntax": "0.19.0",
        "@fregante/relaxed-json": "2.0.0",
-        "@mdn/browser-compat-data": "6.0.32",
+        "@mdn/browser-compat-data": "7.1.5",
        "addons-moz-compare": "1.3.0",
        "addons-scanner-utils": "9.13.0",
        "ajv": "8.17.1",
@@ -2597,14 +2597,14 @@
        "common-tags": "1.8.2",
        "deepmerge": "4.3.1",
        "eslint": "8.57.1",
-        "eslint-plugin-no-unsanitized": "4.1.2",
+        "eslint-plugin-no-unsanitized": "4.1.4",
        "eslint-visitor-keys": "4.2.1",
        "espree": "10.4.0",
        "esprima": "4.0.1",
        "fast-json-patch": "3.1.1",
        "image-size": "2.0.2",
        "json-merge-patch": "1.0.2",
-        "pino": "9.7.0",
+        "pino": "9.9.5",
        "semver": "7.7.2",
        "source-map-support": "0.5.21",
        "upath": "2.0.1",
@@ -4298,9 +4298,9 @@
      }
    },
    "node_modules/decamelize": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
-      "integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.1.tgz",
+      "integrity": "sha512-G7Cqgaelq68XHJNGlZ7lrNQyhZGsFqpwtGFexqUv4IQdjKoSYF7ipZ9UuTJZUSQXFj/XaoBLuEVIVqr8EJngEQ==",
      "dev": true,
      "engines": {
        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
@@ -4870,9 +4870,9 @@
      }
    },
    "node_modules/eslint-plugin-no-unsanitized": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.1.2.tgz",
-      "integrity": "sha512-ydF3PMFKEIkP71ZbLHFvu6/FW8SvRv6VV/gECfrQkqyD5+5oCAtPz8ZHy0GRuMDtNe2jsNdPCQXX4LSbkapAVQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.1.4.tgz",
+      "integrity": "sha512-cjAoZoq3J+5KJuycYYOWrc0/OpZ7pl2Z3ypfFq4GtaAgheg+L7YGxUo2YS3avIvo/dYU5/zR2hXu3v81M9NxhQ==",
      "dev": true,
      "peerDependencies": {
        "eslint": "^8 || ^9"
@@ -5498,9 +5498,9 @@
      }
    },
    "node_modules/fast-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
-      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
      "dev": true,
      "funding": [
        {
@@ -9905,9 +9905,9 @@
      }
    },
    "node_modules/pino": {
-      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-9.7.0.tgz",
-      "integrity": "sha512-vnMCM6xZTb1WDmLvtG2lE/2p+t9hDEIvTWJsu6FejkE62vB7gDhvzrpFR4Cw2to+9JNQxVnkAKVPA1KPB98vWg==",
+      "version": "9.9.5",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-9.9.5.tgz",
+      "integrity": "sha512-d1s98p8/4TfYhsJ09r/Azt30aYELRi6NNnZtEbqFw6BoGsdPVf5lKNK3kUwH8BmJJfpTLNuicjUQjaMbd93dVg==",
      "dev": true,
      "dependencies": {
        "atomic-sleep": "^1.0.0",
@@ -11293,9 +11293,9 @@
      "dev": true
    },
    "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
      "dev": true,
      "engines": {
        "node": ">=14.14"
@@ -11856,18 +11856,18 @@
      }
    },
    "node_modules/web-ext": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-8.9.0.tgz",
-      "integrity": "sha512-X2IeYfWSf7c/Tireuv48FRfgHougaINBWwwMoYOd9xcXbQGrYXK3IALZZf0cbPpq4AidNxNO8HTKw3SUeWvJgw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-8.10.0.tgz",
+      "integrity": "sha512-RM15PF8/xBBTe3pkgTvTkPaRoJbwE4HZcKy9NeD0lHIdir23oy9kd2oC4LuOqhrtarFvhTK4HlJ6NPYXt8Isxw==",
      "dev": true,
      "dependencies": {
-        "@babel/runtime": "7.27.6",
+        "@babel/runtime": "7.28.4",
        "@devicefarmer/adbkit": "3.3.8",
-        "addons-linter": "7.18.0",
+        "addons-linter": "7.20.0",
        "camelcase": "8.0.0",
        "chrome-launcher": "1.2.0",
        "debounce": "1.2.1",
-        "decamelize": "6.0.0",
+        "decamelize": "6.0.1",
        "es6-error": "4.1.1",
        "firefox-profile": "4.7.0",
        "fx-runner": "1.4.0",
@@ -11878,12 +11878,12 @@
        "node-notifier": "10.0.1",
        "open": "10.2.0",
        "parse-json": "7.1.1",
-        "pino": "9.7.0",
+        "pino": "9.9.5",
        "promise-toolbox": "0.21.0",
        "source-map-support": "0.5.21",
        "strip-bom": "5.0.0",
-        "strip-json-comments": "5.0.2",
-        "tmp": "0.2.3",
+        "strip-json-comments": "5.0.3",
+        "tmp": "0.2.5",
        "update-notifier": "7.3.1",
        "watchpack": "2.4.4",
        "yargs": "17.7.2",
@@ -12007,9 +12007,9 @@
      }
    },
    "node_modules/web-ext/node_modules/strip-json-comments": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.2.tgz",
-      "integrity": "sha512-4X2FR3UwhNUE9G49aIsJW5hRRR3GXGTBTZRMfv568O60ojM8HcWjV/VxAxCDW3SUND33O6ZY66ZuRcdkj73q2g==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+      "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
      "dev": true,
      "engines": {
        "node": ">=14.16"
@@ -12992,9 +12992,9 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
      "dev": true
    },
    "@babel/template": {
@@ -13814,9 +13814,9 @@
      }
    },
    "@mdn/browser-compat-data": {
-      "version": "6.0.32",
-      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-6.0.32.tgz",
-      "integrity": "sha512-XXZ0RbkrIw8mr71WbVYmtZk+zWYutS71+/8/E+gyPE3yt/ZNiW4UU5/NcrpgLO4NfIB+VBuWhPzSN6Pb1VxAWA==",
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-7.1.5.tgz",
+      "integrity": "sha512-j7XpHbvSU3GOtXawlGq6TIETj0wgcE9o7FXu88ragQE/ak8/OsqOxn+wZ2v/2QUe8vrVhb9OJes+gHgyGEOYEQ==",
      "dev": true
    },
    "@nodelib/fs.scandir": {
@@ -14602,14 +14602,14 @@
      "dev": true
    },
    "addons-linter": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-7.18.0.tgz",
-      "integrity": "sha512-XJ2FiBjwuprKaFte/5KEOPgym3OuBJw1sutUipeYtQ8q2StVzXqwKY+Fwp0wciDlFkmiQmxP9AMeDiKrc0MdRw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-7.20.0.tgz",
+      "integrity": "sha512-c6drrGsO91oGyqEdEZ3KIBFrSiSlhM5CKxoebBatH1l2vN1ByuRAlp9YUHLCjypLONThPcb+tVTA7X6yKIhpsw==",
      "dev": true,
      "requires": {
        "@fluent/syntax": "0.19.0",
        "@fregante/relaxed-json": "2.0.0",
-        "@mdn/browser-compat-data": "6.0.32",
+        "@mdn/browser-compat-data": "7.1.5",
        "addons-moz-compare": "1.3.0",
        "addons-scanner-utils": "9.13.0",
        "ajv": "8.17.1",
@@ -14619,14 +14619,14 @@
        "common-tags": "1.8.2",
        "deepmerge": "4.3.1",
        "eslint": "8.57.1",
-        "eslint-plugin-no-unsanitized": "4.1.2",
+        "eslint-plugin-no-unsanitized": "4.1.4",
        "eslint-visitor-keys": "4.2.1",
        "espree": "10.4.0",
        "esprima": "4.0.1",
        "fast-json-patch": "3.1.1",
        "image-size": "2.0.2",
        "json-merge-patch": "1.0.2",
-        "pino": "9.7.0",
+        "pino": "9.9.5",
        "semver": "7.7.2",
        "source-map-support": "0.5.21",
        "upath": "2.0.1",
@@ -15846,9 +15846,9 @@
      }
    },
    "decamelize": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
-      "integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.1.tgz",
+      "integrity": "sha512-G7Cqgaelq68XHJNGlZ7lrNQyhZGsFqpwtGFexqUv4IQdjKoSYF7ipZ9UuTJZUSQXFj/XaoBLuEVIVqr8EJngEQ==",
      "dev": true
    },
    "decimal.js": {
@@ -16446,9 +16446,9 @@
      }
    },
    "eslint-plugin-no-unsanitized": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.1.2.tgz",
-      "integrity": "sha512-ydF3PMFKEIkP71ZbLHFvu6/FW8SvRv6VV/gECfrQkqyD5+5oCAtPz8ZHy0GRuMDtNe2jsNdPCQXX4LSbkapAVQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.1.4.tgz",
+      "integrity": "sha512-cjAoZoq3J+5KJuycYYOWrc0/OpZ7pl2Z3ypfFq4GtaAgheg+L7YGxUo2YS3avIvo/dYU5/zR2hXu3v81M9NxhQ==",
      "dev": true,
      "requires": {}
    },
@@ -16692,9 +16692,9 @@
      "dev": true
    },
    "fast-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
-      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
      "dev": true
    },
    "fastest-levenshtein": {
@@ -19892,9 +19892,9 @@
      "dev": true
    },
    "pino": {
-      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-9.7.0.tgz",
-      "integrity": "sha512-vnMCM6xZTb1WDmLvtG2lE/2p+t9hDEIvTWJsu6FejkE62vB7gDhvzrpFR4Cw2to+9JNQxVnkAKVPA1KPB98vWg==",
+      "version": "9.9.5",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-9.9.5.tgz",
+      "integrity": "sha512-d1s98p8/4TfYhsJ09r/Azt30aYELRi6NNnZtEbqFw6BoGsdPVf5lKNK3kUwH8BmJJfpTLNuicjUQjaMbd93dVg==",
      "dev": true,
      "requires": {
        "atomic-sleep": "^1.0.0",
@@ -20917,9 +20917,9 @@
      "dev": true
    },
    "tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
      "dev": true
    },
    "tmpl": {
@@ -21293,18 +21293,18 @@
      }
    },
    "web-ext": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-8.9.0.tgz",
-      "integrity": "sha512-X2IeYfWSf7c/Tireuv48FRfgHougaINBWwwMoYOd9xcXbQGrYXK3IALZZf0cbPpq4AidNxNO8HTKw3SUeWvJgw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-8.10.0.tgz",
+      "integrity": "sha512-RM15PF8/xBBTe3pkgTvTkPaRoJbwE4HZcKy9NeD0lHIdir23oy9kd2oC4LuOqhrtarFvhTK4HlJ6NPYXt8Isxw==",
      "dev": true,
      "requires": {
-        "@babel/runtime": "7.27.6",
+        "@babel/runtime": "7.28.4",
        "@devicefarmer/adbkit": "3.3.8",
-        "addons-linter": "7.18.0",
+        "addons-linter": "7.20.0",
        "camelcase": "8.0.0",
        "chrome-launcher": "1.2.0",
        "debounce": "1.2.1",
-        "decamelize": "6.0.0",
+        "decamelize": "6.0.1",
        "es6-error": "4.1.1",
        "firefox-profile": "4.7.0",
        "fx-runner": "1.4.0",
@@ -21315,12 +21315,12 @@
        "node-notifier": "10.0.1",
        "open": "10.2.0",
        "parse-json": "7.1.1",
-        "pino": "9.7.0",
+        "pino": "9.9.5",
        "promise-toolbox": "0.21.0",
        "source-map-support": "0.5.21",
        "strip-bom": "5.0.0",
-        "strip-json-comments": "5.0.2",
-        "tmp": "0.2.3",
+        "strip-json-comments": "5.0.3",
+        "tmp": "0.2.5",
        "update-notifier": "7.3.1",
        "watchpack": "2.4.4",
        "yargs": "17.7.2",
@@ -21399,9 +21399,9 @@
          "dev": true
        },
        "strip-json-comments": {
-          "version": "5.0.2",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.2.tgz",
-          "integrity": "sha512-4X2FR3UwhNUE9G49aIsJW5hRRR3GXGTBTZRMfv568O60ojM8HcWjV/VxAxCDW3SUND33O6ZY66ZuRcdkj73q2g==",
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+          "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
          "dev": true
        },
        "type-fest": {
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
    "ts-loader": "^9.4.2",
    "ts-node": "^10.9.1",
    "typescript": "4.9",
-    "web-ext": "^8.9.0",
+    "web-ext": "^8.10.0",
    "webpack": "^5.94.0",
    "webpack-cli": "^4.10.0",
    "webpack-merge": "^5.8.0"
--- a/public/_locales
+++ b/public/_locales
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -116,14 +116,26 @@ html, body {
    color: white;
 }

-.option-group > div {
+.option-group > div, .extraOptionGroup {
    min-height: 50px;
    padding: 15px 0;
-    border-bottom: 1px solid var(--border-color);
    border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
+.option-group > div {
+    border-bottom: 1px solid var(--border-color);
+}
+.extraOptionGroup {
+    border-top: 1px solid var(--border-color);
+}
+.extraOptionGroup tr:not(:last-child) {
+    padding-bottom: 15px;
+    display: block;
+}
+#category-type {
+    padding: 0;
+}

-.categoryExtraOptions {
+.categoryChooserTable .categoryExtraOptions {
    padding-bottom: 15px;
 }

@@ -364,6 +376,11 @@ input[type='number'] {
    padding: 4px;
 }

+.sb-number-input {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
 .switch-label {
    width: inherit;
 }
@@ -744,4 +761,40 @@ svg {
 .advanced-config-help-message {
    margin-bottom: 10px;
    transition: none;
+}
+
+.categoryChooserTopRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-bottom: 10px;
+}
+
+.partiallyHidden {
+    opacity: 0.5;
+}
+
+.partiallyHidden:hover {
+    opacity: 1;
+}
+
+.reset-button svg {
+    margin-left: 5px;
+    width: 10px;
+    fill: var(--white);
+
+    cursor: pointer;
+}
+
+.skipProfileMenu {
+    position: absolute;
+}
+
+.configurationInfo > *:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+.configurationInfo .option-text-box {
+    width: 100%;
 }
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -80,66 +80,6 @@
                    </a>
 				</div>

-				<div data-type="toggle" data-sync="muteSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="muteSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="muteSegments">
-							__MSG_muteSegments__
-						</label>
-					</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoSegments">
-							__MSG_fullVideoSegments__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="toggle" data-sync="fullVideoLabelsOnThumbnails" 
-						data-dependent-on="fullVideoSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoLabelsOnThumbnails" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoLabelsOnThumbnails">
-							__MSG_fullVideoLabelsOnThumbnails__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="number-change" data-sync="minDuration">
-					<label class="number-container">
-						<span class="optionLabel">__MSG_minDuration__</span>
-						<input type="number" step="0.1" min="0">
-					</label>
-	
-					<div class="small-description">__MSG_minDurationDescription__</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="manualSkipOnFullVideo">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="manualSkipOnFullVideo" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="manualSkipOnFullVideo">
-							__MSG_enableManualSkipOnFullVideo__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatManualSkipOnFullVideo__</div>
-				</div>
-
 				<div data-type="react-AdvancedSkipOptionsComponent"></div>

 				<div data-type="toggle" data-sync="forceChannelCheck">
--- a/public/popup.css
+++ b/public/popup.css
@@ -197,9 +197,7 @@
 * <details> wrapper around each segment
 */
 .votingButtons {
-  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
-  margin: 4px 16px;
 }
 .votingButtons[open] {
  padding-bottom: 5px;
@@ -208,6 +206,29 @@
  background-color: var(--sb-grey-bg-color);
 }

+/*
+ * Nested chapters
+ */ 
+.innerChapterList {
+  border-radius: 8px;
+}
+
+.innerChapterList > summary {
+  font-weight: bold;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.segmentWrapper:has(> .innerChapterList > summary:hover) {
+  background-color: var(--sb-grey-bg-color);
+}
+
+.segmentWrapper{
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 8px;
+  margin: 4px 16px;
+}
+
 /*
 * Individual segments summaries (clickable <summary>)
 */
@@ -277,8 +298,8 @@
  border-radius: 8px;
  background-color: var(--sb-grey-bg-color);
  justify-content: space-evenly;
-  overflow: hidden;
  display: flex;
+  position: relative;
 }
 .sbControlsMenu-item {
  display: flex;
@@ -293,6 +314,12 @@
  padding: 10px 15px;
  transition: background-color 0.2s ease-in-out;
 }
+.sbControlsMenu-item:first-child {
+  border-radius: 8px 0px 0px 8px;
+}
+.sbControlsMenu-item:last-child {
+  border-radius: 0px 8px 8px 0px;
+}
 .sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
  background-color: #444;
 }
@@ -627,4 +654,62 @@
 .sbPopupButton {
  width: 16px;
  fill: var(--sb-main-fg-color);
+}
+
+#skipProfileMenu {
+  position: absolute;
+  top: 80px;
+  left: 50%;
+
+  background-color: #292828;
+  border-radius: 10px;
+  padding: 10px;
+
+  transform: translateX(-50%);
+}
+
+#skipProfileActions {
+  padding-top: 10px;
+}
+
+.skipOptionAction {
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  font-size: 14px;
+  padding: 5px;
+  margin: 5px;
+
+  background-color: #222;
+  border-radius: 5px;
+
+  cursor: help;
+  user-select: none;
+
+  border-color: transparent;
+  border-width: 2px;
+  border-style: solid;
+}
+.skipOptionAction:not(.highlighted, .disabled):hover {
+  background-color: var(--sb-grey-bg-color);
+}
+.skipOptionAction.selected {
+  border-color: var(--sb-red-bg-color);
+}
+.skipOptionAction.highlighted {
+  border-color: rgb(127, 0, 0);
+}
+.skipOptionAction:not(.highlighted, .disabled) {
+  cursor: pointer;
+}
+.skipOptionAction.disabled {
+  color: #808080
+}
+
+.optionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
 }
--- a/src/components/options/CategoryChooserComponent.tsx
+++ b/src/components/options/CategoryChooserComponent.tsx
@@ -1,30 +1,160 @@
 import * as React from "react";

 import * as CompileConfig from "../../../config.json";
-import { Category } from "../../types";
-import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+import { Category, CategorySelection, CategorySkipOption } from "../../types";
+import { CategorySkipOptionsComponent, ExtraOptionComponent, ToggleOption } from "./CategorySkipOptionsComponent";
+import { SelectOptionComponent } from "./SelectOptionComponent";
+import Config, { ConfigurationID, CustomConfiguration } from "../../config";
+import { generateUserID } from "../../../maze-utils/src/setup";

-export interface CategoryChooserProps { 
+let forceUpdateSkipProfilesTimeout: NodeJS.Timeout | null = null;
+let forceUpdateSkipProfileIDsTimeout: NodeJS.Timeout | null = null;

-}
+export function CategoryChooserComponent() {
+    const [configurations, setConfigurations] = React.useState(Config.local!.skipProfiles);
+    const [selectedConfigurationID, setSelectedConfigurationID] = React.useState<ConfigurationID | null>(null);
+    const [channelListText, setChannelListText] = React.useState("");

-export interface CategoryChooserState {
+    const [configurationName, setConfigurationName] = React.useState("");
+    const [selections, setSelections] = React.useState<CategorySelection[]>([]);

-}
+    React.useEffect(() => {
+        setConfigurationName(getConfigurationValue(selectedConfigurationID, "name", ""));

-class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+        updateChannelList(setChannelListText, selectedConfigurationID!);
+        setSelections(getConfigurationValue<CategorySelection[]>(selectedConfigurationID, "categorySelections"));
+    }, [selectedConfigurationID]);

-    constructor(props: CategoryChooserProps) {
-        super(props);
-
-        // Setup state
-        this.state = {
-            
+    const createNewConfig = () => {
+        let newID = generateUserID().substring(0, 5);
+        while (Config.local.skipProfiles[newID]) {
+            newID = generateUserID().substring(0, 5);
        }
-    }

-    render(): React.ReactElement {
-        return (
+        const newConfiguration: CustomConfiguration = {
+            name: `${chrome.i18n.getMessage("NewConfiguration")} ${Object.keys(Config.local.skipProfiles).length}`,
+            categorySelections: [],
+            showAutogeneratedChapters: null,
+            autoSkipOnMusicVideos: null,
+            skipNonMusicOnlyOnYoutubeMusic: null,
+            muteSegments: null,
+            fullVideoSegments: null,
+            manualSkipOnFullVideo: null,
+            minDuration: null
+        };
+
+        Config.local!.skipProfiles[newID] = newConfiguration;
+        forceUpdateConfigurations();
+        setConfigurations(Config.local!.skipProfiles);
+        setSelectedConfigurationID(newID as ConfigurationID);
+
+        updateChannelList(setChannelListText, newID as ConfigurationID);
+    };
+    React.useEffect(() => {
+        if (window.location.hash === "#newProfile") {
+            createNewConfig();
+        }
+    }, []);
+
+    return (
+        <>
+            <div className="categoryChooserTopRow">
+                <SelectOptionComponent
+                    id="channelProfiles"
+                    onChange={(value) => {
+                        if (value === "null") value = null;
+
+                        setSelectedConfigurationID(value as ConfigurationID);
+                        updateChannelList(setChannelListText, value as ConfigurationID);
+                    }}
+                    value={selectedConfigurationID!}
+                    options={[{
+                        value: "null",
+                        label: chrome.i18n.getMessage("DefaultConfiguration")
+                    }].concat(Object.entries(configurations).map(([key, value]) => ({
+                        value: key,
+                        label: value.name
+                    })))}
+                />
+
+                <div 
+                    className="option-button trigger-button"
+                    onClick={() => createNewConfig()}>
+                    {chrome.i18n.getMessage("NewConfiguration")}
+                </div>
+            </div>
+
+            {
+                selectedConfigurationID &&
+                <div className="configurationInfo">
+                    <input 
+                        type="text"
+                        id="configurationName"
+                        value={configurationName}
+                        placeholder={chrome.i18n.getMessage("ConfigurationName")}
+                        onChange={(e) => {
+                            const newName = e.target.value;
+                            getConfig(selectedConfigurationID)!.name = newName;
+                            setConfigurationName(newName);
+
+                            forceUpdateConfigurations();
+                            setConfigurations(Config.local!.skipProfiles);
+                        }}/>
+
+                    <div>
+                        {chrome.i18n.getMessage("ChannelListInstructionsSB")}
+                    </div>
+                
+                    <textarea 
+                        className="option-text-box" 
+                        rows={10} 
+                        value={channelListText}
+                        onChange={(e) => {
+                            const newText = e.target.value;
+                            setChannelListText(newText);
+
+                            const channels = newText.split("\n").map((channel) => channel.trim()).filter((channel) => channel !== "");
+                            if (channels.length > 0) {
+                                for (const [channelID, id] of Object.entries(Config.local!.channelSkipProfileIDs)) {
+                                    if (id === selectedConfigurationID) {
+                                        if (!channels.includes(channelID)) {
+                                            delete Config.local!.channelSkipProfileIDs[channelID];
+                                        }
+                                    }
+                                }
+
+                                for (const channel of channels) {
+                                    Config.local!.channelSkipProfileIDs[channel] = selectedConfigurationID;
+                                }
+                            }
+
+                            forceUpdateConfigurationIDs();
+                        }}/>
+                    
+                    <div 
+                        className="option-button trigger-button"
+                        onClick={() => {
+                            if (confirm(chrome.i18n.getMessage("areYouSureDeleteConfig"))) {
+                                delete Config.local.skipProfiles[selectedConfigurationID];
+                                forceUpdateConfigurations();
+
+                                for (const [channelID, id] of Object.entries(Config.local.channelSkipProfileIDs)) {
+                                    if (id === selectedConfigurationID) {
+                                        delete Config.local.channelSkipProfileIDs[channelID];
+                                    }
+                                }
+                                forceUpdateConfigurationIDs();
+
+                                setConfigurations(Config.local!.skipProfiles);
+                                const newID = Object.keys(Config.local!.skipProfiles)[0] as ConfigurationID;
+                                setSelectedConfigurationID(newID);
+                            }
+                        }}>
+                        {chrome.i18n.getMessage("DeleteConfiguration")}
+                    </div>
+                </div>
+            }
+
            <table id="categoryChooserTable"
                className="categoryChooserTable"> 
                <tbody>
@@ -51,25 +181,170 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
                        </th>
                    </tr>

-                    {this.getCategorySkipOptions()}
+                    <CategorySkipOptions
+                        selectedConfigurationID={selectedConfigurationID}
+                        selections={selections}
+                        setSelections={setSelections}
+                    />
                </tbody> 
            </table>
+
+            <ExtraOptionsComponent
+                selectedConfigurationID={selectedConfigurationID!}/>
+        </>
+    );
+}
+
+function CategorySkipOptions({ selectedConfigurationID, selections, setSelections}: { selectedConfigurationID: ConfigurationID | null;
+        selections: CategorySelection[]; setSelections: (s: CategorySelection[]) => void; }): JSX.Element {
+    const elements: JSX.Element[] = [];
+    const defaultSkipOption = selectedConfigurationID === null ? CategorySkipOption.Disabled : CategorySkipOption.FallbackToDefault;
+
+    for (const category of CompileConfig.categoryList) {
+        elements.push(
+            <CategorySkipOptionsComponent
+                category={category as Category}
+                selection={selections.find(selection => selection.name === category)?.option ?? defaultSkipOption}
+                updateSelection={(option: CategorySkipOption) => {
+                    const existingSelection = selections.find(selection => selection.name === category);
+                    const deletingSelection = (option === CategorySkipOption.Disabled && selectedConfigurationID === null)
+                        || (option === CategorySkipOption.FallbackToDefault && selectedConfigurationID !== null);
+                    if (existingSelection) {
+                        existingSelection.option = option;
+
+                        if (deletingSelection) {
+                            selections.splice(selections.indexOf(existingSelection), 1);
+                        }
+                    } else if (!deletingSelection) {
+                        selections.push({
+                            name: category as Category,
+                            option: option
+                        });
+                    }
+
+                    // Clone so React notices the change
+                    selections = [...selections];
+
+                    updateConfigurationValue(selectedConfigurationID, "categorySelections", selections, setSelections);
+                }}
+                isDefaultConfig={selectedConfigurationID === null}
+                selectedConfigurationID={selectedConfigurationID}
+                key={category}>
+            </CategorySkipOptionsComponent>
        );
    }

-    getCategorySkipOptions(): JSX.Element[] {
-        const elements: JSX.Element[] = [];
+    return <>
+        {elements}
+    </>;
+}

-        for (const category of CompileConfig.categoryList) {
-            elements.push(
-                <CategorySkipOptionsComponent category={category as Category}
-                    key={category}>
-                </CategorySkipOptionsComponent>
-            );
+function forceUpdateConfigurations() {
+    if (forceUpdateSkipProfilesTimeout) {
+        clearTimeout(forceUpdateSkipProfilesTimeout);
+    }
+
+    forceUpdateSkipProfilesTimeout = setTimeout(() => {
+        Config.forceLocalUpdate("skipProfiles");
+    }, 50);
+}
+
+function forceUpdateConfigurationIDs() {
+    if (forceUpdateSkipProfileIDsTimeout) {
+        clearTimeout(forceUpdateSkipProfileIDsTimeout);
+    }
+
+    forceUpdateSkipProfileIDsTimeout = setTimeout(() => {
+        Config.forceLocalUpdate("channelSkipProfileIDs");
+    }, 50);
+}
+
+function updateChannelList(setChannelListText: (value: string) => void, selectedConfigurationID: ConfigurationID) {
+    setChannelListText(Object.entries(Config.local!.channelSkipProfileIDs)
+        .filter(([, id]) => id === selectedConfigurationID)
+        .map(([channelID]) => channelID).join("\n"))
+}
+
+function getConfig(selectedConfigurationID: ConfigurationID | null) {
+    return selectedConfigurationID ? Config.local!.skipProfiles[selectedConfigurationID] : null;
+}
+
+export function getConfigurationValue<T>(selectedConfigurationID: ConfigurationID | null, option: string, defaultValue?: T): T {
+    if (selectedConfigurationID === null) {
+        if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            return Config.config[option];
        }
-
-        return elements;
+    } else {
+        return getConfig(selectedConfigurationID)[option];
    }
 }

-export default CategoryChooserComponent;
+export function updateConfigurationValue(selectedConfigurationID: ConfigurationID | null, option: string, value: unknown, setFunction?: (value: unknown) => void) {
+     if (selectedConfigurationID === null) {
+        Config.config[option] = value;
+    } else {
+        const config = getConfig(selectedConfigurationID);
+        if (value !== null) {
+            config[option] = value;
+        } else {
+            delete config[option];
+        }
+
+        forceUpdateConfigurations();
+    }
+
+    if (setFunction) setFunction(value);
+}
+
+function ExtraOptionsComponent(props: {selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const options: ToggleOption[][] = [[{
+        configKey: "muteSegments",
+        label: chrome.i18n.getMessage("muteSegments"),
+        type: "toggle"
+    }], [{
+        configKey: "fullVideoSegments",
+        label: chrome.i18n.getMessage("fullVideoSegments"),
+        type: "toggle"
+    }, {
+        configKey: "fullVideoLabelsOnThumbnails",
+        label: chrome.i18n.getMessage("fullVideoLabelsOnThumbnails"),
+        type: "toggle",
+        dontShowOnCustomConfigs: true
+    }, {
+        configKey: "manualSkipOnFullVideo",
+        label: chrome.i18n.getMessage("enableManualSkipOnFullVideo"),
+        description: chrome.i18n.getMessage("whatManualSkipOnFullVideo"),
+        type: "toggle"
+    }], [{
+        configKey: "minDuration",
+        label: chrome.i18n.getMessage("minDuration"),
+        description: chrome.i18n.getMessage("minDurationDescription"),
+        type: "number"
+    }]];
+
+    const result: JSX.Element[] = [];
+
+    for (const optionGroup of options) {
+        const groupResult: JSX.Element[] = [];
+        for (const option of optionGroup) {
+            groupResult.push(
+                <ExtraOptionComponent
+                    option={option}
+                    selectedConfigurationID={props.selectedConfigurationID}
+                    key={option.configKey}/>
+            );
+        }
+
+        result.push(
+            <div className="extraOptionGroup" key={optionGroup.map(o => o.configKey).join("-")}>
+                {groupResult}
+            </div>
+        );
+    }
+
+    return (<>
+        {result}
+    </>);
+}
--- a/src/components/options/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@@ -1,256 +1,295 @@
 import * as React from "react";

-import Config from "../../config"
+import Config, { ConfigurationID } from "../../config"
 import * as CompileConfig from "../../../config.json";
 import { Category, CategorySkipOption } from "../../types";

 import { getCategorySuffix } from "../../utils/categoryUtils";
-import ToggleOptionComponent from "./ToggleOptionComponent";
+import { ToggleOptionComponent } from "./ToggleOptionComponent";
+import { getConfigurationValue, updateConfigurationValue } from "./CategoryChooserComponent";
+import { NumberInputOptionComponent } from "./NumberInputOptionComponent";

 export interface CategorySkipOptionsProps { 
    category: Category;
+    selection: CategorySkipOption;
+    updateSelection(selection: CategorySkipOption): void;
+    isDefaultConfig: boolean;
+    selectedConfigurationID: ConfigurationID;
    defaultColor?: string;
    defaultPreviewColor?: string;
    children?: React.ReactNode;
 }

-export interface CategorySkipOptionsState {
-    color: string;
-    previewColor: string;
-}
-
 export interface ToggleOption {
    configKey: string;
    label: string;
+    type: "toggle" | "number";
+    description?: string;
    dontDisable?: boolean;
+    dontShowOnCustomConfigs?: boolean;
 }

-class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
-    setBarColorTimeout: NodeJS.Timeout;
+export function CategorySkipOptionsComponent(props: CategorySkipOptionsProps): React.ReactElement {
+    const [color, setColor] = React.useState(props.defaultColor || Config.config.barTypes[props.category]?.color);
+    const [previewColor, setPreviewColor] = React.useState(props.defaultPreviewColor || Config.config.barTypes["preview-" + props.category]?.color);

-    constructor(props: CategorySkipOptionsProps) {
-        super(props);
+    const selectedOption = React.useMemo(() => {
+        switch (props.selection) {
+            case CategorySkipOption.ShowOverlay:
+                return "showOverlay";
+            case CategorySkipOption.ManualSkip:
+                return "manualSkip";
+            case CategorySkipOption.AutoSkip:
+                return "autoSkip";
+            case CategorySkipOption.FallbackToDefault:
+                return "fallbackToDefault";
+            default:
+                return "disable";
+        }
+    }, [props.selection]);

-        // Setup state
-        this.state = {
-            color: props.defaultColor || Config.config.barTypes[this.props.category]?.color,
-            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color
-        };
-    }
+    const setBarColorTimeout = React.useRef<NodeJS.Timeout | null>(null);

-    render(): React.ReactElement {
-        let defaultOption = "disable";
-        // Set the default opton properly
-        for (const categorySelection of Config.config.categorySelections) {
-            if (categorySelection.name === this.props.category) {
-                switch (categorySelection.option) {
-                    case CategorySkipOption.ShowOverlay:
-                        defaultOption = "showOverlay";
-                        break;
-                    case CategorySkipOption.ManualSkip:
-                        defaultOption = "manualSkip";
-                        break;
-                    case CategorySkipOption.AutoSkip:
-                        defaultOption = "autoSkip";
-                        break;
+    return (
+        <>
+            <tr id={props.category + "OptionsRow"}
+                className={`categoryTableElement`} >
+                <td id={props.category + "OptionName"}
+                    className="categoryTableLabel">
+                        {chrome.i18n.getMessage("category_" + props.category)}
+                </td>
+
+                <td id={props.category + "SkipOption"}
+                    className="skipOption">
+                    <select
+                        className="optionsSelector"
+                        value={selectedOption}
+                        onChange={(e) => skipOptionSelected(e, props.category, props.updateSelection)}>
+                            {getCategorySkipOptions(props.category, props.isDefaultConfig)}
+                    </select>
+                </td>
+
+                {props.category !== "chapter" &&
+                    <td id={props.category + "ColorOption"}
+                        className="colorOption">
+                        <input
+                            className="categoryColorTextBox option-text-box"
+                            type="color"
+                            disabled={!props.isDefaultConfig}
+                            onChange={(event) => {
+                                if (setBarColorTimeout.current) {
+                                    clearTimeout(setBarColorTimeout.current);
+                                }
+
+                                setColor(event.currentTarget.value);
+                                Config.config.barTypes[props.category].color = event.currentTarget.value;
+
+                                // Make listener get called
+                                setBarColorTimeout.current = setTimeout(() => {
+                                    Config.config.barTypes = Config.config.barTypes;
+                                }, 50);
+                            }}
+                            value={color} />
+                    </td>
                }

-                break;
+                {!["chapter", "exclusive_access"].includes(props.category) &&
+                    <td id={props.category + "PreviewColorOption"}
+                        className="previewColorOption">
+                        <input
+                            className="categoryColorTextBox option-text-box"
+                            type="color"
+                            disabled={!props.isDefaultConfig}
+                            onChange={(event) => {
+                                if (setBarColorTimeout.current) {
+                                    clearTimeout(setBarColorTimeout.current);
+                                }
+
+                                setPreviewColor(event.currentTarget.value);
+                                Config.config.barTypes["preview-" + props.category].color = event.currentTarget.value;
+
+                                // Make listener get called
+                                setBarColorTimeout.current = setTimeout(() => {
+                                    Config.config.barTypes = Config.config.barTypes;
+                                }, 50);
+                            }}
+                            value={previewColor} />
+                    </td>
+                }
+
+            </tr>
+
+            <tr id={props.category + "DescriptionRow"}
+                className={`small-description categoryTableDescription`}>
+                    <td
+                        colSpan={2}>
+                        {chrome.i18n.getMessage("category_" + props.category + "_description")}
+                        {' '}
+                        <a href={CompileConfig.wikiLinks[props.category]} target="_blank" rel="noreferrer">
+                            {`${chrome.i18n.getMessage("LearnMore")}`}
+                        </a>
+                    </td>
+            </tr>
+            
+            <ExtraOptionComponents
+                category={props.category}
+                selectedConfigurationID={props.selectedConfigurationID}
+            />
+        </>
+    );
+}
+
+function skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>,
+        category: Category, updateSelection: (selection: CategorySkipOption) => void): void {
+    let option: CategorySkipOption;
+    switch (event.target.value) {
+        case "fallbackToDefault":
+            option = CategorySkipOption.FallbackToDefault;
+            break;
+        case "disable":
+            option = CategorySkipOption.Disabled;
+            break;
+        case "showOverlay":
+            option = CategorySkipOption.ShowOverlay;
+            break;
+        case "manualSkip":
+            option = CategorySkipOption.ManualSkip;
+            break;
+        case "autoSkip":
+            option = CategorySkipOption.AutoSkip;
+
+            if (category === "filler" && !Config.config.isVip) {
+                if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
+                    event.target.value = "disable";
+                }
            }
-        }

-        return (
-            <>
-                <tr id={this.props.category + "OptionsRow"}
-                    className={`categoryTableElement`} >
-                    <td id={this.props.category + "OptionName"}
-                        className="categoryTableLabel">
-                            {chrome.i18n.getMessage("category_" + this.props.category)}
-                    </td>
+            break;
+    }

-                    <td id={this.props.category + "SkipOption"}
-                        className="skipOption">
-                        <select
-                            className="optionsSelector"
-                            defaultValue={defaultOption}
-                            onChange={this.skipOptionSelected.bind(this)}>
-                                {this.getCategorySkipOptions()}
-                        </select>
-                    </td>
+    updateSelection(option);
+}

-                    {this.props.category !== "chapter" &&
-                        <td id={this.props.category + "ColorOption"}
-                            className="colorOption">
-                            <input
-                                className="categoryColorTextBox option-text-box"
-                                type="color"
-                                onChange={(event) => this.setColorState(event, false)}
-                                value={this.state.color} />
-                        </td>
-                    }
+function getCategorySkipOptions(category: Category, isDefaultConfig: boolean): JSX.Element[] {
+    const elements: JSX.Element[] = [];

-                    {!["chapter", "exclusive_access"].includes(this.props.category) &&
-                        <td id={this.props.category + "PreviewColorOption"}
-                            className="previewColorOption">
-                            <input
-                                className="categoryColorTextBox option-text-box"
-                                type="color"
-                                onChange={(event) => this.setColorState(event, true)}
-                                value={this.state.previewColor} />
-                        </td>
-                    }
+    let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
+    if (category === "chapter") optionNames = ["disable", "showOverlay"]
+    else if (category === "exclusive_access") optionNames = ["disable", "showOverlay"];

-                </tr>
+    if (!isDefaultConfig) {
+        optionNames = ["fallbackToDefault"].concat(optionNames);
+    }

-                <tr id={this.props.category + "DescriptionRow"}
-                    className={`small-description categoryTableDescription`}>
-                        <td
-                            colSpan={2}>
-                            {chrome.i18n.getMessage("category_" + this.props.category + "_description")}
-                            {' '}
-                            <a href={CompileConfig.wikiLinks[this.props.category]} target="_blank" rel="noreferrer">
-                                {`${chrome.i18n.getMessage("LearnMore")}`}
-                            </a>
-                        </td>
-                </tr>
-                
-                {this.getExtraOptionComponents(this.props.category)}
-
-            </>
+    for (const optionName of optionNames) {
+        elements.push(
+            <option key={optionName} value={optionName}>
+                {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(category)
+                                                                    : optionName) || chrome.i18n.getMessage(optionName)}
+            </option>
        );
    }

-    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
-        let option: CategorySkipOption;
-
-        switch (event.target.value) {
-            case "disable":
-                Config.config.categorySelections = Config.config.categorySelections.filter(
-                    categorySelection => categorySelection.name !== this.props.category);
-                return;
-            case "showOverlay":
-                option = CategorySkipOption.ShowOverlay;
-
-                break;
-            case "manualSkip":
-                option = CategorySkipOption.ManualSkip;
-
-                break;
-            case "autoSkip":
-                option = CategorySkipOption.AutoSkip;
-
-                if (this.props.category === "filler" && !Config.config.isVip) {
-                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
-                        event.target.value = "disable";
-                    }
-                }
-
-                break;
-        }
-
-        const existingSelection = Config.config.categorySelections.find(selection => selection.name === this.props.category);
-        if (existingSelection) {
-            existingSelection.option = option;
-        } else {
-            Config.config.categorySelections.push({
-                name: this.props.category,
-                option: option
-            });
-        }
-
-        Config.forceSyncUpdate("categorySelections");
-    }
-
-    getCategorySkipOptions(): JSX.Element[] {
-        const elements: JSX.Element[] = [];
-
-        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
-        if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
-        else if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
-
-        for (const optionName of optionNames) {
-            elements.push(
-                <option key={optionName} value={optionName}>
-                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category) 
-                                                                     : optionName)}
-                </option>
-            );
-        }
-
-        return elements;
-    }
-
-    setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean): void {
-        clearTimeout(this.setBarColorTimeout);
-
-        if (preview) {
-            this.setState({
-                previewColor: event.currentTarget.value
-            });
-
-            Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value;
-
-        } else {
-            this.setState({
-                color: event.currentTarget.value
-            });
-
-            Config.config.barTypes[this.props.category].color = event.currentTarget.value;
-        }
-
-        // Make listener get called
-        this.setBarColorTimeout = setTimeout(() => {
-            Config.config.barTypes = Config.config.barTypes;
-        }, 50);
-    }
-
-    getExtraOptionComponents(category: string): JSX.Element[] {
-        const result = [];
-        for (const option of this.getExtraOptions(category)) {
-            result.push(
-                <tr key={option.configKey}>
-                    <td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
-                        <ToggleOptionComponent 
-                            configKey={option.configKey} 
-                            label={option.label}
-                            style={{width: "inherit"}}
-                        />
-                    </td>
-                </tr>
-            )
-        }
-
-        return result;
-    }
-
-    getExtraOptions(category: string): ToggleOption[] {
-        switch (category) {
-            case "chapter":
-                return [{
-                    configKey: "renderSegmentsAsChapters",
-                    label: chrome.i18n.getMessage("renderAsChapters"),
-                    dontDisable: true
-                }, {
-                    configKey: "showSegmentNameInChapterBar",
-                    label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
-                    dontDisable: true
-                }, {
-                    configKey: "showAutogeneratedChapters",
-                    label: chrome.i18n.getMessage("showAutogeneratedChapters"),
-                    dontDisable: true
-                }];
-            case "music_offtopic":
-                return [{
-                    configKey: "autoSkipOnMusicVideos",
-                    label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
-                }, {
-                    configKey: "skipNonMusicOnlyOnYoutubeMusic",
-                    label: chrome.i18n.getMessage("skipNonMusicOnlyOnYoutubeMusic"),
-                }];
-            default:
-                return [];
-        }
-    }
+    return elements;
 }

-export default CategorySkipOptionsComponent;
+
+function ExtraOptionComponents(props: {category: string; selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const result = [];
+    for (const option of getExtraOptions(props.category)) {
+        result.push(
+            <ExtraOptionComponent
+                key={option.configKey}
+                option={option}
+                selectedConfigurationID={props.selectedConfigurationID}
+            />
+        )
+    }
+
+    return (
+    <>
+        {result}
+    </>);
+}
+
+export function ExtraOptionComponent({option, selectedConfigurationID}: {option: ToggleOption; selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const [value, setValue] = React.useState(getConfigurationValue(selectedConfigurationID, option.configKey));
+    React.useEffect(() => {
+        setValue(getConfigurationValue(selectedConfigurationID, option.configKey));
+    }, [selectedConfigurationID]);
+
+    return (
+        <tr key={option.configKey} className={`${option.dontShowOnCustomConfigs && selectedConfigurationID !== null ? "hidden" : ""}`}>
+            <td id={`${option.configKey}`} className="categoryExtraOptions">
+                {
+                    option.type === "toggle" ?
+                        <ToggleOptionComponent 
+                            checked={value ?? Config.config[option.configKey]}
+                            partiallyHidden={value === null}
+                            showResetButton={value !== null && selectedConfigurationID !== null}
+                            onChange={(checked) => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, checked, setValue);
+                            }}
+                            onReset={() => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, null, setValue);
+                            }}
+                            label={option.label}
+                            description={option.description}
+                            style={{width: "inherit"}}
+                        />
+                    :
+                        <NumberInputOptionComponent 
+                            value={value ?? Config.config[option.configKey]}
+                            partiallyHidden={value === null}
+                            showResetButton={value !== null && selectedConfigurationID !== null}
+                            onChange={(value) => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, value, setValue);
+                            }}
+                            onReset={() => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, null, setValue);
+                            }}
+                            label={option.label}
+                            description={option.description}
+                            style={{width: "inherit"}}
+                        />
+                }
+            </td>
+        </tr>
+    );
+}
+
+function getExtraOptions(category: string): ToggleOption[] {
+    switch (category) {
+        case "chapter":
+            return [{
+                configKey: "renderSegmentsAsChapters",
+                label: chrome.i18n.getMessage("renderAsChapters"),
+                type: "toggle",
+                dontDisable: true,
+                dontShowOnCustomConfigs: true
+            }, {
+                configKey: "showSegmentNameInChapterBar",
+                label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
+                type: "toggle",
+                dontDisable: true,
+                dontShowOnCustomConfigs: true
+            }, {
+                configKey: "showAutogeneratedChapters",
+                label: chrome.i18n.getMessage("showAutogeneratedChapters"),
+                type: "toggle",
+                dontDisable: true
+            }];
+        case "music_offtopic":
+            return [{
+                configKey: "autoSkipOnMusicVideos",
+                label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                type: "toggle"
+            }, {
+                configKey: "skipNonMusicOnlyOnYoutubeMusic",
+                label: chrome.i18n.getMessage("skipNonMusicOnlyOnYoutubeMusic"),
+                type: "toggle"
+            }];
+        default:
+            return [];
+    }
+}
--- a/src/components/options/NumberInputOptionComponent.tsx
+++ b/src/components/options/NumberInputOptionComponent.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import ResetIcon from "../../svg-icons/resetIcon";
+
+export interface NumberInputOptionProps { 
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    value: number;
+    onChange(value: number): void;
+    partiallyHidden?: boolean;
+    showResetButton?: boolean;
+    onReset?(): void;
+}
+
+export function NumberInputOptionComponent(props: NumberInputOptionProps): React.ReactElement {
+    return (
+        <div className={`sb-number-option ${props.disabled ? "disabled" : ""} ${props.partiallyHidden ? "partiallyHidden" : ""}`}>
+            <div style={props.style}>
+                <label className="number-container">
+                    <span className="optionLabel">
+                        {props.label}
+                    </span>
+                    <input id={props.label} 
+                        className="sb-number-input"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        value={props.value}
+                        disabled={props.disabled} 
+                        onChange={(e) => props.onChange(Number(e.target.value))}/>
+                </label>
+
+                {
+                    props.showResetButton &&
+                        <span className="reset-button sb-switch-label" title={chrome.i18n.getMessage("fallbackToDefault")} onClick={() => {
+                            props.onReset?.();
+                        }}>
+                            <ResetIcon/>
+                        </span>
+                }
+            </div>
+
+            {
+                props.description &&
+                    <div className="small-description">
+                        {props.description}
+                    </div>
+            }
+        </div>
+    );
+}
--- a/src/components/options/SelectOptionComponent.tsx
+++ b/src/components/options/SelectOptionComponent.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import ResetIcon from "../../svg-icons/resetIcon";
+
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+
+export interface SelectOptionComponentProps {
+    id: string;
+    onChange: (value: string) => void;
+    value: string;
+    label?: string;
+    title?: string;
+    options: SelectOption[];
+    style?: React.CSSProperties;
+    className?: string;
+    showResetButton?: boolean;
+    onReset?: () => void;
+    applyFormattingToOptions?: boolean;
+}
+
+export const SelectOptionComponent = (props: SelectOptionComponentProps) => {
+    return (
+        <div className={`sb-optionContainer ${props.className ?? ""}`} style={props.style}>
+            {
+                props.label &&
+                    <label className="sb-optionLabel" htmlFor={props.id}>
+                        {props.label}
+                    </label>
+            }
+            <select id={props.id}
+                className="sb-selector-element optionsSelector"
+                value={props.value}
+                title={props.title}
+                onChange={(e) => {
+                    props.onChange(e.target.value);
+                }}>
+                {getOptions(props.options)}
+            </select>
+
+            {
+                props.showResetButton &&
+                <div className="reset-button" onClick={() => {
+                    props.onReset?.();
+                }}>
+                    <ResetIcon/>
+                </div>
+            }
+        </div>
+    );
+};
+
+function getOptions(options: SelectOption[]): React.ReactNode[] {
+    return options.map((option) => {
+        return (
+            <option value={option.value} key={option.value}>{option.label}</option>
+        );
+    });
+}
--- a/src/components/options/ToggleOptionComponent.tsx
+++ b/src/components/options/ToggleOptionComponent.tsx
@@ -1,57 +1,50 @@
 import * as React from "react";
-
-import Config from "../../config";
+import ResetIcon from "../../svg-icons/resetIcon";

 export interface ToggleOptionProps { 
-    configKey: string;
    label: string;
+    description?: string;
    disabled?: boolean;
    style?: React.CSSProperties;
+    checked: boolean | null;
+    onChange(checked: boolean): void;
+    partiallyHidden?: boolean;
+    showResetButton?: boolean;
+    onReset?(): void;
 }

-export interface ToggleOptionState {
-    enabled: boolean;
-}
+export function ToggleOptionComponent(props: ToggleOptionProps): React.ReactElement {
+    return (
+        <div className={`sb-toggle-option ${props.disabled ? "disabled" : ""} ${props.partiallyHidden ? "partiallyHidden" : ""}`}>
+            <div className="switch-container" style={props.style}>
+                <label className="switch">
+                    <input id={props.label} 
+                        type="checkbox" 
+                        checked={props.checked} 
+                        disabled={props.disabled} 
+                        onChange={(e) => props.onChange(e.target.checked)}/>
+                    <span className="slider round"></span>
+                </label>
+                <label className="switch-label" htmlFor={props.label}>
+                    {props.label}
+                </label>

-class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOptionState> {
-
-    constructor(props: ToggleOptionProps) {
-        super(props);
-
-        // Setup state
-        this.state = {
-            enabled: Config.config[props.configKey]
-        }
-    }
-
-    render(): React.ReactElement {
-        return (
-            <div className={`sb-toggle-option ${this.props.disabled ? "disabled" : ""}`}>
-                <div className="switch-container" style={this.props.style}>
-                    <label className="switch">
-                        <input id={this.props.configKey} 
-                            type="checkbox" 
-                            checked={this.state.enabled} 
-                            disabled={this.props.disabled} 
-                            onChange={(e) => this.clicked(e)}/>
-                        <span className="slider round"></span>
-                    </label>
-                    <label className="switch-label" htmlFor={this.props.configKey}>
-                        {this.props.label}
-                    </label>
-                </div>
+                {
+                    props.showResetButton &&
+                        <div className="reset-button sb-switch-label" title={chrome.i18n.getMessage("fallbackToDefault")} onClick={() => {
+                            props.onReset?.();
+                        }}>
+                            <ResetIcon/>
+                        </div>
+                }
            </div>
-        );
-    }

-    clicked(event: React.ChangeEvent<HTMLInputElement>): void {
-        Config.config[this.props.configKey] = event.target.checked;
-
-        this.setState({
-            enabled: event.target.checked
-        });
-    }
-
-}
-
-export default ToggleOptionComponent;
+            {
+                props.description &&
+                    <div className="small-description">
+                        {props.description}
+                    </div>
+            }
+        </div>
+    );
+}
--- a/src/config.ts
+++ b/src/config.ts
@@ -11,7 +11,6 @@ interface SBConfig {
    permissions: Record<Category, Permission>;
    defaultCategory: Category;
    renderSegmentsAsChapters: boolean;
-    whitelistedChannels: string[];
    forceChannelCheck: boolean;
    minutesSaved: number;
    skipCount: number;
@@ -138,6 +137,20 @@ interface SBConfig {

 export type VideoDownvotes = { segments: { uuid: HashedValue; hidden: SponsorHideType }[]; lastAccess: number };

+export type ConfigurationID = string & { __configurationID: never };
+
+export interface CustomConfiguration {
+    name: string;
+    categorySelections: CategorySelection[];
+    showAutogeneratedChapters: boolean | null;
+    autoSkipOnMusicVideos: boolean | null;
+    skipNonMusicOnlyOnYoutubeMusic: boolean | null;
+    muteSegments: boolean | null;
+    fullVideoSegments: boolean | null;
+    manualSkipOnFullVideo: boolean | null;
+    minDuration: number | null;
+}
+
 interface SBStorage {
    /* VideoID prefixes to UUID prefixes */
    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
@@ -149,6 +162,10 @@ interface SBStorage {
    /* Contains unsubmitted segments that the user has created. */
    unsubmittedSegments: Record<string, SponsorTime[]>;

+    channelSkipProfileIDs: Record<string, ConfigurationID>;
+    skipProfileTemp: { time: number; configID: ConfigurationID } | null;
+    skipProfiles: Record<ConfigurationID, CustomConfiguration>;
+
    skipRules: AdvancedSkipRuleSet[];
 }

@@ -168,7 +185,38 @@ class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
    }
 }

-function migrateOldSyncFormats(config: SBConfig) {
+function migrateOldSyncFormats(config: SBConfig, local: SBStorage) {
+    if (config["whitelistedChannels"]) {
+        // convert to skipProfiles
+        const whitelistedChannels = config["whitelistedChannels"] as string[];
+        const skipProfileID: ConfigurationID = "default-whitelist" as ConfigurationID;
+
+        local.skipProfiles[skipProfileID] = {
+            name: chrome.i18n.getMessage("WhitelistedChannels"),
+            categorySelections: config.categorySelections
+                .filter((s) => !["exclusive_access", "chapter"].includes(s.name))
+                .map(s => ({
+                    name: s.name,
+                    option: CategorySkipOption.ShowOverlay
+            })),
+            showAutogeneratedChapters: null,
+            autoSkipOnMusicVideos: null,
+            skipNonMusicOnlyOnYoutubeMusic: null,
+            muteSegments: null,
+            fullVideoSegments: null,
+            manualSkipOnFullVideo: null,
+            minDuration: null
+        };
+        local.skipProfiles = local.skipProfiles;
+
+        for (const channelID of whitelistedChannels) {
+            local.channelSkipProfileIDs[channelID] = skipProfileID;
+        }
+        local.channelSkipProfileIDs = local.channelSkipProfileIDs;     
+
+        chrome.storage.sync.remove("whitelistedChannels");
+    }
+
    if (!config["changeChapterColor"]) {
        config.barTypes["chapter"].color = "#ffd983";
        config["changeChapterColor"] = true;
@@ -290,7 +338,6 @@ const syncDefaults = {
    permissions: {},
    defaultCategory: "chooseACategory" as Category,
    renderSegmentsAsChapters: false,
-    whitelistedChannels: [],
    forceChannelCheck: false,
    minutesSaved: 0,
    skipCount: 0,
@@ -506,7 +553,11 @@ const localDefaults = {
    alreadyInstalled: false,

    unsubmittedSegments: {},
-    skipRules: []
+    skipRules: [],
+
+    channelSkipProfileIDs: {},
+    skipProfiles: {},
+    skipProfileTemp: null
 };

 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
@@ -529,7 +580,7 @@ export function generateDebugDetails(): string {
    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
        ? "Default server address" : "Custom server address";
    output.config.invidiousInstances = output.config.invidiousInstances.length;
-    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+    output.config.skipRules = output.config.skipRules.length;

    return JSON.stringify(output, null, 4);
 }
--- a/src/content.ts
+++ b/src/content.ts
@@ -3,7 +3,6 @@ import {
    ActionType,
    Category,
    CategorySkipOption,
-    ChannelIDInfo,
    ChannelIDStatus,
    ContentContainer,
    ScheduledTime,
@@ -53,6 +52,7 @@ import { defaultPreviewTime } from "./utils/constants";
 import { onVideoPage } from "../maze-utils/src/pageInfo";
 import { getSegmentsForVideo } from "./utils/segmentData";
 import { getCategoryDefaultSelection, getCategorySelection } from "./utils/skipRule";
+import { getSkipProfileBool, getSkipProfileIDForTab, hideTooShortSegments, setCurrentTabSkipProfile } from "./utils/skipProfiles";
 import { FetchResponse, logRequest } from "../maze-utils/src/background-request-proxy";

 cleanPage();
@@ -147,9 +147,6 @@ let lastCheckVideoTime = -1;
 // To determine if a video resolution change is happening
 let firstPlay = true;

-//is this channel whitelised from getting sponsors skipped
-let channelWhitelisted = false;
-
 let previewBar: PreviewBar = null;
 // Skip to highlight button
 let skipButtonControlBar: SkipButtonControlBar = null;
@@ -228,7 +225,9 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                onMobileYouTube: isOnMobileYouTube(),
                videoID: getVideoID(),
                loopedChapter: loopedChapter?.UUID,
-                channelWhitelisted
+                channelID: getChannelIDInfo().id,
+                channelAuthor: getChannelIDInfo().author,
+                currentTabSkipProfileID: getSkipProfileIDForTab()
            });

            if (!request.updating && popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
@@ -244,11 +243,6 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                isYTTV: (document.location.host === "tv.youtube.com")
            });

-            break;
-        case "whitelistChange":
-            channelWhitelisted = request.value;
-            sponsorsLookup();
-
            break;
        case "submitTimes":
            openSubmissionMenu();
@@ -356,6 +350,10 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                warn: window["SBLogs"].warn
            });
            break;
+        case "setCurrentTabSkipProfile":
+            setCurrentTabSkipProfile(request.configID);
+            channelIDChange();
+            break;
    }

    sendResponse({});
@@ -373,7 +371,7 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
                updateVisibilityOfPlayerControlsButton()
                break;
            case "categorySelections":
-                sponsorsLookup(true, true);
+                channelIDChange();
                break;
            case "barTypes":
                setCategoryColorCSSVariables();
@@ -385,9 +383,26 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
        }
    }
 }
+function contentLocalConfigUpdateListener(changes: StorageChangesObject) {
+    for (const key in changes) {
+        switch(key) {
+            case "channelSkipProfileIDs":
+            case "skipProfiles":
+            case "skipProfileTemp":
+                channelIDChange();
+                break;
+        }
+    }
+}

-if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
-    Config.configSyncListeners.push(contentConfigUpdateListener);
+if (!window.location.href.includes("youtube.com/live_chat")) {
+    if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
+        Config.configSyncListeners.push(contentConfigUpdateListener);
+    }
+
+    if (!Config.configLocalListeners.includes(contentLocalConfigUpdateListener)) {
+        Config.configLocalListeners.push(contentLocalConfigUpdateListener);
+    }
 }

 function resetValues() {
@@ -404,7 +419,6 @@ function resetValues() {
    shownSegmentFailedToFetchWarning = false;

    videoInfo = null;
-    channelWhitelisted = false;
    lockedCategories = [];

    //empty the preview bar
@@ -466,7 +480,8 @@ function videoIDChange(): void {
    chrome.runtime.sendMessage({
        message: "videoChanged",
        videoID: getVideoID(),
-        whitelisted: channelWhitelisted
+        channelID: getChannelIDInfo().id,
+        channelAuthor: getChannelIDInfo().author
    });

    sponsorsLookup();
@@ -683,7 +698,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
    logDebug(`Ready to start skipping: ${skipInfo.index} at ${currentTime}`);
    if (skipInfo.index === -1) return;

-    if (Config.config.disableSkipping || channelWhitelisted || (getChannelIDInfo().status === ChannelIDStatus.Fetching && Config.config.forceChannelCheck)){
+    if (Config.config.disableSkipping || (getChannelIDInfo().status === ChannelIDStatus.Fetching && Config.config.forceChannelCheck)){
        return;
    }

@@ -1210,16 +1225,6 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
            sponsorTimes = receivedSegments;
            existingChaptersImported = false;

-            // Hide all submissions smaller than the minimum duration
-            if (Config.config.minDuration !== 0) {
-                for (const segment of sponsorTimes) {
-                    const duration = segment.segment[1] - segment.segment[0];
-                    if (duration > 0 && duration < Config.config.minDuration) {
-                        segment.hidden = SponsorHideType.MinimumDuration;
-                    }
-                }
-            }
-
            if (keepOldSubmissions) {
                for (const segment of oldSegments) {
                    const otherSegment = sponsorTimes.find((other) => segment.UUID === other.UUID);
@@ -1244,6 +1249,8 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
                }
            }

+            hideTooShortSegments(sponsorTimes);
+
            if (!getVideo()) {
                //there is still no video here
                await waitForVideo();
@@ -1276,7 +1283,9 @@ function notifyPopupOfSegments(): void {
        onMobileYouTube: isOnMobileYouTube(),
        videoID: getVideoID(),
        loopedChapter: loopedChapter?.UUID,
-        channelWhitelisted
+        channelID: getChannelIDInfo().id,
+        channelAuthor: getChannelIDInfo().author,
+        currentTabSkipProfileID: getSkipProfileIDForTab()
    });
 }

@@ -1304,7 +1313,7 @@ function importExistingChapters(wait: boolean) {
                    }
                }).catch(() => { importingChaptersWaiting = false; });

-            if (!Config.config.showAutogeneratedChapters) {
+            if (!getSkipProfileBool("showAutogeneratedChapters")) {
                waitFor(() => hasAutogeneratedChapters(), wait ? 15000 : 0, 400).then(() => {
                    updateActiveSegment(getCurrentTime());
                }).catch(() => { }); // eslint-disable-line @typescript-eslint/no-empty-function
@@ -1313,6 +1322,12 @@ function importExistingChapters(wait: boolean) {
    }
 }

+function handleExistingChaptersChannelChange() {
+    if (existingChaptersImported && hasAutogeneratedChapters() && !getSkipProfileBool("showAutogeneratedChapters")) {
+        sponsorTimes = sponsorTimes.filter((segment) => segment.source !== SponsorSourceType.Autogenerated);
+    }
+}
+
 async function lockedCategoriesLookup(): Promise<void> {
    const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
    try {
@@ -1382,13 +1397,6 @@ function startSkipScheduleCheckingForStartSponsors() {
            }
        }

-        const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
-        if (fullVideoSegment) {
-            waitFor(() => categoryPill).then(() => {
-                categoryPill?.setSegment(fullVideoSegment);
-            });
-        }
-
        if (startingSegmentTime !== -1) {
            startSponsorSchedule(undefined, startingSegmentTime);
        } else {
@@ -1460,20 +1468,24 @@ function updatePreviewBar(): void {
    }
 }

-//checks if this channel is whitelisted, should be done only after the channelID has been loaded
-async function channelIDChange(channelIDInfo: ChannelIDInfo) {
-    const whitelistedChannels = Config.config.whitelistedChannels;
-
-    //see if this is a whitelisted channel
-    if (whitelistedChannels != undefined &&
-            channelIDInfo.status === ChannelIDStatus.Found && whitelistedChannels.includes(channelIDInfo.id)) {
-        channelWhitelisted = true;
+function updateCategoryPill() {
+    const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
+    if (fullVideoSegment && getSkipProfileBool("fullVideoSegments")) {
+        categoryPill?.setSegment(fullVideoSegment);
+    } else {
+        categoryPill?.setVisibility(false);
    }
+}

+//checks if this channel is whitelisted, should be done only after the channelID has been loaded
+async function channelIDChange() {
    // check if the start of segments were missed
    if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();

+    hideTooShortSegments(sponsorTimes);
+    handleExistingChaptersChannelChange();
    updatePreviewBar();
+    updateCategoryPill();
    notifyPopupOfSegments();
 }

@@ -1943,9 +1955,9 @@ function shouldAutoSkip(segment: SponsorTime): boolean {
        return false;
    }

-    return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
+    return (!getSkipProfileBool("manualSkipOnFullVideo") || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
        && (getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip ||
-            (Config.config.autoSkipOnMusicVideos && canSkipNonMusic && sponsorTimes?.some((s) => s.category === "music_offtopic")
+            (getSkipProfileBool("autoSkipOnMusicVideos") && canSkipNonMusic && sponsorTimes?.some((s) => s.category === "music_offtopic")
                && segment.actionType === ActionType.Skip)
            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment))
        || isLoopedChapter(segment);
@@ -1954,7 +1966,7 @@ function shouldAutoSkip(segment: SponsorTime): boolean {
 function shouldSkip(segment: SponsorTime): boolean {
    return segment.hidden === SponsorHideType.Visible && (segment.actionType !== ActionType.Full
            && getCategorySelection(segment)?.option > CategorySkipOption.ShowOverlay)
-            || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
+            || (getSkipProfileBool("autoSkipOnMusicVideos") && sponsorTimes?.some((s) => s.category === "music_offtopic")
                && segment.actionType === ActionType.Skip)
            || isLoopedChapter(segment);
 }
@@ -2531,11 +2543,7 @@ async function sendSubmitMessage(): Promise<boolean> {
        sponsorTimesSubmitting = [];

        updatePreviewBar();
-
-        const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
-        if (fullVideoSegment) {
-            categoryPill?.setSegment(fullVideoSegment);
-        }
+        updateCategoryPill();

        return true;
    } else {
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -15,6 +15,7 @@ import { hasAutogeneratedChapters, isVisible } from "../utils/pageUtils";
 import { isVorapisInstalled } from "../utils/compatibility";
 import { isOnYTTV } from "../../maze-utils/src/video";
 import { getCategorySelection } from "../utils/skipRule";
+import { getSkipProfileBool } from "../utils/skipProfiles";

 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -131,10 +132,11 @@ class PreviewBar {
        // global chapter tooltip or duration tooltip
        // YT, Vorapis, unknown, YTTV
        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container, .yssi-slider .ys-seek-details .time-info-bar") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        const defaultTooltipSelector = ".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-tooltip-title:not(.sponsorCategoryTooltip) span, .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip), .current-time:not(.sponsorCategoryTooltip)";
        const originalTooltip = findNonEmptyElement([
-            ".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip), .current-time:not(.sponsorCategoryTooltip)",
+            defaultTooltipSelector,
            ".ytp-tooltip-progress-bar-pill-title"
-        ]);
+        ]) ?? document.querySelector(defaultTooltipSelector);
        if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;

        // Grab the tooltip from the text wrapper as the tooltip doesn't have its classes on init
@@ -185,7 +187,7 @@ class PreviewBar {
            }

            const hasAYouTubeChapterRemoved = this.hasYouTubeChapters
-                || (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters());
+                || (!getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters());
            if (hasAYouTubeChapterRemoved) {
                // Hide original tooltip if some chapter has been filtered out
                originalTooltip.style.display = "none";
@@ -461,7 +463,7 @@ class PreviewBar {
            || (!Config.config.renderSegmentsAsChapters
                && segments.every((segment) => segment.actionType !== ActionType.Chapter
                    || [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))))
-            && !(hasAutogeneratedChapters() && !Config.config.showAutogeneratedChapters)) {
+            && !(hasAutogeneratedChapters() && !getSkipProfileBool("showAutogeneratedChapters"))) {

            if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
            this.originalChapterBar.style.removeProperty("display");
@@ -488,7 +490,7 @@ class PreviewBar {
            this.chapterGroups = this.unfilteredChapterGroups;
        }

-        if (this.chapterGroups.length === 0 && !Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+        if (this.chapterGroups.length === 0 && !getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters()) {
            // Add placeholder chapter group for whole video
            this.chapterGroups = [{
                segment: [0, this.videoDuration],
@@ -890,7 +892,7 @@ class PreviewBar {
        if (!Config.config.showSegmentNameInChapterBar
                || Config.config.disableSkipping
                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0 
-                    && (Config.config.showAutogeneratedChapters || !hasAutogeneratedChapters()))) {
+                    && (getSkipProfileBool("showAutogeneratedChapters") || !hasAutogeneratedChapters()))) {
            const chaptersContainer = this.getChaptersContainer();
            if (chaptersContainer) {
                chaptersContainer.querySelector(".sponsorChapterText")?.remove();
@@ -992,7 +994,7 @@ class PreviewBar {
                } else {
                    this.chapterVote.setVisibility(false);
                }
-            } else if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+            } else if (!getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters()) {
                // Keep original hidden
                chaptersContainer.querySelector(".sponsorChapterText")?.remove();
                const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -2,6 +2,7 @@
 // Message and Response Types
 //

+import { ConfigurationID } from "./config";
 import { SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "./types";

 interface BaseMessage {
@@ -19,11 +20,6 @@ interface DefaultMessage {
        | "getLogs";
 }

-interface BoolValueMessage {
-    message: "whitelistChange";
-    value: boolean;
-}
-
 interface IsInfoFoundMessage {
    message: "isInfoFound";
    updating: boolean;
@@ -73,7 +69,12 @@ interface KeyDownMessage {
    metaKey: boolean;
 }

-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage | LoopChapterMessage);
+interface SetCurrentTabSkipProfileResponse {
+    message: "setCurrentTabSkipProfile";
+    configID: ConfigurationID | null;
+}
+
+export type Message = BaseMessage & (DefaultMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage | LoopChapterMessage | SetCurrentTabSkipProfileResponse);

 export interface IsInfoFoundMessageResponse {
    found: boolean;
@@ -83,7 +84,9 @@ export interface IsInfoFoundMessageResponse {
    onMobileYouTube: boolean;
    videoID: VideoID;
    loopedChapter: SegmentUUID | null;
-    channelWhitelisted: boolean;
+    channelID: string;
+    channelAuthor: string;
+    currentTabSkipProfileID: ConfigurationID | null;
 }

 interface GetVideoIdResponse {
@@ -153,7 +156,8 @@ export type InfoUpdatedMessage = IsInfoFoundMessageResponse & {
 export interface VideoChangedPopupMessage {
    message: "videoChanged";
    videoID: string;
-    whitelisted: boolean;
+    channelID: string;
+    channelAuthor: string;
 }

 export type PopupMessage = TimeUpdateMessage | InfoUpdatedMessage | VideoChangedPopupMessage;
--- a/src/options.ts
+++ b/src/options.ts
@@ -414,7 +414,7 @@ async function shouldHideOption(element: Element): Promise<boolean> {
 /**
 * Called when the config is updated
 */
-function optionsConfigUpdateListener(changes: StorageChangesObject) {
+function optionsConfigUpdateListener() {
    const optionsContainer = document.getElementById("options");
    const optionsElements = optionsContainer.querySelectorAll("*");

@@ -425,12 +425,6 @@ function optionsConfigUpdateListener(changes: StorageChangesObject) {
                break;
        }
    }
-
-    if (changes.categorySelections || changes.payments) {
-        for (const chooser of categoryChoosers) {
-            chooser.update();
-        }
-    }
 }

 function optionsLocalConfigUpdateListener(changes: StorageChangesObject) {
--- a/src/popup/PopupComponent.tsx
+++ b/src/popup/PopupComponent.tsx
@@ -1,16 +1,17 @@
 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 Config, { ConfigurationID, generateDebugDetails } from "../config";
+import { 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";
+import { getSkipProfileID, getSkipProfileIDForChannel, getSkipProfileIDForTab, getSkipProfileIDForTime, getSkipProfileIDForVideo, setCurrentTabSkipProfile } from "../utils/skipProfiles";
+import { SelectOptionComponent } from "../components/options/SelectOptionComponent";
+import * as Video from "../../maze-utils/src/video";

 export enum LoadingStatus {
    Loading,
@@ -28,6 +29,41 @@ export interface LoadingData {
    error?: Error | string;
 }

+type SkipProfileAction = "forJustThisVideo" | "forThisChannel" | "forThisTab" | "forAnHour" | null;
+interface SkipProfileOption {
+    name: SkipProfileAction;
+    active: () => boolean;
+}
+
+interface SegmentsLoadedProps {
+    setStatus: (status: LoadingData) => 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;
+}
+
+interface SkipProfileRadioButtonsProps {
+    selected: SkipProfileAction;
+    setSelected: (s: SkipProfileAction, updateConfig: boolean) => void;
+    disabled: boolean;
+    configID: ConfigurationID | null;
+    videoID: string;
+}
+
+interface SkipOptionActionComponentProps {
+    selected: boolean;
+    setSelected: (s: boolean) => void;
+    highlighted: boolean;
+    disabled: boolean;
+    overridden: boolean;
+    label: string;
+}
+
 let loadRetryCount = 0;

 export const PopupComponent = () => {
@@ -35,7 +71,6 @@ export const PopupComponent = () => {
        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);

@@ -49,7 +84,6 @@ export const PopupComponent = () => {
        loadSegments({
            updating: false,
            setStatus,
-            setChannelWhitelisted,
            setVideoID,
            setCurrentTime,
            setSegments,
@@ -58,7 +92,6 @@ export const PopupComponent = () => {

        setupComPort({
            setStatus,
-            setChannelWhitelisted,
            setVideoID,
            setCurrentTime,
            setSegments,
@@ -109,7 +142,6 @@ export const PopupComponent = () => {
                    loadSegments({
                        updating: true,
                        setStatus,
-                        setChannelWhitelisted,
                        setVideoID,
                        setCurrentTime,
                        setSegments,
@@ -131,54 +163,13 @@ export const PopupComponent = () => {

            {/* 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>
-                )}
+                {
+                    videoID &&
+                        <SkipProfileButton
+                            videoID={videoID}
+                            setShowForceChannelCheckWarning={setShowForceChannelCheckWarning}
+                        />
+                }
                <label id="disableExtension" htmlFor="toggleSwitch" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
                    <span className="toggleSwitchContainer-switch">
                        <input type="checkbox" 
@@ -314,19 +305,6 @@ function getVideoStatusText(status: LoadingData): string {
    }
 }

-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;

@@ -376,8 +354,10 @@ function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoa

    
    props.setVideoID(response.videoID);
+    Video.setVideoID(response.videoID as Video.VideoID);
    props.setCurrentTime(response.time);
-    props.setChannelWhitelisted(response.channelWhitelisted);
+    Video.setChanelIDInfo(response.channelID, response.channelAuthor);
+    setCurrentTabSkipProfile(response.currentTabSkipProfileID);
    props.setSegments((response.sponsorTimes || [])
        .filter((segment) => segment.source === SponsorSourceType.Server)
        .sort((a, b) => b.segment[1] - a.segment[1])
@@ -399,16 +379,13 @@ function sendMessage(request: Message): Promise<MessageResponse> {
    });
 }

-interface ComPortProps extends SegmentsLoadedProps {
-}
-
-function setupComPort(props: ComPortProps): void {
+function setupComPort(props: SegmentsLoadedProps): 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) {
+function onMessage(props: SegmentsLoadedProps, msg: PopupMessage) {
    switch (msg.message) {
        case "time":
            props.setCurrentTime(msg.time);
@@ -421,7 +398,8 @@ function onMessage(props: ComPortProps, msg: PopupMessage) {
                status: LoadingStatus.StillLoading
            });
            props.setVideoID(msg.videoID);
-            props.setChannelWhitelisted(msg.whitelisted);
+            Video.setVideoID(msg.videoID as Video.VideoID);
+            Video.setChanelIDInfo(msg.channelID, msg.channelAuthor);
            props.setSegments([]);
            break;
    }
@@ -467,3 +445,273 @@ window.addEventListener("message", async (e): Promise<void> => {
        document.head.appendChild(style);
    }
 });
+
+function SkipProfileButton(props: {videoID: string; setShowForceChannelCheckWarning: (v: boolean) => void}): JSX.Element {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const channelSkipProfileSet = getSkipProfileIDForChannel() !== null;
+    const skipProfileSet = getSkipProfileID() !== null;
+
+    React.useEffect(() => {
+        setMenuOpen(false);
+    }, [props.videoID]);
+
+    return (
+        <>
+            <label id="skipProfileButton" 
+                    htmlFor="skipProfileToggle"
+                    className="toggleSwitchContainer sbControlsMenu-item"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                        if (menuOpen && !Config.config.forceChannelCheck && getSkipProfileID() !== null) {
+                            props.setShowForceChannelCheckWarning(true);
+                        }
+
+                        setMenuOpen(!menuOpen);
+                    }}>
+                <svg viewBox="0 0 24 24" width="23" height="23" className={"SBWhitelistIcon sbControlsMenu-itemIcon " + (menuOpen ? " rotated" : "")}>
+                    <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+                </svg>
+                <span id="whitelistChannel" className={!(!menuOpen && !channelSkipProfileSet && !skipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("addChannelToSkipProfile")}
+                </span>
+                <span id="whitelistChannel" className={!(!menuOpen && channelSkipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("editChannelsSkipProfile")}
+                </span>
+                <span id="whitelistChannel" className={!(!menuOpen && !channelSkipProfileSet && skipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("editActiveSkipProfile")}
+                </span>
+                <span id="unwhitelistChannel" className={!menuOpen ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("closeSkipProfileMenu")}
+                </span>
+            </label>
+
+            {
+                props.videoID &&
+                <SkipProfileMenu open={menuOpen} videoID={props.videoID} />
+            }
+        </>
+    );
+}
+
+const skipProfileOptions: SkipProfileOption[] = [{
+        name: "forAnHour",
+        active: () => getSkipProfileIDForTime() !== null
+    }, {
+        name: "forThisTab",
+        active: () => getSkipProfileIDForTab() !== null
+    }, {
+        name: "forJustThisVideo",
+        active: () => getSkipProfileIDForVideo() !== null
+    }, {
+        name: "forThisChannel",
+        active: () => getSkipProfileIDForChannel() !== null
+    }];
+
+function SkipProfileMenu(props: {open: boolean; videoID: string}): JSX.Element {
+    const [configID, setConfigID] = React.useState<ConfigurationID | null>(null);
+    const [selectedSkipProfileAction, setSelectedSkipProfileAction] = React.useState<SkipProfileAction>(null);
+    const [allSkipProfiles, setAllSkipProfiles] = React.useState(Object.entries(Config.local!.skipProfiles));
+
+    React.useEffect(() => {
+        if (props.open) {
+            const channelInfo = Video.getChannelIDInfo();
+            if (!channelInfo) {
+                if (Video.isOnYTTV()) {
+                    alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
+                } else {
+                    alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+                }
+            }
+        }
+
+        setConfigID(getSkipProfileID());
+    }, [props.open, props.videoID]);
+
+    React.useEffect(() => {
+        Config.configLocalListeners.push(() => {
+            setAllSkipProfiles(Object.entries(Config.local!.skipProfiles));
+        });
+    }, []);
+
+    return (
+        <div id="skipProfileMenu" className={`${!props.open ? " hidden" : ""}`}
+            aria-label={chrome.i18n.getMessage("SkipProfileMenu")}>
+            <div style={{position: "relative"}}>
+                <SelectOptionComponent
+                    id="sbSkipProfileSelection"
+                    title={chrome.i18n.getMessage("SelectASkipProfile")}
+                    onChange={(value) => {
+                        if (value === "new") {
+                            chrome.runtime.sendMessage({ message: "openConfig", hash: "newProfile" });
+                            return;
+                        }
+                        
+                        const configID = value === "null" ? null : value as ConfigurationID;
+                        setConfigID(configID);
+                        if (configID === null) {
+                            setSelectedSkipProfileAction(null);
+                        }
+
+                        if (selectedSkipProfileAction) {
+                            updateSkipProfileSetting(selectedSkipProfileAction, configID);
+
+                            if (configID === null) {
+                                for (const option of skipProfileOptions) {
+                                    if (option.name !== selectedSkipProfileAction && option.active()) {
+                                        updateSkipProfileSetting(option.name, null);
+                                    }
+                                }
+                            }
+                        }
+                    }}
+                    value={configID ?? "null"}
+                    options={[{
+                        value: "null",
+                        label: chrome.i18n.getMessage("DefaultConfiguration")
+                    }].concat(allSkipProfiles.map(([key, value]) => ({
+                        value: key,
+                        label: value.name
+                    }))).concat([{
+                        value: "new",
+                        label: chrome.i18n.getMessage("CreateNewConfiguration")
+                    }])}
+                />
+
+                <SkipProfileRadioButtons
+                    selected={selectedSkipProfileAction}
+                    setSelected={(s, updateConfig) => {
+                        if (updateConfig) {
+                            if (s === null) {
+                                updateSkipProfileSetting(selectedSkipProfileAction, null);
+                            } else {
+                                updateSkipProfileSetting(s, configID);
+                            }
+                        } else if (s !== null) {
+                            setConfigID(getSkipProfileID());
+                        }
+
+                        setSelectedSkipProfileAction(s);
+                    }}
+                    disabled={configID === null}
+                    configID={configID}
+                    videoID={props.videoID}
+                />
+            </div>
+        </div>
+    );
+}
+
+function SkipProfileRadioButtons(props: SkipProfileRadioButtonsProps): JSX.Element {
+    const result: JSX.Element[] = [];
+
+    React.useEffect(() => {
+        if (props.configID === null) {
+            props.setSelected(null, false);
+        } else {
+            for (const option of skipProfileOptions) {
+                if (option.active()) {
+                    if (props.selected !== option.name) {
+                        props.setSelected(option.name, false);
+                    }
+
+                    return;
+                }
+            }
+        }
+    }, [props.configID, props.videoID, props.selected]);
+
+    let alreadySelected = false;
+    for (const option of skipProfileOptions) {
+        const highlighted = option.active() && props.selected !== option.name;
+        const overridden = !highlighted && alreadySelected;
+        result.push(
+            <SkipOptionActionComponent
+                highlighted={highlighted}
+                label={chrome.i18n.getMessage(`skipProfile_${option.name}`)}
+                selected={props.selected === option.name}
+                overridden={overridden}
+                disabled={props.disabled || overridden}
+                key={option.name}
+                setSelected={(s) => {
+                    props.setSelected(s ? option.name : null, true);
+                }}/>
+        );
+
+        if (props.selected === option.name) {
+            alreadySelected = true;
+        }
+    }
+
+    return <div id="skipProfileActions">
+        {result}
+    </div>
+}
+
+function SkipOptionActionComponent(props: SkipOptionActionComponentProps): JSX.Element {
+    let title = "";
+    if (props.selected) {
+        title = chrome.i18n.getMessage("clickToNotApplyThisProfile");
+    } else if ((props.highlighted && !props.disabled) || props.overridden) {
+        title = chrome.i18n.getMessage("skipProfileBeingOverriddenByHigherPriority");
+    } else if (!props.highlighted && !props.disabled) {
+        title = chrome.i18n.getMessage("clickToApplyThisProfile");
+    } else if (props.disabled) {
+        title = chrome.i18n.getMessage("selectASkipProfileFirst");
+    }
+
+    return (
+        <div className={`skipOptionAction ${props.selected ? "selected" : ""} ${props.highlighted ? "highlighted" : ""} ${props.disabled ? "disabled" : ""}`}
+            title={title}
+            role="button"
+            tabIndex={0}
+            aria-pressed={props.selected}
+            onClick={() => {
+                // Need to uncheck or disable a higher priority option first
+                if (!props.disabled && !props.highlighted) {
+                    props.setSelected(!props.selected);
+                }
+            }}>
+            {props.label}
+        </div>
+    );
+}
+
+function updateSkipProfileSetting(action: SkipProfileAction, configID: ConfigurationID | null) {
+    switch (action) {
+        case "forAnHour":
+            Config.local!.skipProfileTemp = configID ? { time: Date.now(), configID } : null;
+            break;
+        case "forThisTab":
+            setCurrentTabSkipProfile(configID);
+
+            sendMessage({
+                message: "setCurrentTabSkipProfile",
+                configID
+            });
+            break;
+        case "forJustThisVideo":
+            if (configID) {
+                Config.local!.channelSkipProfileIDs[Video.getVideoID()!] = configID;
+            } else {
+                delete Config.local!.channelSkipProfileIDs[Video.getVideoID()!];
+            }
+
+            Config.forceLocalUpdate("channelSkipProfileIDs");
+            break;
+        case "forThisChannel": {
+            const channelInfo = Video.getChannelIDInfo();
+
+            if (configID) {
+                Config.local!.channelSkipProfileIDs[channelInfo.id] = configID;
+                delete Config.local!.channelSkipProfileIDs[channelInfo.author];
+            } else {
+                delete Config.local!.channelSkipProfileIDs[channelInfo.id];
+                delete Config.local!.channelSkipProfileIDs[channelInfo.author];
+            }
+
+            Config.forceLocalUpdate("channelSkipProfileIDs");
+            break;
+        }
+    }
+}
--- a/src/popup/SegmentListComponent.tsx
+++ b/src/popup/SegmentListComponent.tsx
@@ -28,6 +28,18 @@ enum SegmentListTab {
    Chapter
 }

+interface SegmentWithNesting extends SponsorTime {
+    innerChapters?: (SegmentWithNesting|SponsorTime)[];
+}
+
+function isSegment(segment) {
+    return segment.actionType !== ActionType.Chapter;
+}
+
+function isChapter(segment) {
+    return segment.actionType === ActionType.Chapter;
+}
+
 export const SegmentListComponent = (props: SegmentListComponentProps) => {
    const [tab, setTab] = React.useState(SegmentListTab.Segments);
    const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
@@ -42,21 +54,61 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
        }
    }, []);

-    React.useEffect(() => {
-        setTab(SegmentListTab.Segments);
-    }, [props.videoID]);
+    const [hasSegments, hasChapters] = React.useMemo(() => {
+        const hasSegments = Boolean(props.segments.find(isSegment))
+        const hasChapters = Boolean(props.segments.find(isChapter))
+        return [hasSegments, hasChapters];
+    }, [props.segments]);

-    const tabFilter = (segment: SponsorTime) => {
-        if (tab === SegmentListTab.Chapter) {
-            return segment.actionType === ActionType.Chapter;
+    React.useEffect(() => {
+        if (hasSegments){
+            setTab(SegmentListTab.Segments);
        } else {
-            return segment.actionType !== ActionType.Chapter;
+            setTab(SegmentListTab.Chapter);
        }
-    };
+    }, [props.videoID, hasSegments]);
+
+    const segmentsWithNesting = React.useMemo(() => {
+        const result: SegmentWithNesting[] = [];
+        const chapterStack: SegmentWithNesting[] = [];
+        for (let seg of props.segments) {
+            seg = {...seg};
+            // non-chapter, do not nest
+            if (seg.actionType !== ActionType.Chapter) {
+                result.push(seg);
+                continue;
+            }
+            // traverse the stack
+            while (chapterStack.length !== 0) {
+                // where's Array.prototype.at() :sob:
+                const lastChapter = chapterStack[chapterStack.length - 1];
+                // we know lastChapter.startTime <= seg.startTime, as content.ts sorts these
+                // so only compare endTime - if new ends before last, new is nested inside last
+                if (lastChapter.segment[1] >= seg.segment[1]) {
+                    lastChapter.innerChapters ??= [];
+                    lastChapter.innerChapters.push(seg);
+                    chapterStack.push(seg);
+                    break;
+                }
+                // last did not match, pop it off the stack
+                chapterStack.pop();
+            }
+            // chapter stack not empty = we found a place for the chapter
+            if (chapterStack.length !== 0) {
+                continue;
+            }
+            // push the chapter to the top-level list and to the stack
+            result.push(seg);
+            chapterStack.push(seg);
+
+        }
+        return result;
+    }, [props.segments])
+

    return (
        <div id="issueReporterContainer">
-            <div id="issueReporterTabs" className={props.segments && props.segments.find(s => s.actionType === ActionType.Chapter) ? "" : "hidden"}>
+            <div id="issueReporterTabs" className={hasSegments && hasChapters ? "" : "hidden"}>
                <span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
                    setTab(SegmentListTab.Segments);
                }}>
@@ -74,16 +126,16 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
                        sendMessage: props.sendMessage
                    })}>
                {
-                    props.segments.map((segment) => (
+                    segmentsWithNesting.map((segment) => (
                        <SegmentListItem
                            key={segment.UUID}
                            videoID={props.videoID}
                            segment={segment}
                            currentTime={props.currentTime}
                            isVip={isVip}
-                            startingLooped={props.loopedChapter === segment.UUID}
+                            loopedChapter={props.loopedChapter} // UUID instead of boolean so it can be passed down to nested chapters 

-                            tabFilter={tabFilter}
+                            tabFilter={tab === SegmentListTab.Chapter ? isChapter : isSegment}
                            sendMessage={props.sendMessage}
                        />
                    ))
@@ -99,197 +151,258 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
    );
 };

-function SegmentListItem({ segment, videoID, currentTime, isVip, startingLooped, tabFilter, sendMessage }: {
-    segment: SponsorTime;
+function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
+    segment: SegmentWithNesting;
    videoID: VideoID;
    currentTime: number;
    isVip: boolean;
-    startingLooped: boolean;
+    loopedChapter: SegmentUUID;
    
    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);
+    const [hidden, setHidden] = React.useState(segment.hidden ?? SponsorHideType.Visible); // undefined ?? undefined lol
+    const [isLooped, setIsLooped] = React.useState(loopedChapter === segment.UUID);

-    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") + ")";
+    // Update internal state if the hidden property of the segment changes
+    React.useEffect(() => {
+        setHidden(segment.hidden ?? SponsorHideType.Visible);
+    }, [segment.hidden])
+
+    let extraInfo: string;
+    switch (hidden) {
+        case SponsorHideType.Visible:
+            extraInfo = "";
+            break;
+        case SponsorHideType.Downvoted:
+            extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
+            break;
+        case SponsorHideType.MinimumDuration:
+            extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
+            break;
+        case SponsorHideType.Hidden:
+            extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
+            break;
+        default:
+            // hidden satisfies never; // need to upgrade TS
+            console.warn(`[SB] Unhandled variant of SponsorHideType in SegmentListItem: ${hidden}`);
+            extraInfo = "";
    }

    return (
-        <details data-uuid={segment.UUID}
-                onDoubleClick={() => skipSegment({
-                    segment,
-                    sendMessage
-                })}
-                onMouseEnter={() => {
-                    selectSegment({
+        <div className={"segmentWrapper " + (!tabFilter(segment) ? "hidden" : "")}>
+            <details data-uuid={segment.UUID}
+                    onDoubleClick={() => skipSegment({
                        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,
+                    })}
+                    onMouseEnter={() => {
+                        selectSegment({
+                            segment,
                            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);
-
-                        try {
-                            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);
-                                } else {
-                                    logRequest(segmentIDData, "SB", "segment UUID resolution");
-                                }
-                            }
-                        } catch (e) {
-                            console.error("[SB] Caught error while attempting to resolve and copy segment UUID", e);
-                        } finally {
-                            stopAnimation();
+                    }}
+                    className={"votingButtons"}
+                    >
+                <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>

-                    }}/>
-                {
-                    segment.actionType === ActionType.Chapter &&
+                    <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={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
+                        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);
+
+                            try {
+                                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);
+                                    } else {
+                                        logRequest(segmentIDData, "SB", "segment UUID resolution");
+                                    }
+                                }
+                            } catch (e) {
+                                console.error("[SB] Caught error while attempting to resolve and copy segment UUID", e);
+                            } finally {
+                                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(hidden)) &&
+                        <img
+                            className="voteButton"
+                            title={chrome.i18n.getMessage("hideSegment")}
+                            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();
+
+                                const newState = hidden === SponsorHideType.Hidden ? SponsorHideType.Visible : SponsorHideType.Hidden;
+                                setHidden(newState);
+                                sendMessage({
+                                    message: "hideSegment",
+                                    type: newState,
+                                    UUID: segment.UUID
                                });
-                            } else {
-                                loopChapter({
+                            }}/>
+                    }
+                    {
+                        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
                                });
-                            }
-
-                            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={chrome.i18n.getMessage("hideSegment")}
-                        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>
+
+                <div className={"sponsorTimesVoteStatusContainer " + (voteMessage ? "" : "hidden")}>
+                    <div className="sponsorTimesThanksForVotingText">
+                        {voteMessage}
+                    </div>
+                </div>
+            </details>
+
+            {
+                segment.innerChapters
+                && <InnerChapterList
+                    chapters={segment.innerChapters}
+                    videoID={videoID}
+                    currentTime={currentTime}
+                    isVip={isVip}
+                    loopedChapter={loopedChapter}
+                    tabFilter={tabFilter}
+                    sendMessage={sendMessage}
+                />
+            }
+        </div>
    );
 }

+function InnerChapterList({ chapters, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
+    chapters: (SegmentWithNesting)[];
+    videoID: VideoID;
+    currentTime: number;
+    isVip: boolean;
+    loopedChapter: SegmentUUID;
+
+    tabFilter: (segment: SponsorTime) => boolean;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}) {
+    return <details className="innerChapterList" open>
+        <summary
+            onClick={(e) => {
+                e.currentTarget.firstChild.textContent = (e.currentTarget.parentElement as HTMLDetailsElement).open ? chrome.i18n.getMessage("expandChapters").replace("{0}", String(chapters.length)) : chrome.i18n.getMessage("collapseChapters");
+            }}>
+            {chrome.i18n.getMessage("collapseChapters")}
+        </summary>
+        <div className="innerChaptersContainer">
+            {
+                chapters.map((chapter) => {
+                    return <SegmentListItem
+                        key={chapter.UUID}
+                        videoID={videoID}
+                        segment={chapter}
+                        currentTime={currentTime}
+                        isVip={isVip}
+                        loopedChapter={loopedChapter}
+
+                        tabFilter={tabFilter}
+                        sendMessage={sendMessage}
+                    />
+                })
+            }
+        </div>
+    </details>
+}
+
 async function vote(props: {
    type: number;
    UUID: SegmentUUID;
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@@ -1,24 +1,16 @@
 import * as React from "react";
 import { createRoot } from 'react-dom/client';

-import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
+import { CategoryChooserComponent } from "../components/options/CategoryChooserComponent";

 class CategoryChooser {

-    ref: React.RefObject<CategoryChooserComponent>;
-
    constructor(element: Element) {
-        this.ref = React.createRef();
-
        const root = createRoot(element);
        root.render(
-            <CategoryChooserComponent ref={this.ref} />
+            <CategoryChooserComponent />
        );
    }
-
-    update(): void {
-        this.ref.current?.forceUpdate();
-    }
 }

 export default CategoryChooser;
--- a/src/render/CategoryPill.tsx
+++ b/src/render/CategoryPill.tsx
@@ -121,7 +121,7 @@ export class CategoryPill {
    async setSegment(segment: SponsorTime): Promise<void> {
        await waitFor(() => this.ref.current);

-        if (this.ref.current?.state?.segment !== segment) {
+        if (this.ref.current?.state?.segment !== segment || !this.ref.current?.state?.show) {
            const newState = {
                segment,
                show: true,
--- a/src/svg-icons/resetIcon.tsx
+++ b/src/svg-icons/resetIcon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface AddIconProps {
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const ResetIcon = ({
+  className = "",
+  style = {},
+  onClick
+}: AddIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    onClick={onClick} >
+    <path
+      d="M 23.993883,23.993883 H 0.006117 V 0.006117 h 23.987766 z"
+      fill="none"
+      id="path2"
+      style={{strokeWidth: 0.99949}} />
+    <path
+      d="m 3.508834,3.5213414 c -2.1778668,2.1778667 -3.52964574,5.1668007 -3.52964574,8.4861686 0,6.638738 5.37707764,12.000795 12.01581474,12.000795 6.638737,0 12.015814,-5.362057 12.015814,-12.000795 0,-5.6023732 -3.830041,-10.273521 -9.011861,-11.61028034 V 3.5213414 c 3.499607,1.2316209 6.007907,4.5660093 6.007907,8.4861686 0,4.971544 -4.040317,9.011861 -9.01186,9.011861 -4.9715438,0 -9.0118611,-4.040317 -9.0118611,-9.011861 0,-2.4932821 1.0363647,-4.7162068 2.6735186,-6.3383421 L 10.493026,10.505534 V -0.00830443 H -0.02081174 Z"
+      id="path4"
+      style={{strokeWidth: 1.50198}} />
+  </svg>
+);
+
+export default ResetIcon;
--- a/src/types.ts
+++ b/src/types.ts
@@ -30,6 +30,7 @@ export interface VideoDurationResponse {
 }

 export enum CategorySkipOption {
+    FallbackToDefault = -2,
    Disabled = -1,
    ShowOverlay,
    ManualSkip,
--- a/src/utils/pageUtils.ts
+++ b/src/utils/pageUtils.ts
@@ -1,6 +1,6 @@
 import { ActionType, Category, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
-import Config from "../config";
+import { getSkipProfileBool } from "./skipProfiles";

 export function getControls(): HTMLElement {
    const controlsSelectors = [
@@ -70,7 +70,7 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
    if (title?.textContent?.includes("Key moment")) return [];

    const autogenerated = hasAutogeneratedChapters();
-    if (!Config.config.showAutogeneratedChapters && autogenerated) return [];
+    if (!getSkipProfileBool("showAutogeneratedChapters") && autogenerated) return [];

    const chapters: SponsorTime[] = [];
    // .ytp-timed-markers-container indicates that key-moments are present, which should not be divided
--- a/src/utils/segmentData.ts
+++ b/src/utils/segmentData.ts
@@ -2,7 +2,7 @@ import { DataCache } from "../../maze-utils/src/cache";
 import { getHash, HashedValue } from "../../maze-utils/src/hash";
 import Config, {  } from "../config";
 import * as CompileConfig from "../../config.json";
-import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
+import { ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getHashParams } from "./pageUtils";
 import { asyncRequestToServer } from "./requests";
 import { extensionUserAgent } from "../../maze-utils/src";
@@ -71,12 +71,9 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
    });

    if (response.ok) {
-        const enabledActionTypes = getEnabledActionTypes();
-
        const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
                    ?.filter((video) => video.videoID === videoID)
                    ?.map((video) => video.segments)?.[0]
-                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType))
                    ?.map((segment) => ({
                        ...segment,
                        source: SponsorSourceType.Server
@@ -95,23 +92,12 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
            // Setup with null data
            segmentDataCache.setupCache(videoID);
        }
+    } else if (response.status !== 404) {
+        logRequest(response, "SB", "skip segments");
    }
-    if (response.status !== 404) logRequest(response, "SB", "skip segments");

    return {
        segments: null,
        status: response.status
    };
-}
-
-function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
-    const actionTypes = [ActionType.Skip, ActionType.Poi, ActionType.Chapter];
-    if (Config.config.muteSegments) {
-        actionTypes.push(ActionType.Mute);
-    }
-    if (Config.config.fullVideoSegments || forceFullVideo) {
-        actionTypes.push(ActionType.Full);
-    }
-
-    return actionTypes;
-}
+}
--- a/src/utils/skipProfiles.ts
+++ b/src/utils/skipProfiles.ts
@@ -0,0 +1,97 @@
+import { getChannelIDInfo, getVideoID } from "../../maze-utils/src/video";
+import Config, { ConfigurationID, CustomConfiguration } from "../config";
+import { SponsorHideType, SponsorTime } from "../types";
+
+let currentTabSkipProfile: ConfigurationID = null;
+
+export function getSkipProfileIDForTime(): ConfigurationID | null {
+    if (Config.local.skipProfileTemp !== null && Config.local.skipProfileTemp.time > Date.now() - 60 * 60 * 1000) {
+        return Config.local.skipProfileTemp.configID;
+    } else {
+        return null;
+    }
+}
+
+export function getSkipProfileIDForTab(): ConfigurationID | null {
+    return currentTabSkipProfile;
+}
+
+export function setCurrentTabSkipProfile(configID: ConfigurationID | null) {
+    currentTabSkipProfile = configID ?? null;
+}
+
+export function getSkipProfileIDForVideo(): ConfigurationID | null {
+    return Config.local.channelSkipProfileIDs[getVideoID()] ?? null;
+}
+
+export function getSkipProfileIDForChannel(): ConfigurationID | null {
+    const channelInfo = getChannelIDInfo();
+
+    if (!channelInfo) {
+        return null;
+    }
+
+    return Config.local.channelSkipProfileIDs[channelInfo.id]
+        ?? Config.local.channelSkipProfileIDs[channelInfo.author]
+       ?? null;
+}
+
+export function getSkipProfileID(): ConfigurationID | null {
+    const configID =
+        getSkipProfileIDForTime()
+        ?? getSkipProfileIDForTab()
+        ?? getSkipProfileIDForVideo()
+        ?? getSkipProfileIDForChannel();
+    
+    return configID ?? null;
+}
+
+export function getSkipProfile(): CustomConfiguration | null {
+    const configID = getSkipProfileID();
+    
+    if (configID) {
+        return Config.local.skipProfiles[configID];
+    }
+
+    return null;
+}
+
+type SkipProfileBoolKey =
+    "showAutogeneratedChapters"
+    | "autoSkipOnMusicVideos"
+    | "skipNonMusicOnlyOnYoutubeMusic"
+    | "muteSegments"
+    | "fullVideoSegments"
+    | "manualSkipOnFullVideo";
+
+export function getSkipProfileBool(key: SkipProfileBoolKey): boolean {
+    return getSkipProfileValue<boolean>(key);
+}
+
+export function getSkipProfileNum(key: "minDuration"): number {
+    return getSkipProfileValue<number>(key);
+}
+
+function getSkipProfileValue<T>(key: keyof CustomConfiguration): T {
+    const profile = getSkipProfile();
+    if (profile && profile[key] !== null) {
+        return profile[key] as T;
+    }
+
+    return Config.config[key];
+}
+
+export function hideTooShortSegments(sponsorTimes: SponsorTime[]) {
+    const minDuration = getSkipProfileNum("minDuration");
+
+    if (minDuration !== 0) {
+        for (const segment of sponsorTimes) {
+            const duration = segment.segment[1] - segment.segment[0];
+            if (duration > 0 && duration < minDuration && (segment.hidden === SponsorHideType.Visible || SponsorHideType.MinimumDuration)) {
+                segment.hidden = SponsorHideType.MinimumDuration;
+            } else if (segment.hidden === SponsorHideType.MinimumDuration) {
+                segment.hidden = SponsorHideType.Visible;
+            }
+        }
+    }
+}
--- a/src/utils/skipRule.ts
+++ b/src/utils/skipRule.ts
@@ -2,6 +2,7 @@ import { getCurrentPageTitle } from "../../maze-utils/src/elements";
 import { getChannelIDInfo, getVideoDuration } from "../../maze-utils/src/video";
 import Config from "../config";
 import { CategorySelection, CategorySkipOption, SponsorSourceType, SponsorTime } from "../types";
+import { getSkipProfile, getSkipProfileBool } from "./skipProfiles";
 import { VideoLabelsCacheData } from "./videoLabels";

 export interface Permission {
@@ -53,12 +54,28 @@ export interface AdvancedSkipRuleSet {
 }

 export function getCategorySelection(segment: SponsorTime | VideoLabelsCacheData): CategorySelection {
+    // First check skip rules
    for (const ruleSet of Config.local.skipRules) {
        if (ruleSet.rules.every((rule) => isSkipRulePassing(segment, rule))) {
            return { name: segment.category, option: ruleSet.skipOption } as CategorySelection;
        }
    }

+    // Action type filters
+    if ("actionType" in segment && (segment as SponsorTime).actionType === "mute" && !getSkipProfileBool("muteSegments")) {
+        return { name: segment.category, option: CategorySkipOption.Disabled } as CategorySelection;
+    }
+
+    // Then check skip profile
+    const profile = getSkipProfile();
+    if (profile) {
+        const profileSelection = profile.categorySelections.find(selection => selection.name === segment.category);
+        if (profileSelection) {
+            return profileSelection;
+        }
+    }
+
+    // Then fallback to default
    for (const selection of Config.config.categorySelections) {
        if (selection.name === segment.category) {
            return selection;
@@ -114,10 +131,8 @@ function getSkipRuleValue(segment: SponsorTime | VideoLabelsCacheData, rule: Adv
                    return undefined;
            }
        case SkipRuleAttribute.ChannelID:
-            getChannelIDInfo()
            return getChannelIDInfo().id;
        case SkipRuleAttribute.ChannelName:
-            getChannelIDInfo()
            return getChannelIDInfo().author;
        case SkipRuleAttribute.VideoDuration:
            return getVideoDuration();
--- a/src/utils/thumbnails.ts
+++ b/src/utils/thumbnails.ts
@@ -1,9 +1,10 @@
-import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
+import { extractVideoID, isOnInvidious } from "../../maze-utils/src/video";
 import Config from "../config";
 import { getHasStartSegment, getVideoLabel } from "./videoLabels";
 import { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
 import { VideoID } from "../types";
 import { getSegmentsForVideo } from "./segmentData";
+import { onMobile } from "../../maze-utils/src/pageInfo";

 export async function handleThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
    await Promise.all(thumbnails.map((t) => {
@@ -18,7 +19,7 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
        return null;
    }
    
-    const videoID = extractVideoID(thumbnail);
+    const videoID = await extractVideoIDFromElement(thumbnail);
    if (!videoID) {
        hideThumbnailLabel(thumbnail);
        return null;
@@ -61,7 +62,7 @@ function thumbnailHoverListener(e: MouseEvent) {
    let fetched = false;
    const preFetch = async () => {
        fetched = true;
-        const videoID = extractVideoID(thumbnail);
+        const videoID = await extractVideoIDFromElement(thumbnail);
        if (videoID && await getHasStartSegment(videoID)) {
            void getSegmentsForVideo(videoID, false);
        }
@@ -84,18 +85,28 @@ function thumbnailHoverListener(e: MouseEvent) {
 function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {
    if (isOnInvidious()) {
        return thumbnail.parentElement as HTMLAnchorElement | null;
-    } else if (thumbnail.nodeName.toLowerCase() === "yt-thumbnail-view-model") {
-        return thumbnail.closest("yt-lockup-view-model")?.querySelector("a.yt-lockup-metadata-view-model-wiz__title");
+    } else if (!onMobile()) {
+        const link = thumbnail.querySelector("a#thumbnail, a.reel-item-endpoint, a.yt-lockup-metadata-view-model__title, a.yt-lockup-metadata-view-model__title-link, a.yt-lockup-view-model__content-image, a.yt-lockup-metadata-view-model-wiz__title") as HTMLAnchorElement;
+        if (link) {
+            return link;
+        } else if (thumbnail.nodeName === "YTD-HERO-PLAYLIST-THUMBNAIL-RENDERER"
+            || thumbnail.nodeName === "YT-THUMBNAIL-VIEW-MODEL"
+        ) {
+            return thumbnail.closest("a") as HTMLAnchorElement;
+        } else {
+            return null;
+        }
    } else {
-        return thumbnail.querySelector("#thumbnail");
+        // Big thumbnails, compact thumbnails, shorts, channel feature, playlist header
+        return thumbnail.querySelector("a.media-item-thumbnail-container, a.compact-media-item-image, a.reel-item-endpoint, :scope > a, .amsterdam-playlist-thumbnail-wrapper > a") as HTMLAnchorElement;
    }
 }

-function extractVideoID(thumbnail: HTMLImageElement): VideoID | null {
+async function extractVideoIDFromElement(thumbnail: HTMLImageElement): Promise<VideoID | null> {
    const link = getLink(thumbnail);
    if (!link || link.nodeName !== "A" || !link.href) return null; // no link found

-    return parseYouTubeVideoIDFromURL(link.href)?.videoID;
+    return await extractVideoID(link);
 }

 function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {
--- a/tsconfig-production.json
+++ b/tsconfig-production.json
@@ -5,7 +5,7 @@
        "noImplicitAny": false,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
-        "sourceMap": false,
+        "sourceMap": true,
        "outDir": "dist/js",
        "noEmitOnError": false,
        "typeRoots": [ "node_modules/@types" ],
@@ -20,4 +20,4 @@
    "include": [
        "src/**/*"
    ]
-}
+}
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -189,7 +189,8 @@ module.exports = env => {
            new BuildManifest({
                browser: env.browser,
                pretty: env.mode === "production",
-                stream: env.stream
+                stream: env.stream,
+                autoupdate: env.autoupdate,
            }),
            new configDiffPlugin()
        ],
@@ -200,4 +201,4 @@ module.exports = env => {
        }

    };
-};
+};
--- a/webpack/webpack.manifest.js
+++ b/webpack/webpack.manifest.js
@@ -23,10 +23,13 @@ const schema = {
        pretty: {
            type: 'boolean'
        },
-        steam: {
+        stream: {
            type: 'string'
+        },
+        autoupdate: {
+            type: 'boolean',
        }
-    }  
+    }
 };

 class BuildManifest {
@@ -39,6 +42,7 @@ class BuildManifest {
    apply() {
        const distFolder = path.resolve(__dirname, "../dist/");
        const distManifestFile = path.resolve(distFolder, "manifest.json");
+        const [owner, repo_name] = (process.env.GITHUB_REPOSITORY ?? "ajayyy/SponsorBlock").split("/");

        // Add missing manifest elements
        if (this.options.browser.toLowerCase() === "firefox") {
@@ -62,6 +66,10 @@ class BuildManifest {
            }
        }

+        if (this.options.autoupdate === true && this.options.browser.toLowerCase() === "firefox") {
+            manifest.browser_specific_settings.gecko.update_url = `https://${owner.toLowerCase()}.github.io/${repo_name}/updates.json`;
+        }
+
        let result = JSON.stringify(manifest);
        if (this.options.pretty) result = JSON.stringify(manifest, null, 2);

@@ -86,4 +94,4 @@ function mergeObjects(object1, object2) {
    }
 }

-module.exports = BuildManifest;
+module.exports = BuildManifest;
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@@ -1,12 +1,40 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { SourceMapDevToolPlugin } = require('webpack');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

-module.exports = env => {
+async function createGHPSourceMapURL(env) {
+    const manifest = require("../manifest/manifest.json");
+    const version = manifest.version;
+    const [owner, repo_name] = (process.env.GITHUB_REPOSITORY ?? "ajayyy/SponsorBlock").split("/");
+    const ghpUrl = `https://${owner.toLowerCase()}.github.io/${repo_name}/${env.browser}${env.stream === "beta" ? "-beta" : ""}/${version}/`;
+    // make a request to the url and check if we got redirected
+    // firefox doesn't seem to like getting redirected on a source map request
+    try {
+        const resp = await fetch(ghpUrl);
+        return resp.url;
+    } catch {
+        return ghpUrl;
+    }
+}
+
+module.exports = async env => {
    let mode = "production";
    env.mode = mode;

    return merge(common(env), {
-        mode
+        mode,
+        ...(env.ghpSourceMaps
+            ? {
+                devtool: false,
+                plugins: [new SourceMapDevToolPlugin({
+                    publicPath: await createGHPSourceMapURL(env),
+                    filename: '[file].map[query]',
+                })],
+            }
+            : {
+                devtool: "source-map",
+            }
+        ),
    });
-};
+};
Author	SHA1	Message	Date
github-actions[bot]	99444e6d97	Update Invidious List	2025-10-01 00:31:48 +00:00
Ajay	c91df6e324	update translations	2025-09-30 03:45:53 -04:00
Ajay	8b87a83f5f	bump version	2025-09-30 03:44:57 -04:00
Ajay Ramachandran	d7af742af8	Merge pull request #2337 from mini-bomba/port-dearrow-autoupdate Port dearrow autoupdate & source maps	2025-09-30 01:59:31 -04:00
Ajay Ramachandran	c22d1b517c	Merge pull request #2340 from FelixFourcolor/master Auto-select the chapters tab if video only has chapters	2025-09-30 01:33:38 -04:00
Ajay Ramachandran	17896b2e22	Merge pull request #2348 from ajayyy/dependabot/npm_and_yarn/multi-d9e3f96976 Bump tmp and web-ext	2025-09-29 15:25:15 -04:00
dependabot[bot]	458e33a0c5	Bump tmp and web-ext Bumps [tmp](https://github.com/raszi/node-tmp) to 0.2.5 and updates ancestor dependency [web-ext](https://github.com/mozilla/web-ext). These dependencies need to be updated together. Updates `tmp` from 0.2.3 to 0.2.5 - [Changelog](https://github.com/raszi/node-tmp/blob/master/CHANGELOG.md) - [Commits](https://github.com/raszi/node-tmp/compare/v0.2.3...v0.2.5) Updates `web-ext` from 8.9.0 to 8.10.0 - [Release notes](https://github.com/mozilla/web-ext/releases) - [Commits](https://github.com/mozilla/web-ext/compare/8.9.0...8.10.0) --- updated-dependencies: - dependency-name: tmp dependency-version: 0.2.5 dependency-type: indirect - dependency-name: web-ext dependency-version: 8.10.0 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2025-09-29 19:04:41 +00:00
Ajay	9fb3921141	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock	2025-09-24 16:33:41 -04:00
Ajay	7982ccba3d	Fix wrong logic when waiting for image source	2025-09-24 16:33:38 -04:00
Ajay Ramachandran	ff43268e96	Merge pull request #2339 from mini-bomba/fix/chapter-nesting-crash Rewrite chapter nesting code	2025-09-24 02:49:32 -04:00
felistachio	444b90cac2	simplify tabFilter	2025-09-21 13:27:29 -07:00
felistachio	1b2c3f5dbf	Hide also the tab buttons if there are only chapters and small refactor	2025-09-21 13:19:32 -07:00
felistachio	aa04ed7bf4	Fix: prevent auto-switch tab on refresh	2025-09-20 20:48:23 -07:00
felistachio	9e501a5f66	refactor	2025-09-20 17:27:50 -07:00
felistachio	7ccdf67195	Set default tab to chapters if there are no segments	2025-09-20 17:15:35 -07:00
mini-bomba	14d7d79ce7	Rewrite chapter nesting code Friendship ended with recursion, chapter stack is my new friend side effect: fixes popup crash for videos where the first segment is not a chapter	2025-09-20 23:11:50 +02:00
mini-bomba	e63a677c81	Delay source-maps branch config for source code zip	2025-09-19 22:59:28 +02:00
mini-bomba	1056d1ef5f	fix remote source maps for users with custom ghp domains	2025-09-19 22:52:05 +02:00
Ajay	c30f8ec5a3	Fix missing permissions for release workflow	2025-09-19 22:51:25 +02:00
mini-bomba	a34e6e6d03	Enable TS source maps in prod	2025-09-19 22:51:25 +02:00
mini-bomba	e5bccf95ea	Set up uploading source maps to github pages	2025-09-19 22:50:56 +02:00
mini-bomba	bf68ce14c4	deploy firefox beta releases to github pages, enable updates	2025-09-19 22:36:52 +02:00
mini-bomba	9bf892c377	add source maps to releases	2025-09-19 22:34:08 +02:00
Ajay Ramachandran	7cbb0ec7cf	Merge pull request #2336 from mini-bomba/fix/segment-hiding Fix segment hiding/unhiding	2025-09-19 15:56:19 -04:00
mini-bomba	915fd70274	Cache chapter nesting results	2025-09-19 16:17:30 +02:00
mini-bomba	5043a5fbe2	Sync internal hidden status with segment's value on change	2025-09-19 16:08:50 +02:00
mini-bomba	808c3718a8	Fix segment hiding/unhiding	2025-09-19 15:49:26 +02:00
Ajay	1da5f33d72	Fix curve for popup buttons on hover	2025-09-18 04:27:42 -04:00
Ajay	948e39eed1	Actual fix for original tooltip not being found	2025-09-18 04:22:59 -04:00
Ajay	f6360a425c	Fix original tooltip not being found when rendering chapters	2025-09-18 04:10:48 -04:00
Ajay	65277dc5f5	Fix skip segments error message triggering when it shouldn't	2025-09-18 04:04:10 -04:00
Ajay	82c5dd8dd6	Make sure channel id info is never null	2025-09-18 04:02:21 -04:00
Ajay	1b7bcef25b	Remove extra message type	2025-09-18 04:01:57 -04:00
Ajay	5f6d7194a9	Remove extra function calls	2025-09-18 04:01:46 -04:00
Ajay	634e2490f3	Fix live chat messing with skip profile ui	2025-09-18 04:01:24 -04:00
Ajay	6d884fee62	Fix deselecting sometimes making the skip profile ui go to a bad state	2025-09-18 04:01:05 -04:00
Ajay	c499198ad3	Add indicator for non channel skip profiles	2025-09-18 03:35:48 -04:00
Ajay	d4995a6357	Don't show skip profile button when not on a video	2025-09-18 03:28:14 -04:00
Ajay	4d74516adc	Request unlimited storage for new local data	2025-09-18 03:22:00 -04:00
Ajay	f533921252	update translations	2025-09-18 03:20:21 -04:00
Ajay	d7ecf41754	bump version	2025-09-18 03:19:51 -04:00
Ajay Ramachandran	955eb9e437	Merge pull request #2334 from gosha305/loop-chapters Added better UI for nested chapters	2025-09-18 03:19:11 -04:00
Ajay	299560ec9a	Formatting fixes and add locales	2025-09-18 03:19:00 -04:00
Ajay	918ae905b1	Fix thumbnails not displaying full video labels on new YouTube layout Fixes #2332	2025-09-16 16:05:40 -04:00
Gosha	86a7920590	Merge branch 'master' into loop-chapters	2025-09-15 07:34:25 +02:00
gosha305	233da8c449	Added better UI for nested chapters	2025-09-14 14:24:55 +02:00
Ajay	e1e666049a	Handle popup staying open for videoID changes	2025-09-09 04:19:00 -04:00
Ajay	05fa9ff317	Fix skip profile fallback for toggle settings not working	2025-09-09 03:40:50 -04:00
Ajay	9753b7c5a4	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock	2025-09-09 03:36:49 -04:00
Ajay	40eabe6b18	Add channel skip profiles	2025-09-09 03:34:28 -04:00
Ajay	13f9914711	Request unlimited storate permission in sponsorblock on Firefox	2025-08-09 19:31:29 -04:00