☰

YouTube Transcript Exporter

Export YouTube transcripts to LLMs or download them as text files. Easy customizable via settings panels. Additional features: persistent progress bar with chapter markers; display remaining time based on playback speed; auto-open chapter panels; links in the header; custom CSS; hide nav bar; color-coded borders on the home page based on video age.

当前为 2025-01-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Transcript Exporter
  3. // @description  Export YouTube transcripts to LLMs or download them as text files. Easy customizable via settings panels. Additional features: persistent progress bar with chapter markers; display remaining time based on playback speed; auto-open chapter panels; links in the header; custom CSS; hide nav bar; color-coded borders on the home page based on video age.
  4. // @author       Tim Macy
  5. // @license      GNU AFFERO GENERAL PUBLIC LICENSE-3.0
  6. // @version      7.3
  7. // @namespace    TimMacy.YouTubeTranscriptExporter
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @match        https://*.youtube.com/*
  10. // @grant        GM.setValue
  11. // @grant        GM.getValue
  12. // @run-at       document-start
  13. // @noframes
  14. // @homepageURL  https://github.com/TimMacy/YouTubeTranscriptExporter
  15. // @supportURL   https://github.com/TimMacy/YouTubeTranscriptExporter/issues
  16. // ==/UserScript==
  17.  
  18. (async function() {
  19.     'use strict';
  20.     // CSS
  21.     const styleSheet = document.createElement('style');
  22.     styleSheet.textContent = `
  23.         .overlay { 
  24.             position: fixed;
  25.             z-index: 2053;
  26.             left: 0;
  27.             top: 0;
  28.             width: 100%;
  29.             height: 100%;
  30.             display: flex;
  31.             align-items: center;
  32.             justify-content: center;
  33.             background-color: rgba(0,0,0,0.5);
  34.             backdrop-filter: blur(5px);
  35.         }
  36.  
  37.         .modal-content {
  38.             z-index: 2077;
  39.             background-color: rgba(17, 17, 17, 0.8);
  40.             padding: 20px 0 20px 20px;
  41.             border: 1px solid rgba(255, 255, 255, 0.25);
  42.             border-radius: 8px;
  43.             width: 420px;
  44.             max-height: 90vh;
  45.             font-family: "Roboto","Arial",sans-serif;
  46.             font-size: 9px;
  47.             line-height: 1.2;
  48.             color: white;
  49.             text-rendering: optimizeLegibility !important;
  50.             -webkit-font-smoothing: antialiased !important;
  51.             -moz-osx-font-smoothing: grayscale !important;
  52.         }
  53.  
  54.         #yt-transcript-settings-form { 
  55.             max-height: calc(90vh - 40px); 
  56.             overflow-y: auto; 
  57.             padding-right: 20px; 
  58.         }
  59.  
  60.         .notification { 
  61.             background:hsl(0,0%,7%);
  62.             padding: 20px 30px;
  63.             border-radius: 8px;
  64.             border: 1px solid hsl(0,0%,18.82%);
  65.             max-width: 80%;
  66.             text-align: center;
  67.             font-family: "Roboto","Arial",sans-serif;
  68.             font-size: 16px;
  69.             color: white;
  70.         }
  71.  
  72.         .header {
  73.             margin: 0 20px 20px 0;
  74.             padding: 0;
  75.             border: 0;
  76.             text-align:center;
  77.             text-decoration: none;
  78.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  79.             font-size: 2.5em;
  80.             line-height: 1em;
  81.             font-weight: 700;
  82.             text-overflow: ellipsis;
  83.             white-space: normal;
  84.             text-shadow: 0 0 20px black;
  85.             cursor: pointer;
  86.             background: transparent;
  87.             display: block;
  88.             background-image: linear-gradient(45deg, #FFFFFF, #F2F2F2, #E6E6E6, #D9D9D9, #CCCCCC);
  89.             -webkit-background-clip: text;
  90.             background-clip: text;
  91.             color: transparent;
  92.             transition: color .3s ease-in-out;
  93.             -webkit-user-select: none;
  94.             -moz-user-select: none;
  95.             -ms-user-select: none;
  96.             user-select: none;
  97.         }
  98.  
  99.         .header:hover { color: white; }
  100.  
  101.         .label-style-settings { 
  102.             display: block; 
  103.             margin-bottom: 5px; 
  104.             font-family: "Roboto","Arial",sans-serif; 
  105.             font-size: 1.4em; 
  106.             line-height: 1.5em; 
  107.             font-weight: 500; 
  108.         }
  109.  
  110.         .label-NotebookLM { color: hsl(134, 61%, 40%); }
  111.         .label-ChatGPT { color: hsl(217, 91%, 59%); }
  112.         .label-download { color: hsl(359, 88%, 57%); }
  113.         .label-settings { color: hsl(0, 0%, 100%); }
  114.         .input-field-targetNotebookLMUrl:focus { border: 1px solid hsl(134, 61%, 40%); }
  115.         .input-field-targetChatGPTUrl:focus { border: 1px solid hsl(217, 91%, 59%); }
  116.         .buttonIconNotebookLM-input-field:focus { border: 1px solid hsl(134, 61%, 40%); }
  117.         .buttonIconChatGPT-input-field:focus { border: 1px solid hsl(217, 91%, 59%); }
  118.         .buttonIconDownload-input-field:focus { border: 1px solid hsl(359, 88%, 57%); }
  119.         .buttonIconSettings-input-field:focus, .links-header-container input:focus, .sidebar-container input:focus { border: 1px solid hsl(0, 0%, 100%); }
  120.  
  121.         .input-field-targetNotebookLMUrl:hover,
  122.         .input-field-targetChatGPTUrl:hover,
  123.         .buttonIconNotebookLM-input-field:hover,
  124.         .buttonIconChatGPT-input-field:hover,
  125.         .buttonIconDownload-input-field:hover,
  126.         .buttonIconSettings-input-field:hover,
  127.         .select-file-naming:hover,
  128.         .input-field-url:hover,
  129.         .chatgpt-prompt-textarea:hover
  130.         { background-color: hsl(0, 0%, 10.37%); }
  131.  
  132.         .btn-style-settings {
  133.             padding: 5px 10px;
  134.             cursor: pointer; 
  135.             color: whitesmoke;
  136.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  137.             font-size: 1.4em; 
  138.             line-height: 1.5em; 
  139.             font-weight: 400; 
  140.             background-color: hsl(0, 0%, 7%); 
  141.             border: 1px solid hsl(0, 0%, 18.82%);
  142.             border-radius: 3px;
  143.             transition: all 0.2s ease-out;
  144.         }
  145.  
  146.         .btn-style-settings:hover { color: white; background-color: rgba(255,255,255,0.2); border-color: transparent; }
  147.         .button-icons { display: block; font-family: "Roboto","Arial",sans-serif; font-size: 1.4em; line-height: 1.5em; font-weight: 500; }
  148.         .icons-container { display: flex; justify-content: space-between; margin-bottom: 20px; }
  149.         .container-button { display: flex; flex-direction: column; align-items: center; margin: 5px 0 0 0; }
  150.  
  151.         .container-button-input { 
  152.             width: 80px;
  153.             padding: 8px;
  154.             text-align: center;
  155.             color: ghostwhite;
  156.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  157.             font-size: 2em; 
  158.             line-height: 1.5em; 
  159.             font-weight: 400; 
  160.             transition: all .5s ease-in-out;
  161.             outline: none;
  162.             background-color: hsl(0,0%,7%);
  163.             border: 1px solid hsl(0,0%,18.82%);
  164.             border-radius: 1px;
  165.             box-sizing: border-box;
  166.         }
  167.  
  168.         .container-button-label { 
  169.             margin-top: 5px; 
  170.             text-align: center; 
  171.             font-family: "Roboto","Arial",sans-serif; 
  172.             font-size: 1.4em; 
  173.             line-height: 1.5em; 
  174.             font-weight: 500; 
  175.         }
  176.  
  177.         .container-button-input:focus { color: white; background-color: hsl(0, 0%, 10.37%); border-radius: 3px; }
  178.         .spacer-top { height: 10px; }
  179.  
  180.         .copyright { 
  181.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  182.             font-size: 1.4em; 
  183.             line-height: 1.5em; 
  184.             font-weight: 500; 
  185.             color: white;
  186.             text-decoration: none; 
  187.             transition: color 0.2s ease-in-out; 
  188.         }
  189.  
  190.         .copyright:hover { color: #369eff; }
  191.         .url-container { margin-bottom: 10px; }
  192.  
  193.         .input-field-url { 
  194.             width: 100%;
  195.             padding: 8px; 
  196.             color: ghostwhite; 
  197.             font-family: -apple-system, "Roboto", "Arial", sans-serif; 
  198.             font-size: 1.4em; 
  199.             line-height: 1.5em; 
  200.             font-weight: 400; 
  201.             transition: all .5s ease-in-out;
  202.             outline: none;
  203.             background-color:hsl(0,0%,7%); 
  204.             border: 1px solid hsl(0,0%,18.82%); 
  205.             border-radius: 1px;
  206.             box-sizing: border-box;
  207.         }
  208.                 
  209.         .input-field-url:focus { color: white; background-color: hsl(0, 0%, 10.37%); border-radius: 3px; }
  210.         .file-naming-container { position: relative; margin-bottom: 20px; }
  211.  
  212.         .select-file-naming { 
  213.             width: 100%; 
  214.             padding: 8px; 
  215.             cursor:pointer; 
  216.             color: ghostwhite; 
  217.             font-family: -apple-system, "Roboto", "Arial", sans-serif; 
  218.             font-size: 1.4em; 
  219.             line-height: 1.5em; 
  220.             font-weight: 400; 
  221.             transition: all .5s ease-in-out;
  222.             outline: none;
  223.             appearance: none;
  224.             -webkit-appearance: none;
  225.             background-color:hsl(0,0%,7%); 
  226.             border: 1px solid hsl(0,0%,18.82%); 
  227.             border-radius: 1px;
  228.             box-sizing: border-box;
  229.  
  230.             background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 100%; height: 100%;" fill="ghostwhite"%3E%3Cpath d="m18 9.28-6.35 6.35-6.37-6.35.72-.71 5.64 5.65 5.65-5.65z"%3E%3C/path%3E%3C/svg%3E');
  231.             background-repeat: no-repeat;
  232.             background-position: right 10px center;
  233.             background-size: 20px;
  234.  
  235.             -webkit-user-select: none;
  236.             -moz-user-select: none;
  237.             -ms-user-select: none;]
  238.             user-select: none;
  239.         }
  240.  
  241.         .hidden-select {
  242.             position: absolute;
  243.             visibility: hidden;
  244.             opacity: 0;
  245.             pointer-events: none;
  246.             width: 100%;
  247.             height: 100%;
  248.             top: 0;
  249.             left: 0;
  250.         }
  251.  
  252.         .dropdown-list {
  253.             visibility: hidden;
  254.             opacity: 0;
  255.             position: absolute;
  256.             z-index: 2100;
  257.             top: 115%;
  258.             left: 0;
  259.             width: 100%;
  260.             max-height: 200px;
  261.             overflow-y: auto;
  262.             background-color:hsl(0,0%,7%); 
  263.             border: 1px solid hsl(359,88%,57%);
  264.             border-radius: 1px 1px 8px 8px;
  265.             box-sizing: border-box;
  266.             transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  267.             transform: translateY(-10px);
  268.         }
  269.  
  270.         .dropdown-list.show {
  271.             visibility: visible;
  272.             opacity: 1;
  273.             transform: translateY(0);
  274.         }
  275.  
  276.         .dropdown-item {
  277.             padding: 15px;
  278.             cursor: pointer;
  279.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  280.             font-size: 1.47em;
  281.             line-height: 1em;
  282.             font-weight: 400;
  283.             color: lightgray;
  284.             position: relative;
  285.             transition: background-color .3s;
  286.             padding-left: 1.6em;
  287.         }
  288.  
  289.         .dropdown-item:hover {
  290.             color: ghostwhite; 
  291.             background-color: rgba(255, 255, 255, .05);
  292.         }
  293.  
  294.         .dropdown-item:hover::before {
  295.             color: ghostwhite;
  296.             font-weight: 600;
  297.         }
  298.  
  299.         .dropdown-item-selected {
  300.             color: hsl(359,88%,57%);
  301.             font-weight: 600;
  302.         }
  303.  
  304.         .dropdown-item-selected::before {
  305.             content: '✓';
  306.             position: absolute;
  307.             left: 6px;
  308.             color: hsl(359,88%,57%);
  309.         }
  310.  
  311.         .select-file-naming:focus {
  312.             color: white;
  313.             background-color: hsl(0, 0%, 10.37%);
  314.             border-radius: 3px;
  315.             border-color: hsl(359, 88%, 57%);
  316.         }
  317.  
  318.         .checkbox-label,
  319.         .number-input-label span { 
  320.             display: flex; 
  321.             align-items: center; 
  322.             font-family: "Roboto","Arial",sans-serif; 
  323.             font-size: 1.4em; 
  324.             line-height: 1.5em; 
  325.             font-weight: 500; 
  326.             cursor: pointer; 
  327.             text-decoration: none;
  328.             -webkit-user-select: none;
  329.             -moz-user-select: none;
  330.             -ms-user-select: none;
  331.             user-select: none;
  332.         }
  333.  
  334.         .checkbox-container { margin-bottom: 5px; }
  335.         .checkbox-label:hover { text-decoration: underline; }
  336.         .checkbox-field { margin-right: 10px; }
  337.  
  338.         .chrome-info { 
  339.             color: rgba(175, 175, 175, .9); 
  340.             font-family: "Roboto","Arial",sans-serif; 
  341.             font-size: 1.2em; 
  342.             line-height: 1.5em; 
  343.             font-weight: 400; 
  344.             display: block; 
  345.             margin:-5px 0px 5px 24px; 
  346.             pointer-events: none; 
  347.             cursor: default; 
  348.         }
  349.  
  350.         .extra-button-container {
  351.             display: flex;
  352.             justify-content: center;
  353.             gap: 5%;
  354.             margin: 10px 0;
  355.         }
  356.  
  357.         .chatgpt-prompt-textarea { 
  358.             width: 100%;
  359.             padding: 8px;
  360.             height: 65px;
  361.             transition: all .5s ease-in-out;
  362.             outline: none;
  363.             resize: none; 
  364.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  365.             font-size: 1.4em; 
  366.             line-height: 1.5em; 
  367.             font-weight: 400; 
  368.             color: ghostwhite;
  369.             background-color:hsl(0,0%,7%); 
  370.             border: 1px solid hsl(0,0%,18.82%); 
  371.             border-radius: 1px;
  372.             box-sizing: border-box;
  373.         }
  374.  
  375.         .chatgpt-prompt-textarea:focus {
  376.             height: 432px;
  377.             color: white;
  378.             background-color: hsl(0, 0%, 10.37%);
  379.             border: 1px solid hsl(217, 91%, 59%);
  380.             border-radius: 3px;
  381.         }
  382.         
  383.         .button-container-end {
  384.             display: flex;
  385.             flex-direction: column;
  386.             gap: 10px;
  387.             margin-top: 20px;
  388.             padding-top: 10px;
  389.             border: none;
  390.             border-top: solid 1px transparent;
  391.             border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  392.             border-image-slice: 1;
  393.             -webkit-user-select: none;
  394.             -moz-user-select: none;
  395.             -ms-user-select: none;
  396.             user-select: none;
  397.         }
  398.  
  399.         .button-container-backup {
  400.             display: flex;
  401.             justify-content: end;
  402.             gap: 23.5px;
  403.         }
  404.  
  405.         .button-container-settings { 
  406.             display: flex; 
  407.             align-items: center;
  408.             justify-content: end;
  409.             gap: 10px;
  410.             
  411.         }
  412.  
  413.         .button-wrapper {
  414.             position: relative;
  415.             margin-right: 8px;
  416.             display: flex;
  417.             background-color: transparent;
  418.             text-rendering: optimizeLegibility !important;
  419.             -webkit-font-smoothing: antialiased !important;
  420.             -moz-osx-font-smoothing: grayscale !important;
  421.         }
  422.  
  423.         .button-wrapper:not(:has(.button-style-settings)):hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 24px; }
  424.         .button-wrapper:not(:has(.button-style-settings)):active { background-color: rgba(255, 255, 255, 0.2); border-radius: 24px; }
  425.  
  426.         .button-style {
  427.             width: 40px;
  428.             height: 40px;
  429.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  430.             font-size: 24px;
  431.             display: inline-block;
  432.             position: relative;
  433.             box-sizing: border-box;
  434.             vertical-align: middle;
  435.             color: white;
  436.             outline: none;
  437.             background: transparent;
  438.             margin: 0;
  439.             border: none;
  440.             padding: 0;
  441.             cursor: pointer;
  442.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  443.             -webkit-tap-highlight-color: transparent;
  444.         }
  445.  
  446.         .button-style-settings { width: 10px; color: rgb(170, 170, 170); }
  447.         .button-style-settings:hover { color: white; }
  448.  
  449.         .button-tooltip {
  450.             visibility: hidden;
  451.             background-color: black;
  452.             color: white;
  453.             text-align: center;
  454.             border-radius: 3px;
  455.             padding: 6px 8px;
  456.             position: absolute;
  457.             z-index: 2053;
  458.             top: 120%;
  459.             left: 50%;
  460.             transform: translateX(-50%);
  461.             opacity: 0;
  462.             white-space: nowrap;
  463.             font-size: 12px;
  464.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  465.             border-top: solid 1px white;
  466.             border-bottom: solid 1px black;
  467.             border-left: solid 1px transparent;
  468.             border-right: solid 1px transparent;
  469.             border-image: linear-gradient(to bottom, white, black);
  470.             border-image-slice: 1;
  471.         }
  472.  
  473.         .button-tooltip-arrow {
  474.             position: absolute;
  475.             top: -5px;
  476.             left: 50%;
  477.             transform: translateX(-50%) rotate(45deg);
  478.             width: 10px;
  479.             height: 10px;
  480.             background: linear-gradient(135deg, white 0%, white 50%, black 50%, black 100%);
  481.             z-index: -1;
  482.         }
  483.  
  484.         .remaining-time-container {
  485.             position: relative;
  486.             display: block;
  487.             height: 0;
  488.             top: 4px;
  489.             text-align: right;
  490.             font-family: "Roboto", "Arial", sans-serif;
  491.             font-size: 1.4rem;
  492.             font-weight: 500;
  493.             line-height: 1em;
  494.             color: ghostwhite;
  495.             pointer-events: auto;
  496.             cursor: auto;
  497.             text-rendering: optimizeLegibility !important;
  498.             -webkit-font-smoothing: antialiased !important;
  499.             -moz-osx-font-smoothing: grayscale !important;
  500.         }
  501.     
  502.         .remaining-time-container.live,
  503.         #movie_player .remaining-time-container.live {
  504.             display: none;
  505.             pointer-events: none;
  506.             cursor: default;
  507.         }
  508.  
  509.         #movie_player .remaining-time-container {
  510.             position: absolute;
  511.             z-index: 2053;
  512.             bottom: 15px;
  513.             left: 50%;
  514.             transform: translateX(-50%);
  515.             font-weight: 800 !important;
  516.             font-size: 109%;
  517.             display: inline-block;
  518.             vertical-align: top;
  519.             white-space: nowrap;
  520.             line-height: 53px;
  521.             color: #ddd;
  522.             text-shadow: black 0 0 3px !important;
  523.         }
  524.  
  525.         .transcript-preload {
  526.             position: fixed !important;
  527.             top: var(--ytd-toolbar-height) !important;
  528.             left: 50% !important;
  529.             transform: translateX(-50%) !important;
  530.             z-index: -1 !important;
  531.             opacity: 0 !important;
  532.             pointer-events: none !important;
  533.         }
  534.  
  535.         .notification-error {
  536.             z-index: 2053;
  537.             box-shadow: none;
  538.             text-decoration: none;
  539.             display: inline-block;
  540.             background-color: hsl(0, 0%, 7%);
  541.             padding: 10px 12px;
  542.             margin: 0 8px;
  543.             border: 1px solid hsl(0, 0%, 18.82%);
  544.             border-radius: 5px;
  545.             pointer-events: none;
  546.             cursor: default;
  547.             font-family: 'Roboto', Arial, sans-serif;
  548.             color: rgba(255, 255, 255, 0.5);
  549.             text-align: center;
  550.             font-weight: 500;
  551.             font-size: 14px;
  552.             text-rendering: optimizeLegibility !important;
  553.             -webkit-font-smoothing: antialiased !important;
  554.             -moz-osx-font-smoothing: grayscale !important;
  555.         }
  556.  
  557.         .loading span::before {
  558.             content: "Transcript Is Loading";
  559.             position: absolute;
  560.             inset: initial;
  561.             color: rgba(255, 250, 250, .86);
  562.             opacity: 0;
  563.             -webkit-animation: pulse 1.5s infinite; 
  564.             animation: pulse 1.5s infinite;
  565.             text-rendering: optimizeLegibility !important;
  566.             -webkit-font-smoothing: antialiased !important;
  567.             -moz-osx-font-smoothing: grayscale !important;
  568.         }
  569.  
  570.         @-webkit-keyframes pulse { 
  571.             0% { opacity: 0; } 
  572.             50% { opacity: .71; } 
  573.             100% { opacity: 0; } 
  574.         }
  575.  
  576.         @keyframes pulse { 
  577.             0% { opacity: 0; } 
  578.             50% { opacity: .71; } 
  579.             100% { opacity: 0; } 
  580.         }
  581.  
  582.         .buttons-left {
  583.             font-family: "Roboto", "Arial", sans-serif;
  584.             font-size: 14px;
  585.             font-weight: 500;
  586.             line-height: 1em;
  587.             display: inline-block;
  588.             position: relative;
  589.             color: ghostwhite;
  590.             text-decoration: none;
  591.             cursor: pointer;
  592.             margin: 0 8px;
  593.             outline: none;
  594.             background: transparent;
  595.             border: none;
  596.             text-align: center;
  597.             text-rendering: optimizeLegibility !important;
  598.             -webkit-font-smoothing: antialiased !important;
  599.             -moz-osx-font-smoothing: grayscale !important;
  600.         }
  601.  
  602.         .buttons-left:hover { color: #ff0000; }
  603.         .buttons-left:active { color:rgb(200, 25, 25); }
  604.  
  605.         .sub-panel-overlay {
  606.             position: fixed;
  607.             z-index: 2100;
  608.             left: 0;
  609.             top: 0;
  610.             width: 100%;
  611.             height: 100%;
  612.             display: flex;
  613.             background-color: rgba(0,0,0,0.5);
  614.             justify-content: center;
  615.             align-items: center;
  616.             backdrop-filter: blur(1px);
  617.         }
  618.  
  619.         .sub-panel {
  620.             z-index: 2177;
  621.             background-color: rgba(17, 17, 17, 0.8);
  622.             padding: 20px;
  623.             border: 1px solid rgba(255, 255, 255, 0.25);
  624.             border-radius: 8px;
  625.             width: 50vw;
  626.             max-width: 70vw;
  627.             max-height: 80vh;
  628.             position: relative;
  629.             display: flex;
  630.             flex-direction: column; 
  631.             overflow-y: auto;
  632.             color: whitesmoke;
  633.             text-rendering: optimizeLegibility !important;
  634.             -webkit-font-smoothing: antialiased !important;
  635.             -moz-osx-font-smoothing: grayscale !important;
  636.         }
  637.  
  638.         .sub-panel button {
  639.             position: sticky;
  640.             top: 0;
  641.             align-self: flex-end;
  642.             box-shadow: 0 0 20px 10px black;
  643.             z-index: 2078;
  644.         }
  645.  
  646.         .sub-panel-header {
  647.             margin: -24px 60px 20px 0px;
  648.             padding: 0px 0px 0px 0px;
  649.             border: 0;
  650.             text-align: left;
  651.             text-decoration: none;
  652.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  653.             font-size: 2em;
  654.             line-height: 1em;
  655.             font-weight: 700;
  656.             text-overflow: ellipsis;
  657.             white-space: normal;
  658.             text-shadow: 0 0 30px 20px black;
  659.             cursor: auto;
  660.             color: white;
  661.             align-self: left;
  662.             position: relative;
  663.             z-index: 2180;
  664.         }
  665.  
  666.         #links-in-header-form .chrome-info {
  667.             margin: -10px 80px 20px 0px;
  668.         }
  669.  
  670.         .links-header-container {
  671.             display: flex;
  672.             align-items: center;
  673.             gap: 20px;
  674.         }
  675.  
  676.         .links-header-container label { 
  677.             color: whitesmoke; 
  678.         }
  679.  
  680.         .links-header-container .url-container:first-child {
  681.             flex: 1;
  682.         }
  683.  
  684.         .links-header-container .url-container:last-child {
  685.             flex: 2;
  686.         }
  687.  
  688.         .sidebar-container {
  689.             display: flex;
  690.             align-items: center;
  691.             margin: 10px 0 0 0;
  692.             color: whitesmoke;
  693.             justify-content: flex-start;
  694.             gap: 20px;
  695.         }
  696.  
  697.         .sidebar-container .checkbox-container {
  698.             margin-bottom: 0 !important;
  699.             flex: 1;
  700.         }
  701.  
  702.         .sidebar-container .url-container {
  703.         flex: 2;
  704.         }
  705.  
  706.         #color-code-videos-form .checkbox-container { margin: 20px 0 0 0; }
  707.         #color-code-videos-form .label-style-settings { margin: 20px 0 10px 0; }
  708.         #color-code-videos-form > div.videos-old-container > span { margin: 0; }
  709.         #custom-css-form .checkbox-container { margin: 20px 0; }
  710.  
  711.         #custom-css-form .file-naming-container {
  712.             margin: 20px 0;
  713.             display: flex;
  714.             gap: 25px;
  715.             align-content: center;
  716.         }
  717.  
  718.         #custom-css-form .label-style-settings {
  719.             margin-bottom: 0;
  720.             white-space: nowrap;
  721.             align-content: center;
  722.         }
  723.  
  724.         input[type="range"] {
  725.             -webkit-appearance: none; /* Remove default styling */
  726.             appearance: none;
  727.             width: 100%; /* Full width */
  728.             height: 6px; /* Height of the track */
  729.             background: #ccc; /* Track color */
  730.             border-radius: 5px; /* Rounded corners for the track */
  731.             outline: none; /* Remove outline */
  732.         }
  733.  
  734.         input[type="range"]::-moz-range-thumb,
  735.         input[type="range"]::-webkit-slider-thumb {
  736.             -webkit-appearance: none; /* Remove default styling */
  737.             appearance: none;
  738.             width: 16px; /* Width of the thumb */
  739.             height: 16px; /* Height of the thumb */
  740.             background: #007bff; /* Thumb color */
  741.             border-radius: 50%; /* Make the thumb round */
  742.             cursor: pointer; /* Add a pointer cursor */
  743.             border: 2px solid #ffffff; /* Add a white border for visibility */
  744.         }
  745.  
  746.         input[type="range"]::-moz-range-track,
  747.         input[type="range"]::-webkit-slider-runnable-track {
  748.             background: #007bff; /* Track color */
  749.             height: 6px; /* Height of the track */
  750.             border-radius: 5px; /* Rounded corners */
  751.         }
  752.  
  753.         .videos-old-container {
  754.             display: flex;
  755.             align-items: center;
  756.             gap: 25px; 
  757.             margin: 20px 0; 
  758.         }
  759.  
  760.         .slider-container {
  761.             display: flex;
  762.             align-items: center;
  763.             gap: 10px; 
  764.             flex: 1;
  765.         }
  766.  
  767.         .slider-container input[type="range"] { 
  768.             flex: 1; 
  769.         }
  770.  
  771.         .videos-age-container {
  772.             display: flex;
  773.             flex-direction: column; 
  774.             align-items: center;
  775.             gap: 25px; 
  776.         }
  777.  
  778.         .videos-age-row {
  779.             display: flex;
  780.             justify-content: flex-start;
  781.             align-items: center;
  782.             width: 100%;
  783.             gap: 10px;
  784.         }
  785.  
  786.         .videos-age-row span {
  787.             text-align: right;
  788.             flex: 1;
  789.             max-width: 50%;
  790.         }
  791.  
  792.         .videos-age-row input {
  793.             flex: 1; 
  794.             margin: 0 0 0 10px;
  795.             max-width: 70px;
  796.             height: 35px;
  797.             cursor: pointer;
  798.         }
  799.  
  800.         .number-input-container {
  801.             margin: 20px 0;
  802.         }
  803.  
  804.         .number-input-field {
  805.             margin: 0 10px 0 0;
  806.             align-items: center; 
  807.             font-size: 1.4em; 
  808.             line-height: 1.5em; 
  809.             font-weight: 700; 
  810.             cursor: auto; 
  811.             text-decoration: none;
  812.             text-align: center; 
  813.             display: inline-block;
  814.  
  815.         }
  816.  
  817.         .number-input-label span {
  818.             display: initial;
  819.             cursor: auto;
  820.         }
  821.     `;
  822.  
  823.     document.head.appendChild(styleSheet);
  824.  
  825.     // CSS Progress Bar
  826.     function ProgressBarCSS() {
  827.         const progressBarCSS = document.createElement('style');
  828.         progressBarCSS.textContent = `
  829.             #ProgressBar-bar {
  830.                 width: 100%;
  831.                 height: 3px;
  832.                 background: rgba(255, 255, 255, 0.2);
  833.                 position: absolute;
  834.                 bottom: 0;
  835.                 opacity: 0;
  836.                 z-index: 50;
  837.             }
  838.  
  839.             #ProgressBar-progress, #ProgressBar-buffer {
  840.                 width: 100%;
  841.                 height: 3px;
  842.                 transform-origin: 0 0;
  843.                 position: absolute;
  844.             }
  845.  
  846.             #ProgressBar-progress {
  847.                 background: #f00;
  848.                 filter: none;
  849.                 z-index: 1;
  850.             }
  851.  
  852.             .ytp-autohide .ytp-chrome-bottom .ytp-load-progress, .ytp-autohide .ytp-chrome-bottom .ytp-play-progress { display: none !important; }
  853.             .ytp-autohide .ytp-chrome-bottom { opacity: 1 !important; display: block !important; }
  854.             .ytp-autohide .ytp-chrome-bottom .ytp-chrome-controls { opacity: 0 !important; }
  855.             .ad-interrupting #ProgressBar-progress { background: transparent; }
  856.             .ytp-ad-persistent-progress-bar-container { display: none; }
  857.             #ProgressBar-buffer { background: rgba(255, 255, 255, 0.4); }
  858.  
  859.             .ytp-autohide #ProgressBar-start.active, 
  860.             .ytp-autohide #ProgressBar-bar.active, 
  861.             .ytp-autohide #ProgressBar-end.active 
  862.             { opacity: 1; }
  863.  
  864.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container {
  865.                 bottom: 0px !important;
  866.                 opacity: 1 !important;
  867.                 height: 4px !important;
  868.                 transform: translateX(0px) !important;
  869.                 z-index: 100;
  870.             }
  871.  
  872.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-bar,
  873.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-list {
  874.                 background: transparent !important;
  875.                 box-shadow: none !important;
  876.             }
  877.  
  878.             .ytp-autohide .ytp-chrome-bottom .previewbar {
  879.                 height: calc(100% + 1px) !important;
  880.                 bottom: -1px !important;
  881.                 margin-bottom: 0px !important;
  882.                 opacity: 1 !important;
  883.                 border: none !important;
  884.                 box-shadow: none !important;
  885.                 will-change: opacity, transform !important;
  886.             }
  887.  
  888.             #ProgressBar-start, #ProgressBar-end {
  889.                 position: absolute;
  890.                 height: 3px;
  891.                 width: 12px;
  892.                 bottom: 0;
  893.                 z-index: 2077;
  894.                 opacity: 0;
  895.                 pointer-events: none;
  896.             }
  897.  
  898.             :fullscreen #ProgressBar-start, :fullscreen #ProgressBar-end { width: 24px; }
  899.             :-webkit-full-screen #ProgressBar-start, :-webkit-full-screen #ProgressBar-end { width: 24px; }
  900.  
  901.             #ProgressBar-start {
  902.                 left: 0;
  903.                 background: #f00;
  904.             }
  905.  
  906.             #ProgressBar-end {
  907.                 right: 0;
  908.                 background: rgba(255, 255, 255, 0.2);
  909.             }
  910.         `;
  911.  
  912.         document.head.appendChild(progressBarCSS);
  913.     }
  914.  
  915.     // customCSS
  916.     function customCSS() {
  917.         const customCSS = document.createElement('style');
  918.         customCSS.textContent = `
  919.             .yte-style-hide-default-sidebar {
  920.                 ytd-mini-guide-renderer.ytd-app { display: none !important; }
  921.                 ytd-app[mini-guide-visible] ytd-page-manager.ytd-app { margin-left: 0 !important; }
  922.                 #guide-button.ytd-masthead { display: none !important; }
  923.                 #contents.ytd-rich-grid-renderer { justify-content: center !important; }
  924.             }
  925.  
  926.             html {
  927.                 font-size: var(--fontSize) !important;
  928.                 font-family: "Roboto", Arial, sans-serif;
  929.             }
  930.  
  931.             #video-title.ytd-rich-grid-media {
  932.                 text-transform: var(--textTransform);
  933.             }
  934.  
  935.             ytd-compact-video-renderer ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer),
  936.             ytd-rich-item-renderer ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  937.                 opacity: var(--watchedOpacity);
  938.             }
  939.  
  940.             .yte-style-hide-watched-videos-global {
  941.                 ytd-rich-item-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  942.                     display: none;
  943.                 }
  944.             }
  945.  
  946.             .ytd-page-manager[page-subtype="home"],
  947.             .ytd-page-manager[page-subtype="channels"],
  948.             .ytd-page-manager[page-subtype="subscriptions"] {
  949.                 .style-scope.ytd-two-column-browse-results-renderer {
  950.                     --ytd-rich-grid-items-per-row: var(--itemsPerRow) !important;
  951.                     --ytd-rich-grid-posts-per-row: var(--itemsPerRow) !important;
  952.                     --ytd-rich-grid-slim-items-per-row: var(--itemsPerRowCalc);
  953.                     --ytd-rich-grid-game-cards-per-row: var(--itemsPerRowCalc);
  954.                     --ytd-rich-grid-mini-game-cards-per-row: var(--itemsPerRowCalc);
  955.                 }
  956.             }
  957.  
  958.             .yte-style-hide-voice-search {
  959.                 #voice-search-button.ytd-masthead { display: none; }
  960.             }
  961.  
  962.             .yte-style-hide-create-button {
  963.                 #buttons.ytd-masthead > .ytd-masthead:first-child { display: none; }
  964.             }
  965.  
  966.             .yte-style-hide-miniplayer {
  967.                 .miniplayer.ytd-miniplayer { display: none; }
  968.                 ytd-miniplayer { display: none; }
  969.             }
  970.  
  971.             .yte-style-sqaure-search-bar {
  972.                 #center.ytd-masthead { flex: 0 1 500px; }
  973.                 .YtSearchboxComponentInputBox { border: 1px solid hsl(0,0%,18.82%); border-radius: 0; }
  974.                 .YtSearchboxComponentSuggestionsContainer { border-radius: 0 0 10px 10px; }
  975.                 .YtSearchboxComponentSearchButtonDark { display: none; }
  976.                 .YtSearchboxComponentHost { margin: 0; }
  977.  
  978.                 .ytSearchboxComponentInputBox { border: 1px solid hsl(0,0%,18.82%); border-radius: 0; }
  979.                 .ytSearchboxComponentSuggestionsContainer { border-radius: 0 0 10px 10px; }
  980.                 .ytSearchboxComponentSearchButtonDark { display: none; }
  981.                 .ytSearchboxComponentHost { margin: 0; }
  982.             }
  983.  
  984.             .yte-style-sqaure-design {
  985.                 .ytd-page-manager[page-subtype="home"] {
  986.                     yt-chip-cloud-chip-renderer { 
  987.                         border-radius: 3px; 
  988.                     }
  989.                 }
  990.  
  991.                 .ytd-page-manager[page-subtype="channels"] {
  992.                     .yt-image-banner-view-model-wiz--inset,
  993.                     yt-chip-cloud-chip-renderer { 
  994.                         border-radius: 0 !important; 
  995.                     }
  996.  
  997.                     .yt-spec-button-shape-next--size-m {
  998.                         border-radius: 3px;
  999.                     }
  1000.                 }
  1001.  
  1002.                 .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start { border-radius: 3px 0 0 3px; }
  1003.                 .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end { border-radius: 0 3px 3px 0; }
  1004.  
  1005.                 ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]),
  1006.                 .yt-spec-button-shape-next--size-s,
  1007.                 .yt-spec-button-shape-next--size-m,
  1008.                 #description.ytd-watch-metadata,
  1009.                 ytd-multi-page-menu-renderer,
  1010.                 yt-chip-cloud-chip-renderer,
  1011.                 .ytChipShapeChip {
  1012.                     border-radius: 3px;
  1013.                 }
  1014.  
  1015.                 ytd-menu-popup-renderer {
  1016.                     border-radius: 0 0 5px 5px;
  1017.                 }
  1018.  
  1019.                 ytd-macro-markers-list-item-renderer[rounded] #thumbnail.ytd-macro-markers-list-item-renderer,
  1020.                 ytd-thumbnail[size="medium"] a.ytd-thumbnail, ytd-thumbnail[size="medium"]::before,
  1021.                 ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before,
  1022.                 ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy,
  1023.                 ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]) {
  1024.                     border-radius: 0 !important;
  1025.                 }
  1026.             }
  1027.  
  1028.             .yte-style-compact-layout {
  1029.                 .ytd-page-manager[page-subtype="home"],
  1030.                 .ytd-page-manager[page-subtype="channels"],
  1031.                 .ytd-page-manager[page-subtype="subscriptions"] {
  1032.                     ytd-rich-section-renderer { display: none; }
  1033.                 
  1034.                     #contents.ytd-rich-grid-renderer {
  1035.                         width: 100%;
  1036.                         max-width: 100%;
  1037.                         padding-top: 0;
  1038.                         display: flex;
  1039.                         flex-wrap: wrap;
  1040.                         justify-content: flex-start;
  1041.                     }
  1042.                 
  1043.                     .style-scope.ytd-two-column-browse-results-renderer {
  1044.                         --ytd-rich-grid-item-max-width: 100vw;
  1045.                         --ytd-rich-grid-item-min-width: 310px;
  1046.                         --ytd-rich-grid-item-margin: 1px !important;
  1047.                         --ytd-rich-grid-content-offset-top: 56px;
  1048.                     }
  1049.                 
  1050.                     ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
  1051.                         margin-left: 5px !important;
  1052.                     }
  1053.                 
  1054.                     ytd-rich-item-renderer[rendered-from-rich-grid] {
  1055.                         margin: 5px 0 20px 5px !important;
  1056.                     }
  1057.                 
  1058.                     #meta.ytd-rich-grid-media { 
  1059.                         overflow-x: hidden; 
  1060.                         padding-right: 6px; 
  1061.                     }
  1062.                 
  1063.                     #avatar-container.ytd-rich-grid-media { 
  1064.                         margin:7px 6px 0px 6px; 
  1065.                     }
  1066.                 
  1067.                     h3.ytd-rich-grid-media { 
  1068.                         margin: 7px 0 4px 0; 
  1069.                     }
  1070.                 }
  1071.                 
  1072.                 .ytd-page-manager[page-subtype="home"] {
  1073.                     ytd-menu-renderer.ytd-rich-grid-media { 
  1074.                         position: absolute; 
  1075.                         top: 50px; 
  1076.                         right: auto; 
  1077.                         left: 3px; 
  1078.                         transform: rotate(90deg); 
  1079.                         background-color: rgba(255,255,255,.1); 
  1080.                         border-radius: 50%; 
  1081.                     }
  1082.                 
  1083.                     .title-badge.ytd-rich-grid-media, .video-badge.ytd-rich-grid-media {
  1084.                         position: absolute;
  1085.                         margin: 0px 10% 0 0;
  1086.                         right: 0;
  1087.                         top: 6em;
  1088.                     }
  1089.                 
  1090.                     ytd-rich-item-renderer[rendered-from-rich-grid] {
  1091.                         margin: 5px 5px 20px 5px !important;
  1092.                     }
  1093.  
  1094.                     .style-scope.ytd-two-column-browse-results-renderer {
  1095.                         --ytd-rich-grid-item-margin: .5% !important;
  1096.                     }
  1097.                 }
  1098.                 
  1099.                 .ytd-page-manager[page-subtype="channels"] {
  1100.                     ytd-tabbed-page-header.grid-5-columns #page-header.ytd-tabbed-page-header, ytd-tabbed-page-header.grid-5-columns[has-inset-banner] #page-header-banner.ytd-tabbed-page-header { 
  1101.                         padding: 0 !important; 
  1102.                     }
  1103.                 
  1104.                     ytd-two-column-browse-results-renderer.grid-5-columns, .grid-5-columns.ytd-two-column-browse-results-renderer { 
  1105.                         width: 100% !important; 
  1106.                     }
  1107.                     
  1108.                     ytd-rich-grid-renderer:not([is-default-grid]) #header.ytd-rich-grid-renderer {
  1109.                         transform: translateX(800px) translateY(-40px);
  1110.                         z-index: 2000;
  1111.                     }
  1112.                     
  1113.                     ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] {
  1114.                         margin-bottom: -32px;
  1115.                         margin-top: 0;
  1116.                     }
  1117.                     
  1118.                     .page-header-view-model-wiz__page-header-headline-image { 
  1119.                         margin-left: 110px; 
  1120.                     }
  1121.                 
  1122.                     ytd-rich-section-renderer { 
  1123.                         display: none; 
  1124.                     }
  1125.                 
  1126.                     ytd-menu-renderer.ytd-rich-grid-media { 
  1127.                         position: absolute; 
  1128.                         top: 4em; 
  1129.                         right: 5%; 
  1130.                         left:-auto; 
  1131.                         transform: rotate(90deg); 
  1132.                         background-color: rgba(255,255,255,.1); 
  1133.                         border-radius: 50%; 
  1134.                     }
  1135.                 
  1136.                     .yt-tab-group-shape-wiz__slider,.yt-tab-shape-wiz__tab-bar { 
  1137.                         display:none;
  1138.                     }
  1139.                 
  1140.                     .yt-tab-shape-wiz__tab--tab-selected,.yt-tab-shape-wiz__tab:hover { 
  1141.                         color:white; 
  1142.                     }
  1143.                 
  1144.                     #tabsContent > yt-tab-group-shape > div.yt-tab-group-shape-wiz__tabs > yt-tab-shape:nth-child(3) {
  1145.                         display:none!important;
  1146.                     }
  1147.                 
  1148.                     .style-scope.ytd-two-column-browse-results-renderer {
  1149.                         --ytd-rich-grid-item-margin: .5% !important;
  1150.                     }
  1151.                 }
  1152.                 
  1153.                 ytd-browse[page-subtype="channels"] #contentContainer {
  1154.                     padding-top: 0 !important;
  1155.                 }
  1156.                 
  1157.                 ytd-browse[page-subtype="channels"] tp-yt-app-header {
  1158.                     position: static !important;
  1159.                     transform: none !important;
  1160.                     transition: none !important;
  1161.                 }
  1162.                 
  1163.                 ytd-browse[page-subtype="channels"] tp-yt-app-header[fixed] {
  1164.                     position: static !important;
  1165.                     transform: none !important;
  1166.                     transition: none !important;
  1167.                 }
  1168.                 
  1169.                 ytd-browse[page-subtype="channels"] tp-yt-app-header #page-header {
  1170.                 position: static !important;
  1171.                     transform: none !important;
  1172.                 }
  1173.                 
  1174.                 .ytd-page-manager[page-subtype="subscriptions"] {
  1175.                     ytd-menu-renderer.ytd-rich-grid-media { 
  1176.                         position: absolute; 
  1177.                         top: 50px; 
  1178.                         right: auto; 
  1179.                         left: 3px; 
  1180.                         transform: rotate(90deg); 
  1181.                         background-color: rgba(255,255,255,.1); 
  1182.                         border-radius: 50%; 
  1183.                     }
  1184.                 
  1185.                     .title-badge.ytd-rich-grid-media, .video-badge.ytd-rich-grid-media {
  1186.                         position: absolute;
  1187.                         margin: 0px 10% 0 0;
  1188.                         right: 0;
  1189.                         top: 6em;
  1190.                     }
  1191.                 }
  1192.                 
  1193.                 .item.ytd-watch-metadata { 
  1194.                     margin-top: 7px; 
  1195.                 }
  1196.                 
  1197.                 #subheader.ytd-engagement-panel-title-header-renderer:not(:empty) {
  1198.                     padding: 0 !important;
  1199.                     transform: translateX(110px) translateY(-44px);
  1200.                     background-color: transparent;
  1201.                     border-top: none;
  1202.                 }
  1203.                 
  1204.                 #header.ytd-engagement-panel-title-header-renderer {
  1205.                     padding: 4px 7px 4px 7px;
  1206.                 }
  1207.                 
  1208.                 #visibility-button.ytd-engagement-panel-title-header-renderer, #information-button.ytd-engagement-panel-title-header-renderer {
  1209.                     z-index: 1;
  1210.                 }
  1211.                 
  1212.                 .ytChipShapeChip:hover  {
  1213.                     background: rgba(255,255,255,0.2);
  1214.                     border-color: transparent;
  1215.                 }
  1216.                 
  1217.                 .ytChipShapeActive:hover {
  1218.                     background-color: #f1f1f1;
  1219.                     color: #0f0f0f;
  1220.                 }
  1221.                 
  1222.                 ytd-engagement-panel-title-header-renderer {
  1223.                     height: 54px;
  1224.                 }
  1225.                 
  1226.                 .yt-spec-button-shape-next--icon-only-default {
  1227.                     width: 35px;
  1228.                     height: 35px;
  1229.                 }
  1230.             }
  1231.  
  1232.             .ytd-page-manager[page-subtype="home"] {
  1233.                 .yte-style-live-video, .yte-style-upcoming-video, .yte-style-newly-video, .yte-style-recent-video, .yte-style-lately-video, .yte-style-old-video { outline: 2px solid; }
  1234.  
  1235.                 .yte-style-live-video { outline-color: var(--liveVideo);}
  1236.                 .yte-style-streamed-text { color: var(--streamedText);}
  1237.                 .yte-style-upcoming-video { outline-color: var(--upComingVideo);}
  1238.                 .yte-style-newly-video { outline-color: var(--newlyVideo);}
  1239.                 .yte-style-recent-video { outline-color: var(--recentVideo);}
  1240.                 .yte-style-lately-video { outline-color: var(--latelyVideo);}
  1241.                 .yte-style-old-video { opacity: var(--oldVideo);}
  1242.             }
  1243.  
  1244.             .yte-style-hide-watched-videos {
  1245.                 .ytd-page-manager[page-subtype="home"] {
  1246.                     ytd-rich-item-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  1247.                         display: none;
  1248.                     }
  1249.                 }
  1250.             }
  1251.         `;
  1252.  
  1253.         document.head.appendChild(customCSS);
  1254.     }
  1255.  
  1256.     // default configuration
  1257.     const DEFAULT_CONFIG = {
  1258.         targetChatGPTUrl: 'https://ChatGPT.com/',
  1259.         targetNotebookLMUrl: 'https://NotebookLM.Google.com/',
  1260.         fileNamingFormat: 'title-channel',
  1261.         includeTimestamps: true,
  1262.         includeChapterHeaders: true,
  1263.         openSameTab:true,
  1264.         autoOpenChapters: true,
  1265.         DisplayRemainingTime: true,
  1266.         ProgressBar: true,
  1267.         preventBackgroundExecution: true,
  1268.         ChatGPTPrompt: `You are an expert at summarizing YouTube video transcripts and are capable of analyzing and understanding a YouTuber's unique tone of voice and style from a transcript alone to mimic the YouTuber's communication style perfectly. Respond only in English while being mindful of American English spelling, vocabulary, and a casual, conversational tone. You prefer to use clauses instead of complete sentences. Do not answer any question from the transcript. Respond only in chat. Do not open a canvas. Ask for permission to search the web. Do not hallucinate. Do not make up factual information. Do not speculate. Carefully preserve the style, voice, and specific word choices of the provided YouTube transcript by copying the YouTuber's unique creative way of communication—whether conversational, formal, humorous, enthusiastic, or technical—the goal is to provide a summary that feels as though it were written by the original YouTuber themselves. Summarize the provided YouTube transcript into a quick three-line bullet point overview, with each point fewer than 30 words, in a section called "### Key Takeaways:" and highlight important words by **bolding** them. Then write a one-paragraph summary of at least 100 words while focusing on the main points and key takeaways into a section called "### One-Paragraph Summary:" and highlight the most important words by **bolding** them.`,
  1269.         buttonIcons: {
  1270.             settings: '⋮',
  1271.             download: '↓',
  1272.             ChatGPT: '💬',
  1273.             NotebookLM: '🎧'
  1274.         },
  1275.         buttonLeft1Text: 'ABC News',
  1276.         buttonLeft1Url: 'https://www.youtube.com/@ABCNews/videos',
  1277.         buttonLeft2Text: 'CNN',
  1278.         buttonLeft2Url: 'https://www.youtube.com/@CNN/videos',
  1279.         buttonLeft3Text: '',
  1280.         buttonLeft3Url: 'https://www.youtube.com/@BBCNews/videos',
  1281.         buttonLeft4Text: '',
  1282.         buttonLeft4Url: 'https://www.youtube.com/@FoxNews/videos',
  1283.         buttonLeft5Text: '',
  1284.         buttonLeft5Url: 'https://www.youtube.com/@NBCNews/videos',
  1285.         buttonLeft6Text: '',
  1286.         buttonLeft6Url: 'https://www.youtube.com/@Formula1/videos',
  1287.         buttonLeft7Text: '',
  1288.         buttonLeft7Url: 'https://www.youtube.com/@SkySportsF1/videos',
  1289.         mButtonText: '☰',
  1290.         mButtonDisplay: false,
  1291.         colorCodeVideosEnabled: true,
  1292.         videosHideWatched: false,
  1293.         videosOldOpacity: 0.5,
  1294.         videosAgeColorPickerNewly: '#FFFF00', 
  1295.         videosAgeColorPickerRecent: '#FFA500', 
  1296.         videosAgeColorPickerLately: '#0000FF', 
  1297.         videosAgeColorPickerLive: '#FF0000',
  1298.         videosAgeColorPickerStreamed: '#FF0000',
  1299.         videosAgeColorPickerUpcoming: '#32CD32',
  1300.         textTransform: 'normal-case',
  1301.         defaultFontSize: 10,
  1302.         videosWatchedOpacity: 0.5,
  1303.         videosPerRow: 3,
  1304.         videosHideWatchedGlobal: false,
  1305.         hideVoiceSearch: false,
  1306.         hideCreateButton: false,
  1307.         hideMiniPlayer: false,
  1308.         squareSearchBar: true,
  1309.         squareDesign: false,
  1310.         compactLayout: false,
  1311.     };
  1312.  
  1313.     // load user configuration or use defaults
  1314.     let storedConfig = {};
  1315.     try {
  1316.         storedConfig = await GM.getValue('USER_CONFIG', {});
  1317.     } catch (error) {
  1318.         showNotification('Error loading user save!');
  1319.         console.error("YTE: Error loading user configuration:", error);
  1320.     }
  1321.  
  1322.     let USER_CONFIG = {
  1323.         ...DEFAULT_CONFIG,
  1324.         ...storedConfig,
  1325.         buttonIcons: {
  1326.             ...DEFAULT_CONFIG.buttonIcons,
  1327.             ...storedConfig.buttonIcons
  1328.         }
  1329.     };
  1330.  
  1331.     // ensure CSS settings load immediately
  1332.     function loadCSSsettings() {
  1333.         const body = document.querySelector('body');
  1334.  
  1335.         // buttonsLeft - sidebar visibility
  1336.         if (USER_CONFIG.mButtonDisplay) { body.classList.add('yte-style-hide-default-sidebar'); } else { body.classList.remove('yte-style-hide-default-sidebar'); }
  1337.  
  1338.         // custom css
  1339.         document.documentElement.style.setProperty('--textTransform', USER_CONFIG.textTransform);
  1340.         document.documentElement.style.setProperty('--fontSize', `${USER_CONFIG.defaultFontSize}px`);
  1341.         document.documentElement.style.setProperty('--watchedOpacity', USER_CONFIG.videosWatchedOpacity);
  1342.         document.documentElement.style.setProperty('--itemsPerRow', USER_CONFIG.videosPerRow);
  1343.         document.documentElement.style.setProperty('--itemsPerRowCalc', USER_CONFIG.videosPerRow + 2);
  1344.         if (USER_CONFIG.videosHideWatchedGlobal) { body.classList.add('yte-style-hide-watched-videos-global'); } else { body.classList.remove('yte-style-hide-watched-videos-global'); }
  1345.         if (USER_CONFIG.hideVoiceSearch) { body.classList.add('yte-style-hide-voice-search'); } else { body.classList.remove('yte-style-hide-voice-search'); }
  1346.         if (USER_CONFIG.hideCreateButton) { body.classList.add('yte-style-hide-create-button'); } else { body.classList.remove('yte-style-hide-create-button'); }
  1347.         if (USER_CONFIG.hideMiniPlayer) { body.classList.add('yte-style-hide-miniplayer'); } else { body.classList.remove('yte-style-hide-miniplayer'); }
  1348.         if (USER_CONFIG.squareSearchBar) { body.classList.add('yte-style-sqaure-search-bar'); } else { body.classList.remove('yte-style-sqaure-search-bar'); }
  1349.         if (USER_CONFIG.squareDesign) { body.classList.add('yte-style-sqaure-design'); } else { body.classList.remove('yte-style-sqaure-design'); }
  1350.         if (USER_CONFIG.compactLayout) { body.classList.add('yte-style-compact-layout'); } else { body.classList.remove('yte-style-compact-layout'); }
  1351.  
  1352.         // color code videos
  1353.         if (USER_CONFIG.videosHideWatched) { body.classList.add('yte-style-hide-watched-videos'); } else { body.classList.remove('yte-style-hide-watched-videos'); }
  1354.         document.documentElement.style.setProperty('--liveVideo', USER_CONFIG.videosAgeColorPickerLive);
  1355.         document.documentElement.style.setProperty('--streamedText', USER_CONFIG.videosAgeColorPickerStreamed);
  1356.         document.documentElement.style.setProperty('--upComingVideo', USER_CONFIG.videosAgeColorPickerUpcoming);
  1357.         document.documentElement.style.setProperty('--newlyVideo', USER_CONFIG.videosAgeColorPickerNewly);
  1358.         document.documentElement.style.setProperty('--recentVideo', USER_CONFIG.videosAgeColorPickerRecent);
  1359.         document.documentElement.style.setProperty('--latelyVideo', USER_CONFIG.videosAgeColorPickerLately);
  1360.         document.documentElement.style.setProperty('--oldVideo', USER_CONFIG.videosOldOpacity); 
  1361.     }
  1362.  
  1363.     // create and show the settings modal
  1364.     function showSettingsModal() {
  1365.         const existingModal = document.getElementById('yt-transcript-settings-modal');
  1366.         if (existingModal) {
  1367.             existingModal.style.display = 'flex';
  1368.             document.body.style.overflow = 'hidden';
  1369.             return;
  1370.         }
  1371.  
  1372.         // create modal elements
  1373.         const modal = document.createElement('div');
  1374.         modal.id = 'yt-transcript-settings-modal';
  1375.         modal.classList.add('overlay');
  1376.  
  1377.         const modalContent = document.createElement('div');
  1378.         modalContent.classList.add('modal-content');
  1379.  
  1380.         // modal header
  1381.         const header = document.createElement('a');
  1382.         header.href = 'https://github.com/TimMacy/YouTubeTranscriptExporter';
  1383.         header.target = '_blank';
  1384.         header.innerText = 'YouTube Transcript Exporter';
  1385.         header.title = 'GitHub Repository for YouTube Transcript Exporter';
  1386.         header.classList.add('header');
  1387.         modalContent.appendChild(header);
  1388.  
  1389.         // create form elements for each setting
  1390.         const form = document.createElement('form');
  1391.         form.id = 'yt-transcript-settings-form';
  1392.  
  1393.         // Button Icons
  1394.         const iconsHeader = document.createElement('label');
  1395.         iconsHeader.innerText = 'Button Icons:';
  1396.         iconsHeader.classList.add('button-icons');
  1397.         form.appendChild(iconsHeader);
  1398.  
  1399.         const iconsContainer = document.createElement('div');
  1400.         iconsContainer.classList.add('icons-container');
  1401.  
  1402.         function createIconInputField(labelText, settingKey, settingValue, labelClass) {
  1403.             const container = document.createElement('div');
  1404.             container.classList.add('container-button');
  1405.  
  1406.             const input = document.createElement('input');
  1407.             const iconInputClass = `${settingKey}-input-field`;
  1408.             input.type = 'text';
  1409.             input.name = settingKey;
  1410.             input.value = settingValue;
  1411.             input.classList.add('container-button-input');
  1412.             input.classList.add(iconInputClass);
  1413.  
  1414.             const label = document.createElement('label');
  1415.             label.innerText = labelText;
  1416.             label.className = labelClass;
  1417.             label.classList.add('container-button-label');
  1418.  
  1419.             container.appendChild(input);
  1420.             container.appendChild(label);
  1421.  
  1422.             return container;
  1423.         }
  1424.  
  1425.         iconsContainer.appendChild(createIconInputField('NotebookLM', 'buttonIconNotebookLM', USER_CONFIG.buttonIcons.NotebookLM, 'label-NotebookLM'));
  1426.         iconsContainer.appendChild(createIconInputField('ChatGPT', 'buttonIconChatGPT', USER_CONFIG.buttonIcons.ChatGPT, 'label-ChatGPT'));
  1427.         iconsContainer.appendChild(createIconInputField('Download', 'buttonIconDownload', USER_CONFIG.buttonIcons.download, 'label-download'));
  1428.         iconsContainer.appendChild(createIconInputField('Settings', 'buttonIconSettings', USER_CONFIG.buttonIcons.settings, 'label-settings'));
  1429.  
  1430.         form.appendChild(iconsContainer);
  1431.  
  1432.         // NotebookLM URL
  1433.         form.appendChild(createInputField('NotebookLM URL (Copy transcript, then open the website):', 'targetNotebookLMUrl', USER_CONFIG.targetNotebookLMUrl, 'label-NotebookLM'));
  1434.  
  1435.         // ChatGPT URL
  1436.         form.appendChild(createInputField('ChatGPT URL (Copy transcript with the prompt, then open the website):', 'targetChatGPTUrl', USER_CONFIG.targetChatGPTUrl, 'label-ChatGPT'));
  1437.  
  1438.         // Spacer-Top
  1439.         const spacerTop = document.createElement('div');
  1440.         spacerTop.classList.add('spacer-top');
  1441.         form.appendChild(spacerTop);
  1442.  
  1443.         // File Naming Format
  1444.         form.appendChild(createSelectField('Text File Naming Format:', 'label-download', 'fileNamingFormat', USER_CONFIG.fileNamingFormat, {
  1445.             'title-channel': 'Title - Channel.txt (default)',
  1446.             'channel-title': 'Channel - Title.txt',
  1447.             'date-title-channel': 'uploadDate - Title - Channel.txt',
  1448.             'date-channel-title': 'uploadDate - Channel - Title.txt',
  1449.         }));
  1450.  
  1451.         // include Timestamps
  1452.         form.appendChild(createCheckboxField('Include Timestamps in the Transcript (default: yes)', 'includeTimestamps', USER_CONFIG.includeTimestamps));
  1453.  
  1454.         // include Chapter Headers
  1455.         form.appendChild(createCheckboxField('Include Chapter Headers in the Transcript (default: yes)', 'includeChapterHeaders', USER_CONFIG.includeChapterHeaders));
  1456.  
  1457.         // open in Same Tab
  1458.         form.appendChild(createCheckboxField('Open Links in the Same Tab (default: yes)', 'openSameTab', USER_CONFIG.openSameTab));
  1459.  
  1460.         // Auto Open Chapter Panel
  1461.         form.appendChild(createCheckboxField('Automatically Open the Chapter Panel (default: yes)', 'autoOpenChapters', USER_CONFIG.autoOpenChapters));
  1462.  
  1463.         // Display Remaining Time
  1464.         form.appendChild(createCheckboxField('Display Remaining Time Under the Video (default: yes)', 'DisplayRemainingTime', USER_CONFIG.DisplayRemainingTime));
  1465.  
  1466.         // keep Progress Bar Visible
  1467.         form.appendChild(createCheckboxField('Keep the Progress Bar Visible (default: yes)', 'ProgressBar', USER_CONFIG.ProgressBar));
  1468.  
  1469.         // prevent Execution in Background Tabs
  1470.         form.appendChild(createCheckboxField('Important for Chrome! (default: yes)', 'preventBackgroundExecution', USER_CONFIG.preventBackgroundExecution));
  1471.  
  1472.         // info for Chrome
  1473.         const description = document.createElement('small');
  1474.         description.innerText = 'Prevents early script execution in background tabs.\nWhile this feature is superfluous in Safari, it is essential for Chrome.';
  1475.         description.classList.add('chrome-info');
  1476.         form.appendChild(description);
  1477.  
  1478.         // extra settings buttons 
  1479.         const extraSettings = document.createElement('div');
  1480.         extraSettings.classList.add('extra-button-container'); 
  1481.  
  1482.         const buttonsLeft = document.createElement('button');
  1483.         buttonsLeft.type = 'button';
  1484.         buttonsLeft.innerText = 'Links in Header';
  1485.         buttonsLeft.classList.add('btn-style-settings');
  1486.         buttonsLeft.onclick = () => showSubPanel(createLinksInHeaderContent(), 'linksInHeader');
  1487.  
  1488.         const customCSSButton = document.createElement('button');
  1489.         customCSSButton.type = 'button';
  1490.         customCSSButton.innerText = 'Customize CSS';
  1491.         customCSSButton.classList.add('btn-style-settings');
  1492.         customCSSButton.onclick = () => showSubPanel(createCustomCSSContent(), 'createcustomCSS');
  1493.  
  1494.         const ColorCodeVideos = document.createElement('button');
  1495.         ColorCodeVideos.type = 'button';
  1496.         ColorCodeVideos.innerText = 'Color Code Videos';
  1497.         ColorCodeVideos.classList.add('btn-style-settings');
  1498.         ColorCodeVideos.onclick = () => showSubPanel(createColorCodeVideosContent(), 'colorCodeVideos');
  1499.  
  1500.         extraSettings.appendChild(buttonsLeft);
  1501.         extraSettings.appendChild(customCSSButton);
  1502.         extraSettings.appendChild(ColorCodeVideos);
  1503.  
  1504.         form.appendChild(extraSettings);
  1505.  
  1506.         // ChatGPT Prompt
  1507.         form.appendChild(createTextareaField('ChatGPT Prompt:', 'ChatGPTPrompt', USER_CONFIG.ChatGPTPrompt, 'label-ChatGPT'));  
  1508.         
  1509.         // action buttons container
  1510.         const buttonContainer = document.createElement('div');
  1511.         buttonContainer.classList.add('button-container-end');
  1512.  
  1513.         // export and import button container
  1514.         const exportImportContainer = document.createElement('div');
  1515.         exportImportContainer.classList.add('button-container-backup');
  1516.  
  1517.         const exportButton = document.createElement('button');
  1518.         exportButton.type = 'button';
  1519.         exportButton.innerText = 'Export Settings';
  1520.         exportButton.classList.add('btn-style-settings');
  1521.         exportButton.onclick = exportSettings;
  1522.  
  1523.         const importButton = document.createElement('button');
  1524.         importButton.type = 'button';
  1525.         importButton.innerText = 'Import Settings';
  1526.         importButton.classList.add('btn-style-settings');
  1527.         importButton.onclick = importSettings;
  1528.  
  1529.         // Copyright
  1530.         const copyright = document.createElement('a');
  1531.         copyright.href = 'https://github.com/TimMacy'; 
  1532.         copyright.target = '_blank';
  1533.         copyright.innerText = '© 2024 Tim Macy';
  1534.         copyright.title = 'Copyright by Tim Macy';
  1535.         copyright.classList.add('copyright');
  1536.  
  1537.         const spacer = document.createElement('div');
  1538.         spacer.style = 'flex: 1;';
  1539.  
  1540.         // Save, Reset, and Cancel Buttons
  1541.         const buttonContainerSettings = document.createElement('div');
  1542.         buttonContainerSettings.classList.add('button-container-settings');
  1543.  
  1544.         const saveButton = document.createElement('button');
  1545.         saveButton.type = 'button';
  1546.         saveButton.innerText = 'Save';
  1547.         saveButton.classList.add('btn-style-settings');
  1548.         saveButton.onclick = saveSettings;
  1549.  
  1550.         const resetButton = document.createElement('button');
  1551.         resetButton.type = 'button';
  1552.         resetButton.innerText = 'Reset to Default';
  1553.         resetButton.classList.add('btn-style-settings');
  1554.         resetButton.onclick = async () => {
  1555.             const userConfirmed = window.confirm("All settings will be reset to their default values.");
  1556.             if (!userConfirmed) { return; }
  1557.         
  1558.             try {
  1559.                 USER_CONFIG = { ...DEFAULT_CONFIG };
  1560.                 await GM.setValue('USER_CONFIG', USER_CONFIG);
  1561.                 showNotification('Settings have been reset to default!');
  1562.                 document.getElementById('yt-transcript-settings-modal').style.display = 'none';
  1563.                 setTimeout(() => { location.reload(); }, 1000);
  1564.             } catch (error) {
  1565.                 showNotification('Error resetting settings to default!');
  1566.                 console.error("YTE: Error resetting settings to default:", error);
  1567.             }
  1568.         };
  1569.  
  1570.         const cancelButton = document.createElement('button');
  1571.         cancelButton.type = 'button';
  1572.         cancelButton.innerText = 'Cancel';
  1573.         cancelButton.classList.add('btn-style-settings');
  1574.         cancelButton.onclick = () => { modal.style.display = 'none'; document.body.style.overflow = ''; };
  1575.  
  1576.         exportImportContainer.appendChild(exportButton);
  1577.         exportImportContainer.appendChild(importButton);
  1578.  
  1579.         buttonContainerSettings.appendChild(copyright);
  1580.         buttonContainerSettings.appendChild(spacer);
  1581.         buttonContainerSettings.appendChild(saveButton);
  1582.         buttonContainerSettings.appendChild(resetButton);
  1583.         buttonContainerSettings.appendChild(cancelButton);
  1584.  
  1585.         buttonContainer.appendChild(exportImportContainer);
  1586.         buttonContainer.appendChild(buttonContainerSettings);
  1587.  
  1588.         form.appendChild(buttonContainer);
  1589.         modalContent.appendChild(form);
  1590.         modal.appendChild(modalContent);
  1591.         document.body.appendChild(modal);
  1592.         document.body.style.overflow = 'hidden';
  1593.  
  1594.         // text area scroll on click
  1595.         let animationTriggered = false;
  1596.  
  1597.         document.querySelector('.chatgpt-prompt-textarea').addEventListener('click', function () {
  1598.             if (animationTriggered) return;
  1599.             animationTriggered = true;
  1600.  
  1601.             const modalContent = this.closest('#yt-transcript-settings-form');
  1602.             if (!modalContent) { animationTriggered = false; return; }
  1603.  
  1604.             const textArea = this;
  1605.             const buttons = modalContent.querySelector('.button-container-end');
  1606.             const startHeight = 65;
  1607.             const endHeight = 432;
  1608.             const duration = 500;
  1609.  
  1610.             const modalContentRect = modalContent.getBoundingClientRect();
  1611.             const textAreaRect = textArea.getBoundingClientRect();
  1612.             const buttonsRect = buttons.getBoundingClientRect();
  1613.  
  1614.             const textAreaTop = textAreaRect.top - modalContentRect.top + modalContent.scrollTop;
  1615.             const buttonsBottom = buttonsRect.bottom - modalContentRect.top + modalContent.scrollTop;
  1616.             const contentHeightAfterExpansion = buttonsBottom + (endHeight - startHeight);
  1617.             const modalVisibleHeight = modalContent.clientHeight;
  1618.             const contentWillFit = contentHeightAfterExpansion <= modalVisibleHeight;
  1619.             const maxScrollTop = textAreaTop;
  1620.  
  1621.             let desiredScrollTop;
  1622.  
  1623.             if (contentWillFit) { desiredScrollTop = contentHeightAfterExpansion - modalVisibleHeight;
  1624.             } else { desiredScrollTop = buttonsBottom + (endHeight - startHeight) - modalVisibleHeight; }
  1625.  
  1626.             const newScrollTop = Math.min(desiredScrollTop, maxScrollTop);
  1627.             const startScrollTop = modalContent.scrollTop;
  1628.             const scrollDistance = newScrollTop - startScrollTop;
  1629.             const startTime = performance.now();
  1630.  
  1631.             function animateScroll(currentTime) {
  1632.                 const elapsedTime = currentTime - startTime;
  1633.                 const progress = Math.min(elapsedTime / duration, 1);
  1634.  
  1635.                 const easeProgress = progress < 0.5
  1636.                     ? 2 * progress * progress
  1637.                     : -1 + (4 - 2 * progress) * progress;
  1638.  
  1639.                 const currentScrollTop = startScrollTop + scrollDistance * easeProgress;
  1640.                 modalContent.scrollTop = currentScrollTop;
  1641.  
  1642.                 if (progress < 1) { requestAnimationFrame(animateScroll);
  1643.                 } else { animationTriggered = false; }
  1644.             }
  1645.  
  1646.             requestAnimationFrame(animateScroll);
  1647.         });
  1648.  
  1649.         // close modal on overlay click
  1650.         modal.addEventListener('click', (event) => {
  1651.             if (event.target === modal) {
  1652.                 modal.style.display = 'none';
  1653.                 document.body.style.overflow = '';
  1654.             }
  1655.         });
  1656.  
  1657.         // close modal with ESC key
  1658.         window.addEventListener('keydown', function (event) {
  1659.             if (event.key === 'Escape') {
  1660.             modal.style.display = 'none';
  1661.             document.body.style.overflow = '';
  1662.             }
  1663.         });
  1664.  
  1665.         // sub-panels
  1666.         function showSubPanel(panelContent, panelId) {
  1667.             let subPanelOverlay = document.querySelector(`.sub-panel-overlay[data-panel-id="${panelId}"]`);
  1668.  
  1669.             if (subPanelOverlay) { subPanelOverlay.style.display = 'flex'; } 
  1670.             else {
  1671.                 subPanelOverlay = document.createElement('div');
  1672.                 subPanelOverlay.classList.add('sub-panel-overlay');
  1673.                 subPanelOverlay.setAttribute('data-panel-id', panelId);
  1674.  
  1675.                 const subPanel = document.createElement('div');
  1676.                 subPanel.classList.add('sub-panel');
  1677.  
  1678.                 const closeButton = document.createElement('button');
  1679.                 closeButton.type = 'button';
  1680.                 closeButton.innerText = 'Close';
  1681.                 closeButton.classList.add('btn-style-settings');
  1682.                 closeButton.onclick = () => { subPanelOverlay.style.display = 'none'; };
  1683.                 subPanel.appendChild(closeButton);
  1684.  
  1685.                 if (panelContent) { subPanel.appendChild(panelContent); }
  1686.             
  1687.                 subPanelOverlay.appendChild(subPanel);
  1688.                 document.body.appendChild(subPanelOverlay);
  1689.             }
  1690.         }
  1691.  
  1692.         // links in header
  1693.         function createLinksInHeaderContent() {
  1694.             const form = document.createElement('form');
  1695.             form.id = 'links-in-header-form';
  1696.  
  1697.             const subPanelHeader = document.createElement('div');
  1698.             subPanelHeader.classList.add('sub-panel-header');
  1699.             subPanelHeader.textContent = 'Configure the links on the left side of the YouTube header';
  1700.             form.appendChild(subPanelHeader);
  1701.  
  1702.             const infoLinksHeader = document.createElement('small');
  1703.             infoLinksHeader.innerText = "Up to seven links can be added next to the logo. An empty 'Link Text' field won't insert the link into the header.\nIf the left navigation bar is hidden, a replacement icon will prepend the links, while retaining the default functionality of opening and closing the sidebar.";
  1704.             infoLinksHeader.classList.add('chrome-info');
  1705.             form.appendChild(infoLinksHeader);
  1706.  
  1707.             const sidebarContainer = document.createElement('div');
  1708.             sidebarContainer.classList.add('sidebar-container'); 
  1709.  
  1710.             // hide left navigation bar and replacement icon
  1711.             const checkboxField = createCheckboxField('Hide Left Navigation Bar', 'mButtonDisplay', USER_CONFIG.mButtonDisplay);
  1712.             sidebarContainer.appendChild(checkboxField);
  1713.  
  1714.             const inputField = createInputField('Left Navigation Bar Replacement Icon', 'mButtonText', USER_CONFIG.mButtonText, 'label-mButtonText');
  1715.             sidebarContainer.appendChild(inputField);
  1716.  
  1717.             form.appendChild(sidebarContainer);
  1718.  
  1719.             // function to create a link input group
  1720.             function createButtonInputGroup(linkNumber) {
  1721.                 const container = document.createElement('div');
  1722.                 container.classList.add('links-header-container');
  1723.  
  1724.                 // link text
  1725.                 const textField = createInputField(`Link ${linkNumber} Text`, `buttonLeft${linkNumber}Text`, USER_CONFIG[`buttonLeft${linkNumber}Text`], `label-buttonLeft${linkNumber}Text`);
  1726.                 container.appendChild(textField);
  1727.  
  1728.                 // link URL
  1729.                 const urlField = createInputField(`Link ${linkNumber} URL`, `buttonLeft${linkNumber}Url`, USER_CONFIG[`buttonLeft${linkNumber}Url`], `label-buttonLeft${linkNumber}Url`);
  1730.                 container.appendChild(urlField);
  1731.  
  1732.                 return container;
  1733.             }
  1734.  
  1735.             // create input groups for links 1 through 6
  1736.             for (let i = 1; i <= 7; i++) {
  1737.                 form.appendChild(createButtonInputGroup(i));
  1738.             }
  1739.  
  1740.             return form;
  1741.         }
  1742.  
  1743.         // custom css
  1744.         function createCustomCSSContent() {
  1745.             const form = document.createElement('form');
  1746.             form.id = 'custom-css-form';
  1747.  
  1748.             const subPanelHeader = document.createElement('div');
  1749.             subPanelHeader.classList.add('sub-panel-header');
  1750.             subPanelHeader.textContent = 'Customize YouTube Appearance';
  1751.             form.appendChild(subPanelHeader);
  1752.  
  1753.             // dim watched videos
  1754.             const videosWatchedContainer = createSliderInputField( 'Change Opacity of Watched Videos (default 0.5):', 'videosWatchedOpacity', USER_CONFIG.videosWatchedOpacity, '0', '1', '0.1' );
  1755.             form.appendChild(videosWatchedContainer);
  1756.  
  1757.             // text transform
  1758.             form.appendChild(createSelectField('Text Transform:', 'label-Text-Transform', 'textTransform', USER_CONFIG.textTransform, {
  1759.                 'uppercase': 'uppercase - THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.',
  1760.                 'lowercase': 'lowercase - the quick brown fox jumps over the lazy dog.',
  1761.                 'capitalize': 'capitalize - The Quick Brown Fox Jumps Over The Lazy Dog.',
  1762.                 'normal-case': 'normal-case (default) - The quick brown fox jumps over the lazy dog.',
  1763.             }));
  1764.  
  1765.             // font size
  1766.             const defaultFontSizeField = createNumberInputField('Font Size (default: 10px)', 'defaultFontSize', USER_CONFIG.defaultFontSize);
  1767.             form.appendChild(defaultFontSizeField);
  1768.  
  1769.             // videos per row
  1770.             const videosPerRow = createNumberInputField('Number of Videos per Row (default: 3)', 'videosPerRow', USER_CONFIG.videosPerRow);
  1771.             form.appendChild(videosPerRow);
  1772.  
  1773.             // hide voice search button
  1774.             const hideVoiceSearch = createCheckboxField('Hide Voice Search Button in the Header (default: no)', 'hideVoiceSearch', USER_CONFIG.hideVoiceSearch);
  1775.             form.appendChild(hideVoiceSearch);
  1776.  
  1777.             // hide create button
  1778.             const hideCreateButton = createCheckboxField('Hide Create Button in the Header (default: no)', 'hideCreateButton', USER_CONFIG.hideCreateButton);
  1779.             form.appendChild(hideCreateButton);
  1780.  
  1781.             // hide watched videos globally
  1782.             const videosHideWatchedGlobal = createCheckboxField('Hide Watched Videos Globally (default: no)', 'videosHideWatchedGlobal', USER_CONFIG.videosHideWatchedGlobal);
  1783.             form.appendChild(videosHideWatchedGlobal);
  1784.  
  1785.             // hide miniplayer
  1786.             const hideMiniplayer = createCheckboxField('Hide Miniplayer (default: no)', 'hideMiniplayer', USER_CONFIG.hideMiniplayer);
  1787.             form.appendChild(hideMiniplayer);
  1788.  
  1789.             // square and compact search bar
  1790.             const squareSearchBar = createCheckboxField('Square and Compact Search Bar (default: yes)', 'squareSearchBar', USER_CONFIG.squareSearchBar);
  1791.             form.appendChild(squareSearchBar);
  1792.  
  1793.             // square design
  1794.             const squareDesign = createCheckboxField('Square Design (default: no)', 'squareDesign', USER_CONFIG.squareDesign);
  1795.             form.appendChild(squareDesign);
  1796.  
  1797.             // compact layout
  1798.             const compactLayout = createCheckboxField('Compact Layout (default: no)', 'compactLayout', USER_CONFIG.compactLayout);
  1799.             form.appendChild(compactLayout);
  1800.  
  1801.             return form;
  1802.         }
  1803.  
  1804.         // color code videos
  1805.         function createColorCodeVideosContent() {
  1806.             const form = document.createElement('form');
  1807.             form.id = 'color-code-videos-form';
  1808.  
  1809.             const subPanelHeader = document.createElement('div');
  1810.             subPanelHeader.classList.add('sub-panel-header');
  1811.             subPanelHeader.textContent = 'Configure Color Codes for Videos on Home';
  1812.             form.appendChild(subPanelHeader);
  1813.  
  1814.             // activate color code videos
  1815.             const checkboxField = createCheckboxField('Activate Color Code Videos (default: yes)', 'colorCodeVideosEnabled', USER_CONFIG.colorCodeVideosEnabled );
  1816.             form.appendChild(checkboxField); 
  1817.  
  1818.             const checkboxFieldWatched = createCheckboxField('Hide Watched Videos (Only on Home) (default: no)', 'videosHideWatched', USER_CONFIG.videosHideWatched );
  1819.             form.appendChild(checkboxFieldWatched); 
  1820.  
  1821.             // opacity picker for old videos
  1822.             const videosOldContainer = createSliderInputField( 'Change opacity of videos uploaded more than 6 months ago:', 'videosOldOpacity', USER_CONFIG.videosOldOpacity, '0', '1', '0.1' );
  1823.             form.appendChild(videosOldContainer);
  1824.  
  1825.             // color pickers for different video ages
  1826.             const videosAgeContainer = document.createElement('div');
  1827.             videosAgeContainer.classList.add('videos-age-container');
  1828.  
  1829.             function createLabelColorPair(labelText, configKey) {
  1830.                 const row = document.createElement('div');
  1831.                 row.classList.add('videos-age-row');
  1832.  
  1833.                 const label = document.createElement('span');
  1834.                 label.classList.add('label-style-settings');
  1835.                 label.innerText = labelText;
  1836.                 row.appendChild(label);
  1837.  
  1838.                 const colorPicker = document.createElement('input');
  1839.                 colorPicker.type = 'color';
  1840.                 colorPicker.value = USER_CONFIG[configKey];
  1841.                 colorPicker.name = configKey;
  1842.                 row.appendChild(colorPicker);
  1843.  
  1844.                 videosAgeContainer.appendChild(row);
  1845.             }
  1846.  
  1847.             createLabelColorPair('Videos uploaded within the last 24 hours:', 'videosAgeColorPickerNewly');
  1848.             createLabelColorPair('Videos uploaded within the past week:', 'videosAgeColorPickerRecent');
  1849.             createLabelColorPair('Videos uploaded within the past month:', 'videosAgeColorPickerLately');
  1850.             createLabelColorPair('Videos currently live:', 'videosAgeColorPickerLive');
  1851.             createLabelColorPair('The word "streamed" from Videos that were live:', 'videosAgeColorPickerStreamed');
  1852.             createLabelColorPair('Scheduled videos and upcoming live streams:', 'videosAgeColorPickerUpcoming');
  1853.  
  1854.             form.appendChild(videosAgeContainer);
  1855.  
  1856.             return form;
  1857.         }
  1858.     }
  1859.  
  1860.     // helper function to create input fields
  1861.     function createInputField(labelText, settingKey, settingValue, labelClass) {
  1862.         const container = document.createElement('div');
  1863.         container.classList.add('url-container');
  1864.  
  1865.         const label = document.createElement('label');
  1866.         label.innerText = labelText;
  1867.         label.className = labelClass;
  1868.         label.classList.add('label-style-settings');
  1869.         container.appendChild(label);
  1870.  
  1871.         const input = document.createElement('input');
  1872.         const fieldInputClass = `input-field-${settingKey}`;
  1873.         input.type = 'text';
  1874.         input.name = settingKey;
  1875.         input.value = settingValue;
  1876.         input.classList.add('input-field-url');
  1877.         input.classList.add(fieldInputClass);
  1878.         container.appendChild(input);
  1879.  
  1880.         return container;
  1881.     }
  1882.  
  1883.     // helper function to create select fields
  1884.     function createSelectField(labelText, labelClass, settingKey, settingValue, options) {
  1885.         const container = document.createElement('div');
  1886.         container.classList.add('file-naming-container');
  1887.     
  1888.         const label = document.createElement('label');
  1889.         label.innerText = labelText;
  1890.         label.className = labelClass;
  1891.         label.classList.add('label-style-settings');
  1892.         container.appendChild(label);
  1893.     
  1894.         const select = document.createElement('div');
  1895.         select.classList.add('select-file-naming');
  1896.         select.innerText = options[settingValue];
  1897.         select.setAttribute('tabindex', '0');
  1898.         container.appendChild(select);
  1899.  
  1900.         const hiddenSelect = document.createElement('select');
  1901.         hiddenSelect.name = settingKey;
  1902.         hiddenSelect.classList.add('hidden-select');
  1903.         for (const [value, text] of Object.entries(options)) {
  1904.             const option = document.createElement('option');
  1905.             option.value = value;
  1906.             option.text = text;
  1907.             if (value === settingValue) {
  1908.                 option.selected = true;
  1909.             }
  1910.             hiddenSelect.appendChild(option);
  1911.         }
  1912.         container.appendChild(hiddenSelect);
  1913.     
  1914.         const dropdownList = document.createElement('div');
  1915.         dropdownList.classList.add('dropdown-list');
  1916.         container.appendChild(dropdownList);
  1917.     
  1918.         for (const [value, text] of Object.entries(options)) {
  1919.             const item = document.createElement('div');
  1920.             item.classList.add('dropdown-item');
  1921.             item.innerText = text;
  1922.             item.dataset.value = value;
  1923.     
  1924.             if (value === settingValue) { item.classList.add('dropdown-item-selected'); }
  1925.  
  1926.             item.addEventListener('click', () => {
  1927.                 const previouslySelected = dropdownList.querySelector('.dropdown-item-selected');
  1928.                 if (previouslySelected) {
  1929.                     previouslySelected.classList.remove('dropdown-item-selected');
  1930.                 }
  1931.     
  1932.                 item.classList.add('dropdown-item-selected');
  1933.                 select.innerText = text;
  1934.                 hiddenSelect.value = value;
  1935.                 dropdownList.classList.remove('show');
  1936.             });
  1937.     
  1938.             dropdownList.appendChild(item);
  1939.         }
  1940.  
  1941.         // open dropdown
  1942.         select.addEventListener('click', (event) => {
  1943.             event.stopPropagation();
  1944.             dropdownList.classList.toggle('show');
  1945.         });
  1946.  
  1947.         // close dropdown
  1948.         document.addEventListener('click', () => {
  1949.             dropdownList.classList.remove('show');
  1950.         });
  1951.     
  1952.         return container;
  1953.     }
  1954.  
  1955.     // helper function to create checkbox fields
  1956.     function createCheckboxField(labelText, settingKey, settingValue) {
  1957.         const container = document.createElement('div');
  1958.         container.classList.add('checkbox-container');
  1959.  
  1960.         const label = document.createElement('label');
  1961.         label.classList.add('checkbox-label');
  1962.  
  1963.         const checkbox = document.createElement('input');
  1964.         checkbox.type = 'checkbox';
  1965.         checkbox.name = settingKey;
  1966.         checkbox.checked = settingValue;
  1967.         checkbox.classList.add('checkbox-field');
  1968.         label.appendChild(checkbox);
  1969.  
  1970.         const span = document.createElement('span');
  1971.         span.innerText = labelText;
  1972.         label.appendChild(span);
  1973.  
  1974.         container.appendChild(label);
  1975.         return container;
  1976.     }
  1977.  
  1978.     // helper function to create a number input fields
  1979.     function createNumberInputField(labelText, settingKey, settingValue) {
  1980.         const container = document.createElement('div');
  1981.         container.classList.add('number-input-container');
  1982.  
  1983.         const label = document.createElement('label');
  1984.         label.classList.add('number-input-label');
  1985.  
  1986.         const numberInput = document.createElement('input');
  1987.         numberInput.type = 'number';
  1988.         numberInput.name = settingKey;
  1989.         numberInput.value = settingValue;
  1990.         numberInput.min = 1; 
  1991.         numberInput.max = 20; 
  1992.         numberInput.step = 1; 
  1993.         numberInput.classList.add('number-input-field'); 
  1994.         label.appendChild(numberInput);
  1995.  
  1996.         const span = document.createElement('span');
  1997.         span.innerText = labelText;
  1998.         label.appendChild(span);
  1999.  
  2000.         container.appendChild(label);
  2001.         return container;
  2002.     }
  2003.  
  2004.     // helper function to create a slider fields
  2005.     function createSliderInputField(labelText, settingKey, settingValue, min, max, step) {
  2006.         const container = document.createElement('div');
  2007.         container.classList.add('videos-old-container');
  2008.  
  2009.         const label = document.createElement('span');
  2010.         label.classList.add('label-style-settings');
  2011.         label.innerText = labelText;
  2012.         container.appendChild(label);
  2013.  
  2014.         const sliderContainer = document.createElement('div');
  2015.         sliderContainer.classList.add('slider-container');
  2016.  
  2017.         const leftLabel = document.createElement('span');
  2018.         leftLabel.innerText = min;
  2019.         sliderContainer.appendChild(leftLabel);
  2020.  
  2021.         const slider = document.createElement('input');
  2022.         slider.type = 'range';
  2023.         slider.min = min;
  2024.         slider.max = max;
  2025.         slider.step = step;
  2026.         slider.value = settingValue;
  2027.         slider.name = settingKey;
  2028.         sliderContainer.appendChild(slider);
  2029.  
  2030.         const rightLabel = document.createElement('span');
  2031.         rightLabel.innerText = max;
  2032.         sliderContainer.appendChild(rightLabel);
  2033.  
  2034.         const currentValue = document.createElement('span');
  2035.         currentValue.innerText = `(${parseFloat(slider.value).toFixed(1)})`;
  2036.         sliderContainer.appendChild(currentValue);
  2037.  
  2038.         container.appendChild(sliderContainer);
  2039.  
  2040.         slider.addEventListener('input', (e) => {
  2041.             const value = parseFloat(e.target.value).toFixed(1);
  2042.             currentValue.innerText = `(${value})`;
  2043.         });
  2044.  
  2045.         return container;
  2046.     }
  2047.  
  2048.     // helper function to create a textarea fields
  2049.     function createTextareaField(labelText, settingKey, settingValue, labelClass) {
  2050.         const container = document.createElement('chatgpt-prompt');
  2051.     
  2052.         const label = document.createElement('label');
  2053.         label.innerText = labelText;
  2054.         label.className = labelClass;
  2055.         label.classList.add('label-style-settings');
  2056.         container.appendChild(label);
  2057.     
  2058.         const textarea = document.createElement('textarea');
  2059.         textarea.name = settingKey;
  2060.         textarea.value = settingValue;
  2061.         textarea.classList.add('chatgpt-prompt-textarea');
  2062.         container.appendChild(textarea);
  2063.     
  2064.         return container;
  2065.     }
  2066.  
  2067.     // function to save settings
  2068.     async function saveSettings() {
  2069.         const form = document.getElementById('yt-transcript-settings-form');
  2070.         const subPanelLinks = document.getElementById('links-in-header-form');
  2071.         const subPanelCustomCSS = document.getElementById('custom-css-form');
  2072.         const subPanelColor = document.getElementById('color-code-videos-form');
  2073.  
  2074.         // function to ensure secure URLs
  2075.         function normalizeUrl(url) {
  2076.             url = url.trim();
  2077.             if (/^https?:\/\//i.test(url)) {
  2078.                 url = url.replace(/^http:\/\//i, 'https://');
  2079.             } else { url = 'https://' + url; }
  2080.             return url;
  2081.         }
  2082.  
  2083.         // validate ChatGPT URL
  2084.         let targetChatGPTUrl = form.elements.targetChatGPTUrl.value.trim();
  2085.         if (targetChatGPTUrl !== '') {
  2086.             USER_CONFIG.targetChatGPTUrl = normalizeUrl(targetChatGPTUrl);
  2087.         } else { delete USER_CONFIG.targetChatGPTUrl; }
  2088.  
  2089.         // validate NotebookLM URL
  2090.         let targetNotebookLMUrl = form.elements.targetNotebookLMUrl.value.trim();
  2091.         if (targetNotebookLMUrl !== '') {
  2092.             USER_CONFIG.targetNotebookLMUrl = normalizeUrl(targetNotebookLMUrl);
  2093.         } else { delete USER_CONFIG.targetNotebookLMUrl; }
  2094.     
  2095.         // save other settings
  2096.         USER_CONFIG.fileNamingFormat = form.elements.fileNamingFormat.value;
  2097.         USER_CONFIG.includeTimestamps = form.elements.includeTimestamps.checked;
  2098.         USER_CONFIG.includeChapterHeaders = form.elements.includeChapterHeaders.checked;
  2099.         USER_CONFIG.openSameTab = form.elements.openSameTab.checked;
  2100.         USER_CONFIG.autoOpenChapters = form.elements.autoOpenChapters.checked;
  2101.         USER_CONFIG.DisplayRemainingTime = form.elements.DisplayRemainingTime.checked;
  2102.         USER_CONFIG.ProgressBar = form.elements.ProgressBar.checked;
  2103.         USER_CONFIG.preventBackgroundExecution = form.elements.preventBackgroundExecution.checked;
  2104.         USER_CONFIG.ChatGPTPrompt = form.elements.ChatGPTPrompt.value;
  2105.     
  2106.         // initialize buttonIcons if not already
  2107.         USER_CONFIG.buttonIcons = USER_CONFIG.buttonIcons || {};
  2108.     
  2109.         // save button icons, removing empty values to use defaults
  2110.         const buttonIconDownload = form.elements.buttonIconDownload.value.trim();
  2111.         const buttonIconChatGPT = form.elements.buttonIconChatGPT.value.trim();
  2112.         const buttonIconNotebookLM = form.elements.buttonIconNotebookLM.value.trim();
  2113.         const buttonIconSettings = form.elements.buttonIconSettings.value.trim();
  2114.     
  2115.         if (buttonIconDownload !== '') { USER_CONFIG.buttonIcons.download = buttonIconDownload; } else { delete USER_CONFIG.buttonIcons.download; }
  2116.         if (buttonIconChatGPT !== '') { USER_CONFIG.buttonIcons.ChatGPT = buttonIconChatGPT; } else { delete USER_CONFIG.buttonIcons.ChatGPT; }
  2117.         if (buttonIconNotebookLM !== '') { USER_CONFIG.buttonIcons.NotebookLM = buttonIconNotebookLM; } else { delete USER_CONFIG.buttonIcons.NotebookLM; }
  2118.         if (buttonIconSettings !== '') { USER_CONFIG.buttonIcons.settings = buttonIconSettings; } else { delete USER_CONFIG.buttonIcons.settings; }
  2119.  
  2120.         // save sub panels - links in header
  2121.         if (subPanelLinks) {
  2122.             USER_CONFIG.buttonLeft1Text = subPanelLinks.elements.buttonLeft1Text.value;
  2123.             USER_CONFIG.buttonLeft1Url = subPanelLinks.elements.buttonLeft1Url.value;
  2124.             USER_CONFIG.buttonLeft2Text = subPanelLinks.elements.buttonLeft2Text.value;
  2125.             USER_CONFIG.buttonLeft2Url = subPanelLinks.elements.buttonLeft2Url.value;
  2126.             USER_CONFIG.buttonLeft3Text = subPanelLinks.elements.buttonLeft3Text.value;
  2127.             USER_CONFIG.buttonLeft3Url = subPanelLinks.elements.buttonLeft3Url.value;
  2128.             USER_CONFIG.buttonLeft4Text = subPanelLinks.elements.buttonLeft4Text.value;
  2129.             USER_CONFIG.buttonLeft4Url = subPanelLinks.elements.buttonLeft4Url.value;
  2130.             USER_CONFIG.buttonLeft5Text = subPanelLinks.elements.buttonLeft5Text.value;
  2131.             USER_CONFIG.buttonLeft5Url = subPanelLinks.elements.buttonLeft5Url.value;
  2132.             USER_CONFIG.buttonLeft6Text = subPanelLinks.elements.buttonLeft6Text.value;
  2133.             USER_CONFIG.buttonLeft6Url = subPanelLinks.elements.buttonLeft6Url.value;
  2134.             USER_CONFIG.buttonLeft7Text = subPanelLinks.elements.buttonLeft7Text.value;
  2135.             USER_CONFIG.buttonLeft7Url = subPanelLinks.elements.buttonLeft7Url.value;
  2136.             USER_CONFIG.mButtonText = subPanelLinks.elements.mButtonText.value;
  2137.             USER_CONFIG.mButtonDisplay = subPanelLinks.elements.mButtonDisplay.checked;
  2138.         }
  2139.  
  2140.         // save sub panels - custom css
  2141.         if (subPanelCustomCSS) {
  2142.             USER_CONFIG.textTransform = subPanelCustomCSS.elements.textTransform.value;
  2143.             USER_CONFIG.defaultFontSize = parseFloat(subPanelCustomCSS.elements.defaultFontSize.value);
  2144.             USER_CONFIG.videosWatchedOpacity = parseFloat(subPanelCustomCSS.elements.videosWatchedOpacity.value);
  2145.             USER_CONFIG.videosHideWatchedGlobal = subPanelCustomCSS.elements.videosHideWatchedGlobal.checked;
  2146.             USER_CONFIG.videosPerRow = parseInt(subPanelCustomCSS.elements.videosPerRow.value);
  2147.             USER_CONFIG.hideVoiceSearch = subPanelCustomCSS.elements.hideVoiceSearch.checked;
  2148.             USER_CONFIG.hideCreateButton = subPanelCustomCSS.elements.hideCreateButton.checked;
  2149.             USER_CONFIG.hideMiniplayer = subPanelCustomCSS.elements.hideMiniplayer.checked;
  2150.             USER_CONFIG.squareSearchBar = subPanelCustomCSS.elements.squareSearchBar.checked;
  2151.             USER_CONFIG.squareDesign = subPanelCustomCSS.elements.squareDesign.checked;
  2152.             USER_CONFIG.compactLayout = subPanelCustomCSS.elements.compactLayout.checked;
  2153.         }
  2154.  
  2155.         // save sub panels - color code videos
  2156.         if (subPanelColor) {
  2157.             USER_CONFIG.colorCodeVideosEnabled = subPanelColor.elements.colorCodeVideosEnabled.checked;
  2158.             USER_CONFIG.videosHideWatched = subPanelColor.elements.videosHideWatched.checked;
  2159.             USER_CONFIG.videosOldOpacity = parseFloat(subPanelColor.elements.videosOldOpacity.value);
  2160.             USER_CONFIG.videosAgeColorPickerNewly = subPanelColor.elements.videosAgeColorPickerNewly.value;
  2161.             USER_CONFIG.videosAgeColorPickerRecent = subPanelColor.elements.videosAgeColorPickerRecent.value;
  2162.             USER_CONFIG.videosAgeColorPickerLately = subPanelColor.elements.videosAgeColorPickerLately.value;
  2163.             USER_CONFIG.videosAgeColorPickerLive = subPanelColor.elements.videosAgeColorPickerLive.value;
  2164.             USER_CONFIG.videosAgeColorPickerStreamed = subPanelColor.elements.videosAgeColorPickerStreamed.value;
  2165.             USER_CONFIG.videosAgeColorPickerUpcoming = subPanelColor.elements.videosAgeColorPickerUpcoming.value;
  2166.         }
  2167.  
  2168.         // save updated config
  2169.         try {
  2170.             await GM.setValue('USER_CONFIG', USER_CONFIG);
  2171.     
  2172.             // close modal
  2173.             document.getElementById('yt-transcript-settings-modal').style.display = 'none';
  2174.             showNotification('Settings have been updated!');
  2175.             setTimeout(() => { location.reload(); }, 1000);
  2176.         } catch (error) {
  2177.             showNotification('Error saving new user config!');
  2178.             console.error("YTE: Error saving user configuration:", error);
  2179.         }
  2180.     }      
  2181.  
  2182.     // export and import settings
  2183.     async function exportSettings() {
  2184.         try {
  2185.             const scriptVersion = GM.info.script.version;
  2186.             const settingsString = JSON.stringify(USER_CONFIG, null, 2);
  2187.             const blob = new Blob([settingsString], { type: 'application/json' });
  2188.             const url = URL.createObjectURL(blob);
  2189.  
  2190.             const a = document.createElement('a');
  2191.             a.href = url;
  2192.             a.download = `YouTube-Transcript-Exporter_v${scriptVersion}_Backup_${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
  2193.             document.body.appendChild(a);
  2194.             a.click();
  2195.             document.body.removeChild(a);
  2196.             URL.revokeObjectURL(url);
  2197.  
  2198.             showNotification('Settings have been exported.');
  2199.             } catch (error) {
  2200.                 showNotification("Error exporting settings!");
  2201.                 console.error("YTE: Error exporting user settings:", error);
  2202.             }
  2203.     }
  2204.  
  2205.     let fileInputSettings;
  2206.     async function importSettings() {
  2207.     const handleFile = (e) => {
  2208.         const file = e.target.files[0];
  2209.         if (!file) return;
  2210.  
  2211.         const reader = new FileReader();
  2212.         reader.onload = (event) => {
  2213.         const fileContent = event.target.result;
  2214.         try {
  2215.             const importedConfig = JSON.parse(fileContent);
  2216.             if (typeof importedConfig === 'object' && importedConfig !== null) {
  2217.             USER_CONFIG = { ...DEFAULT_CONFIG, ...importedConfig };
  2218.             GM.setValue('USER_CONFIG', USER_CONFIG);
  2219.             showNotification('Settings have been imported.');
  2220.             setTimeout(() => {
  2221.                 location.reload();
  2222.             }, 1000);
  2223.             } else {
  2224.             showNotification('Invalid JSON format!');
  2225.             }
  2226.         } catch (error) {
  2227.             showNotification('Invalid JSON format!');
  2228.         }
  2229.         };
  2230.         reader.readAsText(file);
  2231.     };
  2232.  
  2233.     const createOrResetFileInput = () => {
  2234.         if (!fileInputSettings) {
  2235.         fileInputSettings = document.createElement('input');
  2236.         fileInputSettings.type = 'file';
  2237.         fileInputSettings.accept = 'application/json';
  2238.         fileInputSettings.id = 'fileInputSettings';
  2239.         fileInputSettings.style.display = 'none';
  2240.         fileInputSettings.addEventListener('change', handleFile);
  2241.         document.body.appendChild(fileInputSettings);
  2242.         } else {
  2243.         fileInputSettings.value = '';
  2244.         }
  2245.     };
  2246.  
  2247.     createOrResetFileInput();
  2248.     fileInputSettings.click();
  2249.     }
  2250.  
  2251.     // function to display a notification for settings change or reset
  2252.     function showNotification(message) {
  2253.         const overlay = document.createElement('div');
  2254.         overlay.classList.add('overlay');
  2255.  
  2256.         const modal = document.createElement('div');
  2257.         modal.classList.add('notification');
  2258.         modal.innerText = message;
  2259.  
  2260.         overlay.appendChild(modal);
  2261.         document.body.appendChild(overlay);
  2262.  
  2263.         setTimeout(() => { overlay.remove(); }, 1000);
  2264.     }
  2265.  
  2266.     // function to add the YouTube Transcript Exporter buttons
  2267.     function buttonLocation(buttons, callback) {
  2268.         const masthead = document.querySelector('#end');
  2269.         if (masthead) {
  2270.             buttons.forEach(({ id, text, clickHandler, tooltip }) => {
  2271.     
  2272.                 // button wrapper
  2273.                 const buttonWrapper = document.createElement('div');
  2274.                 buttonWrapper.classList.add('button-wrapper');
  2275.     
  2276.                 // buttons
  2277.                 const button = document.createElement('button');
  2278.                 button.id = id;
  2279.                 button.innerText = text;
  2280.                 button.classList.add('button-style');
  2281.                 if (id === 'transcript-settings-button') {
  2282.                     button.classList.add('button-style-settings'); }
  2283.                 
  2284.                 button.addEventListener('click', clickHandler);
  2285.     
  2286.                 // tooltip div
  2287.                 const tooltipDiv = document.createElement('div');
  2288.                 tooltipDiv.innerText = tooltip;
  2289.                 tooltipDiv.classList.add('button-tooltip');
  2290.     
  2291.                 // tooltip arrow
  2292.                 const arrowDiv = document.createElement('div');
  2293.                 arrowDiv.classList.add('button-tooltip-arrow');
  2294.                 tooltipDiv.appendChild(arrowDiv);
  2295.     
  2296.                 // show and hide tooltip on hover
  2297.                 let tooltipTimeout;
  2298.                 button.addEventListener('mouseenter', () => {
  2299.                     tooltipTimeout = setTimeout(() => {
  2300.                         tooltipDiv.style.visibility = 'visible';
  2301.                         tooltipDiv.style.opacity = '1';
  2302.                     }, 700); 
  2303.                 });
  2304.     
  2305.                 button.addEventListener('mouseleave', () => {
  2306.                     clearTimeout(tooltipTimeout); 
  2307.                     tooltipDiv.style.visibility = 'hidden';
  2308.                     tooltipDiv.style.opacity = '0';
  2309.                 });
  2310.     
  2311.                 // append button elements
  2312.                 buttonWrapper.appendChild(button);
  2313.                 buttonWrapper.appendChild(tooltipDiv);
  2314.                 masthead.prepend(buttonWrapper);
  2315.             });
  2316.         } else {
  2317.             const observer = new MutationObserver((mutations, obs) => {
  2318.                 const masthead = document.querySelector('#end');
  2319.                 if (masthead) {
  2320.                     obs.disconnect();
  2321.                     if (callback) callback(); 
  2322.                 }
  2323.             });
  2324.             observer.observe(document.body, {
  2325.                 childList: true,
  2326.                 subtree: true
  2327.             });
  2328.         }
  2329.     }
  2330.     
  2331.     function addButton() {
  2332.         if (document.querySelector('.button-wrapper')) return;
  2333.  
  2334.         const buttons = [
  2335.             { id: 'transcript-settings-button', text: USER_CONFIG.buttonIcons.settings, clickHandler: showSettingsModal, tooltip: 'YouTube Transcript Exporter Settings', ariaLabel: 'YouTube Transcript Exporter Settings.' },
  2336.             { id: 'transcript-download-button', text:USER_CONFIG.buttonIcons.download, clickHandler: handleDownloadClick, tooltip: 'Download Transcript as a Text File', ariaLabel: 'Download Transcript as a Text File.' },
  2337.             { id: 'transcript-ChatGPT-button', text:USER_CONFIG.buttonIcons.ChatGPT, clickHandler: handleChatGPTClick, tooltip: 'Copy Transcript with a Prompt and Open ChatGPT', ariaLabel: 'Copy Transcript to Clipboard with a Prompt and Open ChatGPT.' },
  2338.             { id: 'transcript-NotebookLM-button', text:USER_CONFIG.buttonIcons.NotebookLM, clickHandler: handleNotebookLMClick, tooltip: 'Copy Transcript and Open NotebookLM', ariaLabel: 'Copy Transcript to Clipboard and Open NotebookLM.' }
  2339.         ];
  2340.     
  2341.         buttonLocation(buttons, addButton);
  2342.     }
  2343.  
  2344.     function addSettingsButton() {
  2345.  
  2346.         if (document.querySelector('.button-wrapper')) return;
  2347.  
  2348.         const buttons = [ { id: 'transcript-settings-button', text: USER_CONFIG.buttonIcons.settings, clickHandler: showSettingsModal, tooltip: 'YouTube Transcript Exporter Settings', ariaLabel: 'YouTube Transcript Exporter Settings.' }, ];
  2349.  
  2350.         buttonLocation(buttons, addSettingsButton);
  2351.     }
  2352.  
  2353.     // functions to handle the button clicks
  2354.     function handleChatGPTClick() { handleTranscriptAction(function() { selectAndCopyTranscript('ChatGPT'); }); }
  2355.     function handleNotebookLMClick() { handleTranscriptAction(function() { selectAndCopyTranscript('NotebookLM'); }); }
  2356.     function handleDownloadClick() { handleTranscriptAction(downloadTranscriptAsText); }
  2357.  
  2358.     // function to check for a transcript
  2359.     function handleTranscriptAction(callback) {
  2360.  
  2361.         // check if the transcript button exists or at least the div
  2362.         const transcriptButton = document.querySelector('#button-container button[aria-label="Show transcript"]');
  2363.         if (transcriptButton) {
  2364.         } else {
  2365.             const transcriptSection = document.querySelector('ytd-video-description-transcript-section-renderer');
  2366.             if (transcriptSection) {
  2367.             } else {
  2368.                 alert('Transcript unavailable or cannot be found.\nPlease ensure the "Show transcript" button exists.');
  2369.                 console.log("YTE: Transcript button not found. Subtitles/closed captions unavailable or language unsupported.");
  2370.                 return;
  2371.             }
  2372.         }
  2373.  
  2374.         // check if the transcript has loaded
  2375.         const transcriptItems = document.querySelectorAll('ytd-transcript-segment-list-renderer ytd-transcript-segment-renderer');
  2376.         if (transcriptItems.length > 0) {
  2377.             callback();
  2378.         } else {
  2379.             alert('Transcript has not loaded successfully.\nPlease reload this page.');
  2380.             console.log("YTE: Transcript has not loaded.");
  2381.             return; 
  2382.         }
  2383.     }
  2384.  
  2385.     // function to get video information
  2386.     function getVideoInfo() {
  2387.         //const ytTitle = document.querySelector('#title yt-formatted-string')?.textContent.trim() || 'N/A';
  2388.         const ytTitle = document.querySelector('div#title h1 > yt-formatted-string')?.textContent.trim() || 'N/A';
  2389.         //const channelName = document.querySelector('ytd-channel-name#channel-name yt-formatted-string#text a')?.textContent.trim() || 'N/A';
  2390.         const channelName = document.querySelector( 'ytd-video-owner-renderer ytd-channel-name#channel-name yt-formatted-string#text a' )?.textContent.trim() || 'N/A';
  2391.         const uploadDate = document.querySelector('ytd-video-primary-info-renderer #info-strings yt-formatted-string')?.textContent.trim() || 'N/A';
  2392.         const videoURL = window.location.href;
  2393.  
  2394.         return { ytTitle, channelName, uploadDate, videoURL };
  2395.     }
  2396.  
  2397.     // function to get the transcript text
  2398.     function getTranscriptText() {
  2399.         const transcriptContainer = document.querySelector('ytd-transcript-segment-list-renderer #segments-container');
  2400.         if (!transcriptContainer) {
  2401.             //console.error("YTE: Transcript container not found.");
  2402.             return '';
  2403.         }
  2404.  
  2405.         const transcriptElements = transcriptContainer.children;
  2406.         let transcriptLines = [];
  2407.  
  2408.         Array.from(transcriptElements).forEach(element => {
  2409.             if (element.tagName === 'YTD-TRANSCRIPT-SECTION-HEADER-RENDERER') {
  2410.     
  2411.                 // chapter header segment
  2412.                 if (USER_CONFIG.includeChapterHeaders) {
  2413.                     const chapterTitleElement = element.querySelector('h2 > span');
  2414.                     if (chapterTitleElement) {
  2415.                         const chapterTitle = chapterTitleElement.textContent.trim();
  2416.                         transcriptLines.push(`\nChapter: ${chapterTitle}`);
  2417.                     }
  2418.                 }
  2419.             } else if (element.tagName === 'YTD-TRANSCRIPT-SEGMENT-RENDERER') {
  2420.     
  2421.                 // transcript segment
  2422.                 const timeElement = element.querySelector('.segment-timestamp');
  2423.                 const textElement = element.querySelector('.segment-text');
  2424.                 if (timeElement && textElement) {
  2425.                     const time = timeElement.textContent.trim();
  2426.                     const text = textElement.innerText.trim();
  2427.                     if (USER_CONFIG.includeTimestamps) {
  2428.                         transcriptLines.push(`${time} ${text}`);
  2429.                     } else { transcriptLines.push(`${text}`); }
  2430.                 }
  2431.             }
  2432.         });
  2433.  
  2434.         return transcriptLines.join('\n');
  2435.     }
  2436.  
  2437.     // function to select and copy the transcript into the clipboard
  2438.     function selectAndCopyTranscript(target) {
  2439.         const transcriptText = getTranscriptText();
  2440.         const { ytTitle, channelName, uploadDate, videoURL } = getVideoInfo();
  2441.     
  2442.         let finalText = '';
  2443.         let targetUrl = '';
  2444.     
  2445.         if (target === 'ChatGPT') {
  2446.             finalText = `YouTube Transcript:\n${transcriptText.trimStart()}\n\n\nAdditional Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nTask Instructions:\n${USER_CONFIG.ChatGPTPrompt}`;
  2447.             targetUrl = USER_CONFIG.targetChatGPTUrl;
  2448.         } else if (target === 'NotebookLM') {
  2449.             finalText = `Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nYouTube Transcript:\n${transcriptText.trimStart()}`;
  2450.             targetUrl = USER_CONFIG.targetNotebookLMUrl;
  2451.         }
  2452.     
  2453.         navigator.clipboard.writeText(finalText).then(() => { 
  2454.             showNotification('Transcript copied. Opening website . . .');
  2455.             if (USER_CONFIG.openSameTab) { window.open(targetUrl, '_self');
  2456.             } else { window.open(targetUrl, '_blank'); }
  2457.         });
  2458.     }
  2459.  
  2460.     // function to get the formatted transcript with video details for the text file
  2461.     function getFormattedTranscript() {
  2462.         const transcriptText = getTranscriptText();
  2463.         const { ytTitle, channelName, uploadDate, videoURL } = getVideoInfo();
  2464.  
  2465.         return `Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nYouTube Transcript:\n${transcriptText.trimStart()}`;
  2466.     }
  2467.  
  2468.     // function to download the transcript as a text file
  2469.     function downloadTranscriptAsText() { 
  2470.         const finalText = getFormattedTranscript();
  2471.         const { ytTitle, channelName, uploadDate } = getVideoInfo();
  2472.         const blob = new Blob([finalText], { type: 'text/plain' });
  2473.  
  2474.         const sanitize = str => str.replace(/[<>:"/\\|?*]+/g, '');
  2475.         const uploadDateFormatted = new Date(uploadDate).toLocaleDateString("en-CA");
  2476.     
  2477.         // naming of text file based on user setting
  2478.         let fileName = '';
  2479.         switch (USER_CONFIG.fileNamingFormat) {
  2480.             case 'title-channel': fileName = `${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`; break;
  2481.             case 'channel-title': fileName = `${sanitize(channelName)} - ${sanitize(ytTitle)}.txt`; break;
  2482.             case 'date-title-channel': fileName = `${sanitize(uploadDateFormatted)} - ${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`; break;
  2483.             case 'date-channel-title': fileName = `${sanitize(uploadDateFormatted)} - ${sanitize(channelName)} - ${sanitize(ytTitle)}.txt`; break;
  2484.             default: fileName = `${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`;
  2485.         }
  2486.     
  2487.         const url = URL.createObjectURL(blob);
  2488.     
  2489.         // create a temporary anchor element to trigger the download
  2490.         const a = document.createElement('a');
  2491.         a.href = url;
  2492.         a.download = fileName;
  2493.         document.body.appendChild(a);
  2494.         a.click();
  2495.     
  2496.         // clean up
  2497.         document.body.removeChild(a);
  2498.         URL.revokeObjectURL(url);
  2499.         showNotification('File has been downloaded.');
  2500.     }    
  2501.  
  2502.  
  2503.     // function to preload the transcript
  2504.     function preLoadTranscript() {
  2505.         return new Promise((resolve, reject) => {
  2506.           const panel = document.querySelector( 'ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-searchable-transcript"]' );
  2507.           if (!panel) {
  2508.             console.log('YTE: Transcript panel not found. Reload the page to try again.');
  2509.             showNotificationError("Transcript Not Available");
  2510.             reject();
  2511.             return;
  2512.           }
  2513.  
  2514.           const masthead = document.querySelector("#end");
  2515.           const notification = document.createElement("div");
  2516.           notification.classList.add("notification-error", "loading");
  2517.           const textSpan = document.createElement("span");
  2518.           textSpan.textContent = "Transcript Is Loading";
  2519.           notification.appendChild(textSpan);
  2520.           masthead.prepend(notification);
  2521.  
  2522.           panel.classList.add("transcript-preload");
  2523.           panel.setAttribute("visibility", "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED");
  2524.  
  2525.           let loaded = false;
  2526.  
  2527.           const observer = new MutationObserver(() => {
  2528.             const transcriptItems = panel.querySelectorAll("ytd-transcript-segment-renderer");
  2529.             if (transcriptItems.length > 0) {
  2530.               loaded = true;
  2531.               cleanup(false);
  2532.               clearTimeout(fallbackTimer);
  2533.               observer.disconnect();
  2534.               resolve();
  2535.             }
  2536.           });
  2537.  
  2538.           observer.observe(panel, { childList: true, subtree: true });
  2539.  
  2540.           const fallbackTimer = setTimeout(() => {
  2541.             if (!loaded) {
  2542.               console.error( "YTE: The transcript took too long to load. Reload the page to try again." );
  2543.               observer.disconnect();
  2544.               cleanup(true);
  2545.               reject();
  2546.             }
  2547.           }, 6000);
  2548.  
  2549.           function cleanup(failed) {
  2550.             notification.remove();
  2551.             panel.classList.remove("transcript-preload");
  2552.             panel.setAttribute("visibility", "ENGAGEMENT_PANEL_VISIBILITY_HIDDEN");
  2553.             if (failed) { showNotificationError("Transcript Failed to Load"); }
  2554.           }
  2555.         });
  2556.       }
  2557.  
  2558.     // function to display a notification if transcript cannot be found
  2559.     function showNotificationError(message) {
  2560.         const masthead = document.querySelector('#end');
  2561.         const notification = document.createElement('div');
  2562.         notification.textContent = message;
  2563.         notification.classList.add('notification-error'); 
  2564.  
  2565.         masthead.prepend(notification);
  2566.  
  2567.         if (document.visibilityState === 'hidden') {
  2568.             document.addEventListener('visibilitychange', function handleVisibilityChange() {
  2569.                 if (document.visibilityState === 'visible') {
  2570.                     document.removeEventListener('visibilitychange', handleVisibilityChange);
  2571.                     setTimeout(() => notification.remove(), 3000);
  2572.                 }
  2573.             });
  2574.         } else { setTimeout(() => notification.remove(), 3000); }
  2575.     }
  2576.  
  2577.     // function to automatically open the chapter panel
  2578.     function openChapters() {
  2579.         const panel = document.querySelector('ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-macro-markers-description-chapters"]') ||
  2580.                     document.querySelector('ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-macro-markers-auto-chapters"]');
  2581.         
  2582.         if (panel) {
  2583.             panel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  2584.         } //else { console.log("YTE: Chapter panel not found or does not exist."); }
  2585.     }
  2586.  
  2587.     // function to display the remaining time based on playback speed
  2588.     function RemainingTime() {
  2589.         const STREAM_SELECTOR = '.video-stream.html5-main-video';
  2590.         const CONTAINER_SELECTOR = '#columns #primary #below';
  2591.         const FULLSCREEN_CONTAINER_SELECTOR = '#movie_player > div.ytp-chrome-bottom';
  2592.     
  2593.         // function to format seconds
  2594.         function formatTime(seconds) {
  2595.             if (!isFinite(seconds) || seconds < 0) seconds = 0;
  2596.             const h = Math.floor(seconds / 3600);
  2597.             const m = Math.floor((seconds % 3600) / 60);
  2598.             const s = Math.floor(seconds % 60);
  2599.             return h > 0 
  2600.                 ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  2601.                 : `${m}:${s.toString().padStart(2, '0')}`;
  2602.         }
  2603.  
  2604.         const element = document.createElement('div');
  2605.         element.classList.add('remaining-time-container');
  2606.  
  2607.         const textNode = document.createTextNode('');
  2608.         element.appendChild(textNode);
  2609.  
  2610.         const initialContainer = document.querySelector(CONTAINER_SELECTOR);
  2611.         if (initialContainer) { initialContainer.prepend(element); } 
  2612.     
  2613.         // hide for live video
  2614.         const timeDisplay = document.querySelector('.ytp-time-display');
  2615.         if (!timeDisplay) { console.error("YTE: RemainingTime: Required querySelector not found."); return; }
  2616.     
  2617.         const detectLive = () => {
  2618.             if (timeDisplay.classList.contains('ytp-live')) {
  2619.                 element.classList.add('live');
  2620.             } else { element.classList.remove('live'); }
  2621.         };
  2622.     
  2623.         detectLive();
  2624.         new MutationObserver(detectLive).observe(timeDisplay, { attributes: true });
  2625.     
  2626.         // dynamic placement based on fullscreen mode
  2627.         const updateContainer = () => {
  2628.             const container = document.querySelector(CONTAINER_SELECTOR);
  2629.             const fullscreenContainer = document.querySelector(FULLSCREEN_CONTAINER_SELECTOR);
  2630.             const remainingTimeContainer = document.querySelector('.remaining-time-container');
  2631.         
  2632.             if (document.fullscreenElement && fullscreenContainer) {
  2633.                 if (remainingTimeContainer && remainingTimeContainer.parentNode !== fullscreenContainer) {
  2634.                     fullscreenContainer.appendChild(remainingTimeContainer);
  2635.                 }
  2636.             } else if (container) {
  2637.                 if (getComputedStyle(container).position === 'static') {
  2638.                     container.style.position = 'relative';
  2639.                 }
  2640.                 if (remainingTimeContainer && remainingTimeContainer.parentNode !== container) {
  2641.                     container.prepend(remainingTimeContainer);
  2642.                 }
  2643.             }
  2644.         }; 
  2645.     
  2646.         document.addEventListener('fullscreenchange', () => { setTimeout(updateContainer, 250); });
  2647.         updateContainer();
  2648.     
  2649.         // time updates
  2650.         const video = document.querySelector(STREAM_SELECTOR);
  2651.         if (video) {
  2652.             video.ontimeupdate = () => {
  2653.                 const duration = video.duration;
  2654.                 const currentTime = video.currentTime;
  2655.                 const playbackRate = video.playbackRate || 1;
  2656.                 const remaining = (duration - currentTime) / playbackRate;
  2657.                 const watchedPercent = duration ? Math.round((currentTime / duration) * 100) + '%' : '0%';
  2658.                 const totalFormatted = formatTime(duration);
  2659.                 const elapsedFormatted = formatTime(currentTime);
  2660.                 const remainingFormatted = formatTime(remaining);
  2661.     
  2662.                 textNode.data = `total: ${totalFormatted} | elapsed: ${elapsedFormatted} — watched: ${watchedPercent} — remaining: ${remainingFormatted} (${playbackRate}x)`;
  2663.             };
  2664.         }
  2665.     }
  2666.  
  2667.     // function to keep the progress bar visible with chapters container
  2668.     function keepProgressBarVisible() {
  2669.         document.documentElement.classList.add('ProgressBar');
  2670.     
  2671.         const player = document.querySelector('.html5-video-player');
  2672.         const video = document.querySelector('video[src]');
  2673.         const timeDisplay = document.querySelector('.ytp-time-display');
  2674.         const chaptersContainer = player && player.querySelector('.ytp-chapters-container');
  2675.         const progressBarContainer = player && player.querySelector('.ytp-progress-bar-container');
  2676.     
  2677.         if (!player || !video || !timeDisplay) { console.error("YTE: ProgressBar: A Required querySelector Not Found."); return; }
  2678.         if (!progressBarContainer) { console.error("YTE: ProgressBar: Progress Bar Container Not Found."); return; }
  2679.     
  2680.         const bar = document.createElement('div');
  2681.         bar.id = 'ProgressBar-bar';
  2682.     
  2683.         const progress = document.createElement('div');
  2684.         progress.id = 'ProgressBar-progress';
  2685.     
  2686.         const buffer = document.createElement('div');
  2687.         buffer.id = 'ProgressBar-buffer';
  2688.     
  2689.         const startDiv = document.createElement('div');
  2690.         startDiv.id = 'ProgressBar-start';
  2691.     
  2692.         const endDiv = document.createElement('div');
  2693.         endDiv.id = 'ProgressBar-end';
  2694.     
  2695.         player.appendChild(bar);
  2696.         bar.appendChild(buffer);
  2697.         bar.appendChild(progress);
  2698.         player.appendChild(startDiv);
  2699.         player.appendChild(endDiv);
  2700.     
  2701.         progress.style.transform = 'scaleX(0)';
  2702.     
  2703.         // live video check
  2704.         let isLive = null;
  2705.     
  2706.         const detectLive = () => {
  2707.             const live = timeDisplay.classList.contains('ytp-live');
  2708.             if (live !== isLive) {
  2709.                 isLive = live;
  2710.                 if (isLive) {
  2711.                     bar.classList.remove('active');
  2712.                     startDiv.classList.remove('active');
  2713.                     endDiv.classList.remove('active');
  2714.                 } else {
  2715.                     bar.classList.add('active');
  2716.                     startDiv.classList.add('active');
  2717.                     endDiv.classList.add('active');
  2718.                 }
  2719.             }
  2720.         };
  2721.         
  2722.         detectLive();
  2723.  
  2724.         function animateProgress() {
  2725.             const fraction = video.currentTime / video.duration;
  2726.             progress.style.transform = `scaleX(${fraction})`;
  2727.             requestAnimationFrame(animateProgress);
  2728.         }
  2729.  
  2730.         requestAnimationFrame(animateProgress);     
  2731.  
  2732.         function renderBuffer() {
  2733.             for (let i = video.buffered.length - 1; i >= 0; i--) {
  2734.                 if (video.currentTime < video.buffered.start(i)) continue;
  2735.                 buffer.style.transform = `scaleX(${video.buffered.end(i) / video.duration})`;
  2736.                 break;
  2737.             }
  2738.         }
  2739.     
  2740.         video.addEventListener('progress', renderBuffer);
  2741.         video.addEventListener('seeking', renderBuffer);
  2742.  
  2743.         // chapters container
  2744.         let cachedMaskImage = null;
  2745.  
  2746.         function updateLayout() {
  2747.             const initialWidth = progressBarContainer.getBoundingClientRect().width;
  2748.  
  2749.             let attempts = 0;
  2750.             const maxAttempts = 6;
  2751.  
  2752.             const waitForSizeChange = new Promise((resolve) => {
  2753.                 const intervalId = setInterval(() => {
  2754.                     const currentWidth = progressBarContainer.getBoundingClientRect().width;
  2755.  
  2756.                     if (currentWidth !== initialWidth) { clearInterval(intervalId); resolve(); }
  2757.                     else if (++attempts >= maxAttempts) { clearInterval(intervalId); resolve(); }
  2758.                 }, 250);
  2759.             });
  2760.  
  2761.             waitForSizeChange.then(() => {
  2762.                 const playerRect = player.getBoundingClientRect();
  2763.                 const progressBarRect = progressBarContainer.getBoundingClientRect();
  2764.                 const progressBarWidth = progressBarRect.width;
  2765.  
  2766.                 bar.style.position = 'absolute';
  2767.                 bar.style.left = (progressBarRect.left - playerRect.left) + 'px';
  2768.                 bar.style.width = progressBarWidth + 'px';
  2769.  
  2770.                 if (chaptersContainer) {
  2771.                     const chapters = chaptersContainer.querySelectorAll('.ytp-chapter-hover-container');
  2772.                     if (chapters.length) {
  2773.                         const svgWidth = 100;
  2774.                         const svgHeight = 10;
  2775.                         let rects = '';
  2776.  
  2777.                         chapters.forEach((chapter) => {
  2778.                             const rect = chapter.getBoundingClientRect();
  2779.                             const startPx = rect.left - progressBarRect.left;
  2780.                             const chapterWidth = rect.width;
  2781.  
  2782.                             const startPerc = (startPx / progressBarWidth) * svgWidth;
  2783.                             const widthPerc = (chapterWidth / progressBarWidth) * svgWidth;
  2784.  
  2785.                             rects += `<rect x="${startPerc}" y="0" width="${widthPerc}" height="${svgHeight}" fill="white"/>`;
  2786.                         });
  2787.  
  2788.                         const svg = `<svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">${rects}</svg>`;
  2789.                         const encoded = encodeURIComponent(svg).replace(/%20/g, ' ');
  2790.                         cachedMaskImage = `url("data:image/svg+xml;utf8,${encoded}")`;
  2791.  
  2792.                         bar.style.maskImage = cachedMaskImage;
  2793.                         bar.style.webkitMaskImage = cachedMaskImage;
  2794.                         bar.style.maskRepeat = 'no-repeat';
  2795.                         bar.style.webkitMaskRepeat = 'no-repeat';
  2796.                         bar.style.maskSize = '100% 100%';
  2797.                         bar.style.webkitMaskSize = '100% 100%';
  2798.                     } else {
  2799.                         if (cachedMaskImage) {
  2800.                             bar.style.maskImage = '';
  2801.                             bar.style.webkitMaskImage = '';
  2802.                             cachedMaskImage = null;
  2803.                         }
  2804.                     }
  2805.                 }
  2806.             });
  2807.         }
  2808.     
  2809.         // handle layout changes
  2810.         document.addEventListener('yt-set-theater-mode-enabled', () => { updateLayout(); });
  2811.         window.addEventListener('resize', () => { updateLayout(); });
  2812.                         
  2813.  
  2814.         // initialization
  2815.         renderBuffer();
  2816.         updateLayout();
  2817.     }
  2818.  
  2819.     // sidebar and left header links
  2820.     function buttonsLeft() {
  2821.         function openSidebar() {
  2822.             const guideButton = document.querySelector('#guide-button button');
  2823.             if (guideButton) {
  2824.                 guideButton.click(); 
  2825.             } 
  2826.         }
  2827.  
  2828.         // create sidebar button
  2829.         function createButton(text, onClick) {
  2830.             const btn = document.createElement('button');
  2831.             btn.textContent = text;
  2832.             btn.classList.add('buttons-left');
  2833.             btn.addEventListener('click', (e) => {
  2834.                 e.preventDefault();
  2835.                 onClick();
  2836.             });
  2837.             return btn;
  2838.         }
  2839.  
  2840.         // create links
  2841.         function createLink(text, url) {
  2842.             const link = document.createElement('a');
  2843.             link.textContent = text;
  2844.             link.classList.add('buttons-left');
  2845.             link.href = url;
  2846.             return link;
  2847.         }
  2848.  
  2849.         const masthead = document.querySelector('ytd-masthead'); if (!masthead) return;
  2850.         const container = masthead.querySelector('#container #start'); if (!container) return;
  2851.  
  2852.         const isHideSidebarChecked = USER_CONFIG.mButtonDisplay;
  2853.  
  2854.         if (container.querySelector('.buttons-left')) { return; }
  2855.     
  2856.         // adding the buttons
  2857.         const buttonsConfig = [
  2858.             { type: 'button', text: USER_CONFIG.mButtonText, onClick: openSidebar },
  2859.             { type: 'link', text: USER_CONFIG.buttonLeft1Text, url: USER_CONFIG.buttonLeft1Url },
  2860.             { type: 'link', text: USER_CONFIG.buttonLeft2Text, url: USER_CONFIG.buttonLeft2Url },
  2861.             { type: 'link', text: USER_CONFIG.buttonLeft3Text, url: USER_CONFIG.buttonLeft3Url },
  2862.             { type: 'link', text: USER_CONFIG.buttonLeft4Text, url: USER_CONFIG.buttonLeft4Url },
  2863.             { type: 'link', text: USER_CONFIG.buttonLeft5Text, url: USER_CONFIG.buttonLeft5Url },
  2864.             { type: 'link', text: USER_CONFIG.buttonLeft6Text, url: USER_CONFIG.buttonLeft6Url },
  2865.             { type: 'link', text: USER_CONFIG.buttonLeft7Text, url: USER_CONFIG.buttonLeft7Url },
  2866.         ];
  2867.     
  2868.         buttonsConfig.forEach(config => {
  2869.             if (config.text && config.text.trim() !== '') {
  2870.                 let element;
  2871.                 if (config.type === 'button') {
  2872.                     if (isHideSidebarChecked) {
  2873.                         element = createButton(config.text, config.onClick);
  2874.                         if (config.text === DEFAULT_CONFIG.mButtonText) {
  2875.                             element.style.display = 'inline-block';
  2876.                             element.style.fontSize = '25px';
  2877.                             element.style.margin = '0';
  2878.                             element.style.padding = '0 0 5px 0';
  2879.                             element.style.transform = 'scaleX(1.25)';
  2880.                         }
  2881.                     }
  2882.                 } else if (config.type === 'link') {
  2883.                     element = createLink(config.text, config.url);
  2884.                 }
  2885.                 if (element) {
  2886.                     container.appendChild(element);
  2887.                 }
  2888.             }
  2889.         });
  2890.     }
  2891.  
  2892.     // color code videos on home
  2893.     function ColorCodeVideos() { 
  2894. console.log("ColorCodeVideos: Initializing and attaching event listener.");
  2895.         // define age categories
  2896.         const categories = {
  2897.             live: ['watching'],
  2898.             streamed: ['Streamed'],
  2899.             upcoming: ['waiting', 'scheduled for'],
  2900.             newly: ['1 day ago', 'hours ago', 'hour ago', 'minutes ago', 'minute ago', 'seconds ago', 'second ago'],
  2901.             recent: ['1 week ago', '7 days ago', '6 days ago', '5 days ago', '4 days ago', '3 days ago', '2 days ago'],
  2902.             lately: ['1 month ago', 'weeks ago', '14 days ago', '13 days ago', '12 days ago', '11 days ago', '10 days ago', '9 days ago', '8 days ago'],
  2903.             old: ['years ago', '1 year ago', '12 months ago', '11 months ago', '10 months ago', '9 months ago', '8 months ago', '7 months ago']
  2904.         };
  2905.         
  2906.         function processVideos() {
  2907. console.log("ColorCodeVideos processVideos: Called.");
  2908.             document.querySelectorAll('[class*="ytd-video-meta-block"]').forEach(el => {
  2909.                 const textContent = el.textContent.trim().toLowerCase();
  2910.                 for (const [className, ages] of Object.entries(categories)) {
  2911.                     if (ages.some(age => textContent.includes(age.toLowerCase()))) {
  2912.                         const videoContainer = el.closest('ytd-rich-item-renderer');
  2913.                         if (videoContainer && !videoContainer.classList.contains(`yte-style-${className}-video`)) {
  2914.                             videoContainer.classList.add(`yte-style-${className}-video`);
  2915.                         }
  2916.                     }
  2917.                 }
  2918.             });
  2919.         
  2920.             document.querySelectorAll('span.ytd-video-meta-block').forEach(el => {
  2921.                 const text = el.textContent;
  2922.                 const videoContainer = el.closest('ytd-rich-item-renderer');
  2923.                 if (!videoContainer) return;
  2924.         
  2925.                 if (/Scheduled for/i.test(text) && !videoContainer.classList.contains('yte-style-upcoming-video')) {
  2926.                     videoContainer.classList.add('yte-style-upcoming-video');
  2927.                 }
  2928.         
  2929.                 if (/Streamed/i.test(text) && !el.querySelector('.yte-style-streamed-text')) {
  2930.                     el.childNodes.forEach(node => {
  2931.                         if (node.nodeType === Node.TEXT_NODE && /Streamed/i.test(node.nodeValue)) {
  2932.                             const span = document.createElement('span');
  2933.                             span.className = 'yte-style-streamed-text';
  2934.                             span.textContent = node.nodeValue.match(/Streamed/i)[0];
  2935.                             const rest = document.createTextNode(node.nodeValue.replace(/Streamed/i, ''));
  2936.                             el.replaceChild(rest, node);
  2937.                             el.insertBefore(span, rest);
  2938.                         }
  2939.                     });
  2940.                 }
  2941.             });
  2942.         }
  2943.         
  2944.         processVideos();
  2945.  
  2946.         document.addEventListener('yt-service-request-sent', () => {
  2947.             setTimeout(() => { 
  2948.                 processVideos(); 
  2949.             }, 2000); 
  2950.         });
  2951.     }
  2952.  
  2953.     // initiate the script
  2954.     let lastVideoURL = null;
  2955.  
  2956.     async function initializeTranscript(currentVideoURL) {
  2957.         if (USER_CONFIG.preventBackgroundExecution) { await ChromeUserWait(); }
  2958.         buttonsLeft();
  2959.  
  2960.         const isVideoPage = /^https:\/\/.*\.youtube\.com\/watch\?v=/.test(currentVideoURL);
  2961.         if (isVideoPage) {
  2962.             if (USER_CONFIG.autoOpenChapters) { openChapters(); }
  2963.             if (USER_CONFIG.DisplayRemainingTime) { RemainingTime(); }
  2964.             if (USER_CONFIG.ProgressBar) { ProgressBarCSS(); keepProgressBarVisible(); }
  2965.  
  2966.             let transcriptLoaded = false;
  2967.             try { await preLoadTranscript(); transcriptLoaded = true; } 
  2968.             catch (error) { setTimeout(() => { addSettingsButton(); }, 3000); }
  2969.             if (transcriptLoaded) { addButton(); }
  2970.             //console.log("YTE: YouTube Transcript Exporter Initialized: On Video Page.");
  2971.         } else { 
  2972.             addSettingsButton();
  2973.             //console.log("YTE: YouTube Transcript Exporter Initialized: On Normal Page."); 
  2974.             if (window.location.href !== "https://www.youtube.com/") { return; }
  2975.             if (USER_CONFIG.colorCodeVideosEnabled) { ColorCodeVideos(); }
  2976.         }
  2977.     }
  2978.  
  2979.     // YouTube navigation handler
  2980.     function handleYouTubeNavigation() {
  2981.         //console.log("YTE: Event Listner Arrived");
  2982.         const currentVideoURL = window.location.href;
  2983.         if (currentVideoURL !== lastVideoURL) {
  2984.             lastVideoURL = currentVideoURL;
  2985.             //console.log("YTE: Only One Survived");
  2986.             loadCSSsettings();
  2987.             customCSS();
  2988.             setTimeout(() => { initializeTranscript(currentVideoURL); }, 500);
  2989.         }
  2990.     }
  2991.  
  2992.     // reset
  2993.     function handleYTNavigation() {
  2994.         document.querySelectorAll(
  2995.           '.button-wrapper, .remaining-time-container, #yt-transcript-settings-modal, .sub-panel-overlay, #ProgressBar-bar, #ProgressBar-start, #ProgressBar-end, ProgressBar-progress, ProgressBar-buffer'
  2996.         ).forEach(el => el.remove());
  2997.     }
  2998.  
  2999.     // function due to the inadequacy of Chrome
  3000.     async function ChromeUserWait() {
  3001.         if (document.visibilityState !== 'visible') {
  3002.             //console.log("YTE: Waiting for this tab to become visible...");
  3003.             return new Promise((resolve) => {
  3004.                 document.addEventListener('visibilitychange', function onVisibilityChange() {
  3005.                     if (document.visibilityState === 'visible') {
  3006.                         document.removeEventListener('visibilitychange', onVisibilityChange);
  3007.                         resolve();
  3008.                     }
  3009.                 });
  3010.             });
  3011.         }
  3012.     }
  3013.  
  3014.     // event listeners
  3015.     document.addEventListener('yt-navigate-start', handleYTNavigation); // reset
  3016.     document.addEventListener('yt-navigate-finish', handleYouTubeNavigation); // default
  3017.     document.addEventListener('yt-page-data-updated', handleYouTubeNavigation); // backup
  3018.     document.addEventListener('yt-page-data-fetched', handleYouTubeNavigation); // redundancy
  3019.     //document.addEventListener('yt-player-updated', handleYouTubeNavigation);
  3020.     //document.addEventListener('yt-update-title', handleYouTubeNavigation);
  3021.     //document.addEventListener('yt-page-type-changed', handleYouTubeNavigation);
  3022.     document.addEventListener('yt-service-request-completed', handleYouTubeNavigation); // for chrome
  3023. })();