☰

Youtube Video Downloader 2025

Download Youtube videos in various formats. Download multiple videos at once.

  1. // ==UserScript==
  2. // @name         Youtube Video Downloader 2025
  3. // @namespace    http://tampermonkey.net/
  4. // @author       fb
  5. // @version      1.3.1
  6. // @description  Download Youtube videos in various formats. Download multiple videos at once.
  7. // @match        https://www.youtube.com/*
  8. // @grant        GM_xmlhttpRequest
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @connect      p.oceansaver.in
  12. // @license      GPL-3.0-or-later
  13. // @run-at       document-end
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     const STORAGE_FORMAT = 'selectedFormat';
  20.     const STORAGE_DOWNLOADS = 'ytDownloads';
  21.     const UI_WRAPPER_ID = 'yt-downloader-wrapper';
  22.     const FORMAT_BUTTON_ID = 'yt-downloader-format-button';
  23.     const FORMAT_POPUP_ID = 'yt-downloader-format-popup';
  24.     const COMBINED_BUTTON_ID = 'yt-downloader-combined-button';
  25.     const DOWNLOAD_ACTION_ID = 'yt-downloader-action-part';
  26.     const DROPDOWN_ACTION_ID = 'yt-downloader-dropdown-part';
  27.     const DOWNLOAD_POPUP_ID = 'download-dropdown-popup';
  28.     const POLL_INTERVALS = {};
  29.  
  30.     // Format definitions
  31.     const FORMAT_GROUPS = [
  32.         { label: 'Audio', options: [['mp3','MP3'],['m4a','M4A'],['webm','WEBM'],['aac','AAC'],['flac','FLAC'],['opus','OPUS'],['ogg','OGG'],['wav','WAV']] },
  33.         { label: 'Video', options: [['360','MP4 (360p)'],['480','MP4 (480p)'],['720','MP4 (720p)'],['1080','MP4 (1080p)'],['1440','MP4 (1440p)'],['4k','WEBM (4K)']] }
  34.     ];
  35.     const DEFAULT_FORMAT = '1080';
  36.  
  37.     function getFormatText(value) {
  38.         for (const group of FORMAT_GROUPS) {
  39.             for (const [val, text] of group.options) {
  40.                 if (val === value) return text;
  41.             }
  42.         }
  43.         return 'Select Format';
  44.     }
  45.  
  46.     function isDarkTheme() {
  47.         return document.documentElement.hasAttribute('dark');
  48.     }
  49.  
  50.     function isYouTubeLiveStream() {
  51.         const ypr = window.ytInitialPlayerResponse || {};
  52.         return !!(
  53.             ypr.videoDetails?.isLiveContent === true ||
  54.             ypr.microformat?.playerMicroformatRenderer?.liveBroadcastDetails ||
  55.             document.querySelector('meta[itemprop="isLiveBroadcast"][content="True"]') ||
  56.             document.querySelector('.ytp-live')
  57.         );
  58.     }
  59.  
  60.     function checkPageAndInjectUI() {
  61.         const existing = document.getElementById(UI_WRAPPER_ID);
  62.         const container = document.querySelector('#end');
  63.  
  64.         if (container && !existing) injectUI(container);
  65.         else if (!container && existing) removeUI();
  66.  
  67.         updateUIState();
  68.     }
  69.  
  70.     document.addEventListener('yt-navigate-finish', checkPageAndInjectUI);
  71.     window.addEventListener('load', checkPageAndInjectUI);
  72.  
  73.     function updateUIState() {
  74.         const wrapper = document.getElementById(UI_WRAPPER_ID);
  75.         if (!wrapper) return;
  76.         const isWatchOrShorts = window.location.pathname === '/watch' || window.location.pathname.startsWith('/shorts/');
  77.         const disabled = !isWatchOrShorts || isYouTubeLiveStream();
  78.  
  79.         const formatButton = wrapper.querySelector(`#${FORMAT_BUTTON_ID}`);
  80.         const downloadActionPart = wrapper.querySelector(`#${DOWNLOAD_ACTION_ID}`);
  81.  
  82.         if(formatButton) {
  83.              formatButton.disabled = disabled;
  84.              formatButton.style.opacity = disabled ? 0.6 : 1;
  85.              formatButton.style.cursor = disabled ? 'not-allowed' : 'var(--btn-cursor)';
  86.         }
  87.         if(downloadActionPart) {
  88.             downloadActionPart.classList.toggle('disabled', disabled);
  89.             downloadActionPart.style.pointerEvents = disabled ? 'none' : 'auto';
  90.         }
  91.     }
  92.  
  93.     function injectUI(container) {
  94.         if (document.getElementById(UI_WRAPPER_ID)) return;
  95.         const wrapper = document.createElement('div');
  96.         wrapper.id = UI_WRAPPER_ID;
  97.         wrapper.style.display = 'flex';
  98.         wrapper.style.alignItems = 'center';
  99.         wrapper.style.marginRight = '10px';
  100.         wrapper.style.position = 'relative';
  101.  
  102.         // --- Format Button ---
  103.         const formatButton = document.createElement('button');
  104.         formatButton.id = FORMAT_BUTTON_ID;
  105.         formatButton.style.marginRight = '8px';
  106.         const savedFormat = GM_getValue(STORAGE_FORMAT, DEFAULT_FORMAT);
  107.         formatButton.dataset.value = savedFormat;
  108.         formatButton.textContent = getFormatText(savedFormat);
  109.         formatButton.addEventListener('click', toggleFormatPopup);
  110.         wrapper.appendChild(formatButton);
  111.  
  112.         // --- Combined Download/Dropdown Button ---
  113.         const combinedBtn = document.createElement('div');
  114.         combinedBtn.id = COMBINED_BUTTON_ID;
  115.         combinedBtn.style.display = 'inline-flex';
  116.         combinedBtn.style.alignItems = 'stretch';
  117.         combinedBtn.style.height = '36px';
  118.         combinedBtn.style.borderRadius = 'var(--btn-radius)';
  119.         combinedBtn.style.backgroundColor = 'var(--btn-bg)';
  120.         combinedBtn.style.cursor = 'default';
  121.         combinedBtn.style.position = 'relative';
  122.  
  123.         
  124.         const downloadPart = document.createElement('div');
  125.         downloadPart.id = DOWNLOAD_ACTION_ID;
  126.         downloadPart.title = 'Download Video/Audio';
  127.         downloadPart.style.display = 'inline-flex';
  128.         downloadPart.style.alignItems = 'center';
  129.         downloadPart.style.padding = '0 12px 0 8px';
  130.         downloadPart.style.cursor = 'var(--btn-cursor)';
  131.         downloadPart.style.transition = 'background-color .2s ease';
  132.         downloadPart.style.borderRadius = 'var(--btn-radius) 0 0 var(--btn-radius)';
  133.  
  134.         // Create SVG element programmatically
  135.         const downloadSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  136.         downloadSvg.setAttribute('viewBox', '0 0 24 24');
  137.         downloadSvg.setAttribute('width', '24');
  138.         downloadSvg.setAttribute('height', '24');
  139.         downloadSvg.style.marginRight = '6px';
  140.         downloadSvg.style.fill = 'none';
  141.         downloadSvg.style.stroke = 'currentColor';
  142.         downloadSvg.style.strokeWidth = '1.5';
  143.         downloadSvg.style.strokeLinecap = 'round';
  144.         downloadSvg.style.strokeLinejoin = 'round';
  145.  
  146.         const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  147.         path1.setAttribute('d', 'M12 4v12');
  148.         const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  149.         path2.setAttribute('d', 'M8 12l4 4 4-4');
  150.         const path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  151.         path3.setAttribute('d', 'M4 18h16');
  152.  
  153.         downloadSvg.appendChild(path1);
  154.         downloadSvg.appendChild(path2);
  155.         downloadSvg.appendChild(path3);
  156.  
  157.         // Create span element programmatically
  158.         const downloadSpan = document.createElement('span');
  159.         downloadSpan.textContent = 'Download';
  160.  
  161.         // Append elements
  162.         downloadPart.appendChild(downloadSvg);
  163.         downloadPart.appendChild(downloadSpan);
  164.  
  165.         downloadPart.addEventListener('click', startDownload);
  166.         downloadPart.addEventListener('mouseenter', () => { if (!downloadPart.classList.contains('disabled')) downloadPart.style.backgroundColor = 'var(--btn-hover-bg)'; });
  167.         downloadPart.addEventListener('mouseleave', () => { downloadPart.style.backgroundColor = 'transparent'; });
  168.  
  169.  
  170.         const separator = document.createElement('div');
  171.         separator.style.width = '1px';
  172.         separator.style.backgroundColor = 'var(--separator-color)';
  173.         separator.style.height = '20px';
  174.         separator.style.alignSelf = 'center';
  175.  
  176.         const dropdownPart = document.createElement('div');
  177.         dropdownPart.id = DROPDOWN_ACTION_ID;
  178.         dropdownPart.dataset.count = '0';
  179.         dropdownPart.title = 'Show active downloads';
  180.         dropdownPart.style.display = 'inline-flex';
  181.         dropdownPart.style.alignItems = 'center';
  182.         dropdownPart.style.justifyContent = 'center';
  183.         dropdownPart.style.padding = '0 10px';
  184.         dropdownPart.style.cursor = 'var(--btn-cursor)';
  185.         dropdownPart.style.position = 'relative';
  186.         dropdownPart.style.transition = 'background-color .2s ease';
  187.         dropdownPart.style.borderRadius = '0 var(--btn-radius) var(--btn-radius) 0';
  188.         const darkTheme = isDarkTheme();
  189.  
  190.         // Create SVG element programmatically
  191.         const dropdownSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  192.         dropdownSvg.setAttribute('width', '10');
  193.         dropdownSvg.setAttribute('height', '7');
  194.         dropdownSvg.setAttribute('viewBox', '0 0 10 7');
  195.         dropdownSvg.style.fill = darkTheme ? '#fff' : '#000';
  196.  
  197.         const dropdownPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  198.         dropdownPath.setAttribute('d', 'M0 0l5 7 5-7z');
  199.         dropdownSvg.appendChild(dropdownPath);
  200.  
  201.         // Append SVG
  202.         dropdownPart.appendChild(dropdownSvg);
  203.  
  204.         dropdownPart.addEventListener('click', toggleDownloadPopup);
  205.         dropdownPart.addEventListener('mouseenter', () => { dropdownPart.style.backgroundColor = 'var(--btn-hover-bg)'; });
  206.         dropdownPart.addEventListener('mouseleave', () => { dropdownPart.style.backgroundColor = 'transparent'; });
  207.  
  208.         combinedBtn.appendChild(downloadPart);
  209.         combinedBtn.appendChild(separator);
  210.         combinedBtn.appendChild(dropdownPart);
  211.         wrapper.appendChild(combinedBtn);
  212.  
  213.         container.insertAdjacentElement('afterbegin', wrapper);
  214.  
  215.         const style = document.createElement('style');
  216.  
  217.         style.textContent = `
  218. :root {
  219.     --btn-bg: ${darkTheme ? "#272727" : "#f2f2f2"};
  220.     --btn-hover-bg: ${darkTheme ? "#3f3f3f" : "#e5e5e5"};
  221.     --btn-color: ${darkTheme ? "#fff" : "#000"};
  222.     --btn-radius: 18px;
  223.     --btn-padding: 0 12px;
  224.     --btn-font: 500 14px/36px "Roboto", "Arial", sans-serif;
  225.     --btn-cursor: pointer;
  226.     --progress-bg: ${darkTheme ? "#3f3f3f" : "#e5e5e5"};
  227.     --progress-fill-color: #2196F3;
  228.     --progress-text-color: ${darkTheme ? "#fff" : "#000"};
  229.     --popup-bg: ${darkTheme ? "#212121" : "#fff"};
  230.     --popup-border: ${darkTheme ? "#444" : "#ccc"};
  231.     --popup-text: ${darkTheme ? "#fff" : "#030303"};
  232.     --badge-bg: #cc0000;
  233.     --badge-text: #fff;
  234.     --separator-color: ${darkTheme ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)'};
  235.     --popup-radius: 6px;
  236.     --popup-shadow: 0 4px 12px rgba(0,0,0,0.15);
  237. }
  238.  
  239. /* Format Button Styling */
  240. #${FORMAT_BUTTON_ID} {
  241.     display: inline-flex;
  242.     align-items: center;
  243.     justify-content: center;
  244.     color: var(--btn-color);
  245.     background-color: var(--btn-bg);
  246.     border: none;
  247.     border-radius: var(--btn-radius);
  248.     padding: 0 12px;
  249.     padding-right: 30px;
  250.     white-space: nowrap;
  251.     text-transform: none;
  252.     font: var(--btn-font);
  253.     cursor: var(--btn-cursor);
  254.     transition: background-color .2s ease;
  255.     height: 36px;
  256.     width: 130px;
  257.     box-sizing: border-box;
  258.     position: relative;
  259.     box-shadow: none;
  260. }
  261. #${FORMAT_BUTTON_ID}:disabled {
  262.     cursor: not-allowed;
  263.     opacity: 0.6;
  264. }
  265. #${FORMAT_BUTTON_ID}:hover:not(:disabled) {
  266.     background-color: var(--btn-hover-bg);
  267. }
  268. /* Dropdown Arrow for Format Button */
  269. #${FORMAT_BUTTON_ID}::after {
  270.     content: '';
  271.     position: absolute;
  272.     right: 12px; /* Position arrow within the padding */
  273.     top: 50%;
  274.     transform: translateY(-50%);
  275.     width: 0;
  276.     height: 0;
  277.     border-left: 5px solid transparent;
  278.     border-right: 5px solid transparent;
  279.     border-top: 7px solid var(--btn-color);
  280. }
  281.  
  282. /* Combined Button Styling */
  283. #${COMBINED_BUTTON_ID} {
  284.     color: var(--btn-color);
  285.     font: var(--btn-font);
  286.     line-height: 36px;
  287. }
  288.  
  289. #${DOWNLOAD_ACTION_ID}, #${DROPDOWN_ACTION_ID} {
  290.     background-color: transparent;
  291. }
  292.  
  293. #${DOWNLOAD_ACTION_ID} {
  294.     color: inherit;
  295. }
  296. #${DOWNLOAD_ACTION_ID} svg {
  297.     stroke: currentColor;
  298. }
  299. #${DOWNLOAD_ACTION_ID}.disabled {
  300.     opacity: 0.6;
  301.     cursor: not-allowed;
  302. }
  303. #${DOWNLOAD_ACTION_ID}.disabled:hover {
  304.     background-color: transparent !important;
  305. }
  306.  
  307. #${DROPDOWN_ACTION_ID} {
  308.     color: inherit;
  309. }
  310. #${DROPDOWN_ACTION_ID} svg {
  311.     fill: currentColor;
  312. }
  313.  
  314. #${DROPDOWN_ACTION_ID}::after {
  315.     content: attr(data-count);
  316.     position: absolute;
  317.     top: 2px;
  318.     right: -8px;
  319.     background-color: var(--badge-bg);
  320.     color: var(--badge-text);
  321.     border-radius: 50%;
  322.     min-width: 16px;
  323.     height: 16px;
  324.     padding: 0 3px;
  325.     font-size: 10px;
  326.     line-height: 16px;
  327.     text-align: center;
  328.     font-weight: bold;
  329.     display: none;
  330.     font-family: "Roboto", "Arial", sans-serif;
  331.     box-sizing: border-box;
  332.     z-index: 2;
  333. }
  334. #${DROPDOWN_ACTION_ID}[data-count]:not([data-count="0"])::after {
  335.     display: inline-block;
  336. }
  337.  
  338. /* General Popup Styling */
  339. #${FORMAT_POPUP_ID}, #${DOWNLOAD_POPUP_ID} {
  340.     position: absolute;
  341.     background: var(--popup-bg);
  342.     color: var(--popup-text);
  343.     border: 1px solid var(--popup-border);
  344.     border-radius: var(--popup-radius);
  345.     box-shadow: var(--popup-shadow);
  346.     padding: 10px;
  347.     z-index: 10000;
  348.     max-height: 350px;
  349.     overflow-y: auto;
  350. }
  351.  
  352. /* Format Popup Specifics */
  353. #${FORMAT_POPUP_ID} {
  354.     width: 200px;
  355. }
  356. .format-group-label {
  357.     font-weight: bold;
  358.     font-size: 12px;
  359.     color: ${darkTheme ? '#aaa' : '#555'};
  360.     margin-top: 8px;
  361.     margin-bottom: 4px;
  362.     padding-left: 5px;
  363.     text-transform: uppercase;
  364. }
  365. .format-group-label:first-child {
  366.     margin-top: 0;
  367. }
  368. .format-item {
  369.     display: block;
  370.     width: 100%;
  371.     padding: 6px 10px;
  372.     font-size: 14px;
  373.     cursor: pointer;
  374.     border-radius: 4px;
  375.     box-sizing: border-box;
  376.     text-align: left;
  377.     background: none;
  378.     border: none;
  379.     color: inherit;
  380. }
  381. .format-item:hover {
  382.     background-color: var(--btn-hover-bg);
  383. }
  384. .format-item.selected {
  385.     font-weight: bold;
  386.     background-color: rgba(0, 100, 255, 0.1);
  387. }
  388.  
  389.  
  390. /* Download Popup Specifics */
  391. #${DOWNLOAD_POPUP_ID} {
  392.     width: 280px;
  393. }
  394. .download-item {
  395.     margin-bottom: 12px;
  396.     padding-bottom: 8px;
  397.     border-bottom: 1px solid var(--popup-border);
  398. }
  399. .download-item:last-child {
  400.     margin-bottom: 0;
  401.     border-bottom: none;
  402. }
  403. .progress-bar {
  404.     width: 100%;
  405.     height: 18px;
  406.     background-color: var(--progress-bg);
  407.     border-radius: 9px;
  408.     overflow: hidden;
  409.     position: relative;
  410.     margin-top: 4px;
  411. }
  412. .progress-fill {
  413.     height: 100%;
  414.     width: 0%;
  415.     background-color: var(--progress-fill-color);
  416.     transition: width 0.3s ease-in-out;
  417.     display: flex;
  418.     align-items: center;
  419.     justify-content: center;
  420. }
  421. .progress-text {
  422.     position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  423.     display: flex;
  424.     align-items: center;
  425.     justify-content: center;
  426.     color: var(--progress-text-color);
  427.     font: var(--btn-font);
  428.     font-size: 11px;
  429.     line-height: 18px;
  430.     white-space: nowrap;
  431.     z-index: 1;
  432. }
  433. .download-item-title {
  434.     font-size: 13px;
  435.     font-weight: 500;
  436.     margin-bottom: 2px;
  437.     white-space: nowrap;
  438.     overflow: hidden;
  439.     text-overflow: ellipsis;
  440.     display: block;
  441. }
  442. .download-item-format {
  443.     font-size: 11px;
  444.     color: ${darkTheme ? '#aaa' : '#555'};
  445.     display: block;
  446.     margin-bottom: 4px;
  447. }
  448. .no-downloads-message {
  449.     font-size: 15px;
  450.     color: ${darkTheme ? '#aaa' : '#555'};
  451.     text-align: center;
  452.     padding: 10px 0;
  453. }
  454.         `;
  455.  
  456.         document.head.appendChild(style);
  457.  
  458.         resumeDownloads();
  459.         updateDownloadCountBadge();
  460.         updateUIState();
  461.     }
  462.  
  463.     function removeUI() {
  464.         const w = document.getElementById(UI_WRAPPER_ID);
  465.         if (w) w.remove();
  466.         // Remove both popups if they exist
  467.         const formatPopup = document.getElementById(FORMAT_POPUP_ID);
  468.         if (formatPopup) formatPopup.remove();
  469.         const downloadPopup = document.getElementById(DOWNLOAD_POPUP_ID);
  470.         if (downloadPopup) downloadPopup.remove();
  471.     }
  472.  
  473.     function startDownload() {
  474.         const downloadActionPart = document.getElementById(DOWNLOAD_ACTION_ID);
  475.         if (downloadActionPart && downloadActionPart.classList.contains('disabled')) return;
  476.  
  477.         const formatButton = document.getElementById(FORMAT_BUTTON_ID);
  478.         const fmt = formatButton.dataset.value;
  479.         const formatText = formatButton.textContent;
  480.         const videoUrl = encodeURIComponent(location.href);
  481.         const initUrl = `https://p.oceansaver.in/ajax/download.php?format=${fmt}&url=${videoUrl}`;
  482.         const id = Date.now().toString();
  483.         const title = document.querySelector('h1.ytd-watch-metadata #video-title, h1.title.ytd-video-primary-info-renderer')?.textContent.trim() || 'YouTube Video';
  484.  
  485.         GM_xmlhttpRequest({
  486.             method: 'GET', url: initUrl, responseType: 'json',
  487.             onload(res) {
  488.                 const data = res.response;
  489.                 if (!data?.success) return alert('Failed to initialize');
  490.                 const downloads = GM_getValue(STORAGE_DOWNLOADS, []);
  491.                 downloads.push({ id, title, format: formatText, progress_url: data.progress_url, progress: 0, status: 'in_progress' });
  492.                 GM_setValue(STORAGE_DOWNLOADS, downloads);
  493.                 renderDownloadPopup(); // Update download popup if open
  494.                 updateDownloadCountBadge();
  495.                 pollProgress(id);
  496.             },
  497.             onerror() { alert('Network error'); }
  498.         });
  499.     }
  500.  
  501.     function pollProgress(id) {
  502.         const downloads = GM_getValue(STORAGE_DOWNLOADS, []);
  503.         const dl = downloads.find(d=>d.id===id);
  504.         if (!dl || dl.status !== 'in_progress') return;
  505.  
  506.         if (POLL_INTERVALS[id]) clearInterval(POLL_INTERVALS[id]);
  507.  
  508.         const interval = setInterval(()=>{
  509.             const currentDownloads = GM_getValue(STORAGE_DOWNLOADS, []);
  510.             const currentDl = currentDownloads.find(d=>d.id===id);
  511.             if (!currentDl || currentDl.status !== 'in_progress') {
  512.                  console.log(`Stopping poll for ${id}, status changed.`);
  513.                  clearInterval(interval);
  514.                  delete POLL_INTERVALS[id];
  515.                  renderDownloadPopup();
  516.                  updateDownloadCountBadge();
  517.                  return;
  518.             }
  519.  
  520.             GM_xmlhttpRequest({ method:'GET', url: dl.progress_url, responseType:'json', onload(res){
  521.                     const p = res.response;
  522.                     const all = GM_getValue(STORAGE_DOWNLOADS, []);
  523.                     const obj = all.find(x=>x.id===id);
  524.                     if (!obj) {
  525.                         clearInterval(interval); delete POLL_INTERVALS[id];
  526.                         updateDownloadCountBadge();
  527.                         return;
  528.                     }
  529.                     if (!p) {
  530.                         console.warn(`Empty poll response for ${id}`);
  531.                         return;
  532.                     }
  533.                     let statusChanged = false;
  534.                     if (p.success) {
  535.                         clearInterval(interval); delete POLL_INTERVALS[id];
  536.                         obj.progress=100; obj.status='completed'; obj.download_url=p.download_url;
  537.                         statusChanged = true;
  538.                         GM_setValue(STORAGE_DOWNLOADS, all);
  539.                         renderDownloadPopup();
  540.                         triggerFileDownload(p.download_url);
  541.                     } else if (p.error) {
  542.                         clearInterval(interval); delete POLL_INTERVALS[id];
  543.                         obj.status = 'error'; obj.errorMsg = p.error;
  544.                         statusChanged = true;
  545.                         GM_setValue(STORAGE_DOWNLOADS, all);
  546.                         renderDownloadPopup();
  547.                         console.error(`Download ${id} failed: ${p.error}`);
  548.                     } else {
  549.                         const percent = p.progress ? Math.min(Math.round(p.progress/10),100) : obj.progress;
  550.                         if (obj.progress !== percent || obj.status !== 'in_progress') {
  551.                             obj.progress = percent;
  552.                             obj.status = 'in_progress';
  553.                             GM_setValue(STORAGE_DOWNLOADS, all);
  554.                             renderDownloadPopup();
  555.                         }
  556.                     }
  557.                     if (statusChanged) {
  558.                         updateDownloadCountBadge();
  559.                     }
  560.                 },
  561.                 onerror(){
  562.                     clearInterval(interval); delete POLL_INTERVALS[id];
  563.                     const all = GM_getValue(STORAGE_DOWNLOADS, []);
  564.                     const obj = all.find(x=>x.id===id);
  565.                     if(obj) {
  566.                         obj.status = 'error'; obj.errorMsg = 'Network error during polling';
  567.                         GM_setValue(STORAGE_DOWNLOADS, all);
  568.                         renderDownloadPopup();
  569.                         updateDownloadCountBadge();
  570.                     }
  571.                     console.error(`Network error polling ${id}`);
  572.                 }
  573.             });
  574.         }, 2000);
  575.         POLL_INTERVALS[id] = interval;
  576.     }
  577.  
  578.     function triggerFileDownload(url) {
  579.         const a = document.createElement('a'); a.href=url; a.download=''; document.body.appendChild(a);
  580.         a.click(); a.remove();
  581.     }
  582.  
  583.     // --- Popup Toggle Functions ---
  584.  
  585.     function toggleFormatPopup() {
  586.         let popup = document.getElementById(FORMAT_POPUP_ID);
  587.         if (popup) { popup.remove(); return; }
  588.  
  589.         // Close download popup if open
  590.         const downloadPopup = document.getElementById(DOWNLOAD_POPUP_ID);
  591.         if (downloadPopup) downloadPopup.remove();
  592.  
  593.         const wrapper = document.getElementById(UI_WRAPPER_ID);
  594.         const formatButton = document.getElementById(FORMAT_BUTTON_ID);
  595.         if (!wrapper || !formatButton) return;
  596.  
  597.         popup = document.createElement('div');
  598.         popup.id = FORMAT_POPUP_ID;
  599.         wrapper.appendChild(popup);
  600.         renderFormatPopup();
  601.  
  602.         // Position popup below format button
  603.         const buttonRect = formatButton.getBoundingClientRect();
  604.         const wrapperRect = wrapper.getBoundingClientRect();
  605.         popup.style.top = (buttonRect.bottom - wrapperRect.top + 5) + 'px';
  606.         popup.style.left = (buttonRect.left - wrapperRect.left) + 'px';
  607.  
  608.         setTimeout(() => {
  609.             document.addEventListener('click', handleClickOutsideFormatPopup, { capture: true, once: true });
  610.         }, 0);
  611.     }
  612.  
  613.     function toggleDownloadPopup() {
  614.         let popup = document.getElementById(DOWNLOAD_POPUP_ID);
  615.         if (popup) { popup.remove(); return; }
  616.  
  617.         // Close format popup if open
  618.         const formatPopup = document.getElementById(FORMAT_POPUP_ID);
  619.         if (formatPopup) formatPopup.remove();
  620.  
  621.         const wrapper = document.getElementById(UI_WRAPPER_ID);
  622.         const combinedButton = document.getElementById(COMBINED_BUTTON_ID);
  623.         if (!wrapper || !combinedButton) return;
  624.  
  625.         popup = document.createElement('div');
  626.         popup.id = DOWNLOAD_POPUP_ID;
  627.         wrapper.appendChild(popup);
  628.         renderDownloadPopup();
  629.  
  630.         // Position popup below combined button, aligned right
  631.         const buttonRect = combinedButton.getBoundingClientRect();
  632.         const wrapperRect = wrapper.getBoundingClientRect();
  633.         popup.style.top = (buttonRect.bottom - wrapperRect.top + 5) + 'px';
  634.         popup.style.right = (wrapperRect.right - buttonRect.right) + 'px';
  635.  
  636.         setTimeout(() => {
  637.             document.addEventListener('click', handleClickOutsideDownloadPopup, { capture: true, once: true });
  638.         }, 0);
  639.     }
  640.  
  641.     // --- Popup Click Outside Handlers ---
  642.  
  643.     function handleClickOutsideFormatPopup(event) {
  644.         const popup = document.getElementById(FORMAT_POPUP_ID);
  645.         const button = document.getElementById(FORMAT_BUTTON_ID);
  646.         if (popup && !popup.contains(event.target) && !button.contains(event.target)) {
  647.             popup.remove();
  648.         } else if (popup) {
  649.             // Re-attach listener if click was inside popup or on button
  650.             document.addEventListener('click', handleClickOutsideFormatPopup, { capture: true, once: true });
  651.         }
  652.     }
  653.  
  654.     function handleClickOutsideDownloadPopup(event) {
  655.         const popup = document.getElementById(DOWNLOAD_POPUP_ID);
  656.         const button = document.getElementById(DROPDOWN_ACTION_ID); // Check against the dropdown part
  657.         if (popup && !popup.contains(event.target) && !button.contains(event.target)) {
  658.             popup.remove();
  659.         } else if (popup) {
  660.             document.addEventListener('click', handleClickOutsideDownloadPopup, { capture: true, once: true });
  661.         }
  662.     }
  663.  
  664.     // --- Popup Render Functions ---
  665.  
  666.     function renderFormatPopup() {
  667.         const popup = document.getElementById(FORMAT_POPUP_ID);
  668.         if (!popup) return;
  669.         popup.textContent = '';
  670.         const currentFormat = GM_getValue(STORAGE_FORMAT, DEFAULT_FORMAT);
  671.  
  672.         FORMAT_GROUPS.forEach(group => {
  673.             const groupLabel = document.createElement('div');
  674.             groupLabel.className = 'format-group-label';
  675.             groupLabel.textContent = group.label;
  676.             popup.appendChild(groupLabel);
  677.  
  678.             group.options.forEach(([value, text]) => {
  679.                 const item = document.createElement('button');
  680.                 item.className = 'format-item';
  681.                 item.textContent = text;
  682.                 item.dataset.value = value;
  683.                 if (value === currentFormat) {
  684.                     item.classList.add('selected');
  685.                 }
  686.                 item.onclick = () => {
  687.                     GM_setValue(STORAGE_FORMAT, value);
  688.                     const formatButton = document.getElementById(FORMAT_BUTTON_ID);
  689.                     if (formatButton) {
  690.                         formatButton.textContent = text;
  691.                         formatButton.dataset.value = value;
  692.                     }
  693.                     popup.remove();
  694.                 };
  695.                 popup.appendChild(item);
  696.             });
  697.         });
  698.     }
  699.  
  700.  
  701.     function renderDownloadPopup() {
  702.         const popup = document.getElementById(DOWNLOAD_POPUP_ID);
  703.         if (!popup) return;
  704.         popup.textContent = '';
  705.  
  706.         const downloads = GM_getValue(STORAGE_DOWNLOADS, [])
  707.                          .filter(d => d.status === 'in_progress' || d.status === 'error')
  708.                          .sort((a, b) => (b.id - a.id));
  709.  
  710.         if (!downloads.length) {
  711.             const noDownloadsMsg = document.createElement('div');
  712.             noDownloadsMsg.className = 'no-downloads-message';
  713.             noDownloadsMsg.textContent = 'No active downloads.';
  714.             popup.appendChild(noDownloadsMsg);
  715.             return;
  716.         }
  717.  
  718.         downloads.forEach(d => {
  719.             const item = document.createElement('div');
  720.             item.className = 'download-item';
  721.  
  722.             const titleDiv = document.createElement('div');
  723.             titleDiv.className = 'download-item-title';
  724.             titleDiv.textContent = d.title || `Download ${d.id}`;
  725.             titleDiv.title = d.title || `Download ${d.id}`;
  726.             item.appendChild(titleDiv);
  727.  
  728.             const formatDiv = document.createElement('div');
  729.             formatDiv.className = 'download-item-format';
  730.             formatDiv.textContent = d.format || 'Unknown Format';
  731.             item.appendChild(formatDiv);
  732.  
  733.             if (d.status === 'in_progress') {
  734.                 const bar = document.createElement('div'); bar.className = 'progress-bar';
  735.                 const fill = document.createElement('div'); fill.className = 'progress-fill';
  736.                 fill.style.width = `${d.progress}%`;
  737.                 bar.appendChild(fill);
  738.                 const txt = document.createElement('div'); txt.className = 'progress-text';
  739.                 txt.textContent = `${d.progress}%`;
  740.                 bar.appendChild(txt);
  741.                 item.appendChild(bar);
  742.             } else if (d.status === 'error') {
  743.                 const errorDiv = document.createElement('div');
  744.                 errorDiv.style.color = '#f44336'; errorDiv.style.fontSize = '12px';
  745.                 errorDiv.textContent = `Error: ${d.errorMsg || 'Unknown error'}`;
  746.                 item.appendChild(errorDiv);
  747.             }
  748.             popup.appendChild(item);
  749.         });
  750.  
  751.          if (downloads.some(d => d.status === 'error')) {
  752.             const clearButton = document.createElement('button');
  753.             clearButton.textContent = 'Clear Errors';
  754.             clearButton.style.marginTop = '10px';
  755.             clearButton.style.fontSize = '12px';
  756.             clearButton.style.padding = '4px 8px';
  757.             clearButton.style.backgroundColor = 'var(--btn-bg)';
  758.             clearButton.style.color = 'var(--btn-color)';
  759.             clearButton.style.border = 'none';
  760.             clearButton.style.borderRadius = '4px';
  761.             clearButton.style.cursor = 'pointer';
  762.             clearButton.onmouseover = () => clearButton.style.backgroundColor = 'var(--btn-hover-bg)';
  763.             clearButton.onmouseout = () => clearButton.style.backgroundColor = 'var(--btn-bg)';
  764.  
  765.             clearButton.onclick = () => {
  766.                 const allDownloads = GM_getValue(STORAGE_DOWNLOADS, []);
  767.                 const keptDownloads = allDownloads.filter(dl => dl.status !== 'error');
  768.                 GM_setValue(STORAGE_DOWNLOADS, keptDownloads);
  769.                 renderDownloadPopup();
  770.                 updateDownloadCountBadge(); // Badge only shows 'in_progress', errors don't count
  771.             };
  772.             popup.appendChild(clearButton);
  773.         }
  774.     }
  775.  
  776.     function updateDownloadCountBadge() {
  777.         const dropdownPart = document.getElementById(DROPDOWN_ACTION_ID);
  778.         if (!dropdownPart) return;
  779.  
  780.         const downloads = GM_getValue(STORAGE_DOWNLOADS, []);
  781.         const activeCount = downloads.filter(d => d.status === 'in_progress').length;
  782.  
  783.         dropdownPart.dataset.count = activeCount.toString();
  784.     }
  785.  
  786.     function resumeDownloads() {
  787.         const downloads = GM_getValue(STORAGE_DOWNLOADS, []).filter(d => d.status === 'in_progress');
  788.         console.log(`Resuming ${downloads.length} downloads.`);
  789.         downloads.forEach(d => {
  790.             if (!POLL_INTERVALS[d.id]) {
  791.                  pollProgress(d.id);
  792.             }
  793.         });
  794.     }
  795. })();