☰

YouTube Direct Downloader

Video/short download button hidden in three dots combo menu below video or next to subscribe button. Downloads MP4, WEBM or MP3 from youtube + option to redirect shorts to normal videos. Choose your preferred quality from 8k to audio only, codec (h264, vp9 or av1) or service provider (cobalt, y2mate, yt1s) in settings.

当前为 2024-10-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                YouTube Direct Downloader
  3. // @version             2.4.1
  4. // @description         Video/short download button hidden in three dots combo menu below video or next to subscribe button. Downloads MP4, WEBM or MP3 from youtube + option to redirect shorts to normal videos. Choose your preferred quality from 8k to audio only, codec (h264, vp9 or av1) or service provider (cobalt, y2mate, yt1s) in settings.
  5. // @author              FawayTT
  6. // @namespace           FawayTT
  7. // @supportURL          https://github.com/FawayTT/userscripts/issues
  8. // @icon                https://github.com/FawayTT/userscripts/blob/main/ydd-icon.png?raw=true
  9. // @match               https://www.youtube.com/*
  10. // @connect             api.cobalt.tools
  11. // @require             https://openuserjs.org/src/libs/sizzle/GM_config.js
  12. // @grant               GM_getValue
  13. // @grant               GM_setValue
  14. // @grant               GM_registerMenuCommand
  15. // @grant               GM_openInTab
  16. // @grant               GM_xmlhttpRequest
  17. // @license             MIT
  18. // ==/UserScript==
  19.  
  20. const gmcCSS = `
  21.  #YDD_config {
  22.   background-color: rgba(0, 0, 0, 0.8) !important;
  23.   backdrop-filter: blur(10px);
  24.   color: #fff !important;
  25.   border-radius: 30px !important;
  26.   padding: 20px !important;
  27.   height: fit-content !important;
  28.   max-width: 700px !important;
  29.   font-family: Arial, sans-serif !important;
  30.   z-index: 9999999 !important;
  31.   padding-bottom: 0px !important;
  32.   width: 100% !important;
  33. }
  34.  
  35. #YDD_config_header {
  36.   background-color: #ff000052 !important;
  37.   border-radius: 10px;
  38.   padding: 10px !important;
  39.   text-align: center !important;
  40.   font-size: 24px !important;
  41.   color: blob !important;
  42.   font-weight: 600 !important;
  43. }
  44.  
  45. .section_header_holder {
  46.   font-weight: 600;
  47.   margin-top: 10px !important;
  48. }
  49.  
  50. #YDD_config_buttons_holder {
  51.   text-align: center;
  52.   margin-top: 20px;
  53. }
  54.  
  55. #YDD_config_resetLink {
  56.   color: #fff !important;
  57. }
  58.  
  59. .config_var {
  60.   margin: 0px !important;
  61.   line-height: 3;
  62. }
  63.  
  64. #YDD_config_buttons_holder button {
  65.   background-color: #ff000052 !important;
  66.   color: #fff;
  67.   border: none;
  68.   font-weight: 600;
  69.   padding: 10px 20px !important;
  70.   border-radius: 10px;
  71.   font-size: 14px;
  72.   cursor: pointer;
  73.   transition: background-color 0.1s ease-in;
  74. }
  75.  
  76. #YDD_config_buttons_holder button:hover {
  77.   background-color: #ff0000 !important;
  78. }
  79.  
  80. #YDD_config_fieldset {
  81.   border: 1px solid #444;
  82.   padding: 10px;
  83.   border-radius: 5px;
  84.   margin-top: 10px;
  85. }
  86.  
  87. #YDD_config_fieldset legend {
  88.   color: #ff0000;
  89. }
  90.  
  91. .section_header {
  92.   background: none !important;
  93.   width: fit-content;
  94.   margin: 5px 0px !important;
  95.   border: none !important;
  96.   font-size: 18px !important;
  97.   color: #ff0000 !important;
  98. }
  99.  
  100. input, select, textarea {
  101.   cursor: pointer;
  102.   background-color: #333;
  103.   color: #fff;
  104.   border: 1px solid #555;
  105.   border-radius: 10px;
  106.   padding: 5px;
  107.   margin: 5px 0 !important;
  108. }
  109.  
  110. ::selection {
  111.   color: white;
  112.   background: #ff0000;
  113. }
  114.  
  115. input, select, textarea {
  116.   transition: all 0.1s ease-in;
  117. }
  118.  
  119. input:focus, select:focus, textarea:focus {
  120.   border-color: #ff0000;
  121. }
  122.  
  123. input:hover, select:hover, textarea:hover {
  124.   opacity: 0.8;
  125. }
  126.  
  127. label {
  128.   color: #fff;
  129. }
  130.  
  131. #YDD_config_buttons_holder {
  132.   position: relative;
  133.   margin-top: 0px !important;
  134.   display: flex;
  135.   justify-content: center;
  136.   align-items: baseline;
  137. }
  138.  
  139. .reset_holder {
  140.   position: absolute;
  141.   top: 50%;
  142.   transform: translateY(-50%);
  143.   right: 0;
  144.   padding: 10px;
  145. }
  146.  
  147. input[type='checkbox'] {
  148.   appearance: none;
  149.   position: absolute;
  150.   width: 20px;
  151.   transform: translateY(3px);
  152.   height: 20px;
  153.   border: 1px solid #555;
  154.   border-radius: 10px;
  155.   background-color: #333;
  156.   cursor: pointer;
  157. }
  158.  
  159. input[type='checkbox']:before {
  160.   content: " ";
  161. }
  162.  
  163. input[type='checkbox']:checked {
  164.   background-color: #d50707;
  165. }
  166.  
  167. input[type='checkbox']:checked::after {
  168.   content: "";
  169.   position: absolute;
  170.   top: 3px;
  171.   left: 2px;
  172.   width: 12px;
  173.   height: 6px;
  174.   border-bottom: 2px solid #ffffff;
  175.   border-left: 2px solid #ffffff;
  176.   transform: rotate(-45deg);
  177. }
  178.   
  179. #YDD_config_downloadService_var:after {
  180.   content: "▲ Use cobalt for best quality.";
  181.   display: block;
  182.   font-family: arial, tahoma, myriad pro, sans-serif;
  183.   font-size: 10px;
  184.   font-weight: bold;
  185.   margin-right: 6px;
  186.   opacity: 0.7;
  187. }
  188.  
  189. #YDD_config_vCodec_var:after {
  190.   content: "▲ H264 [MP4] = best compatibility. VP9 [WEBM] = better quality. AV1 = best quality but is used only by few videos.";
  191.   display: block;
  192.   font-family: arial, tahoma, myriad pro, sans-serif;
  193.   font-size: 10px;
  194.   font-weight: bold;
  195.   margin-right: 6px;
  196.   opacity: 0.7;
  197. }
  198.  
  199. #YDD_config_backupService_var:after {
  200.   content: "▲ In case Cobalt isn't working, automatically use this download service.";
  201.   display: block;
  202.   font-family: arial, tahoma, myriad pro, sans-serif;
  203.   font-size: 10px;
  204.   font-weight: bold;
  205.   margin-right: 6px;
  206.   opacity: 0.7;
  207. }
  208. `;
  209.  
  210. const yddCSS = `
  211.  ydd-item {
  212.   cursor: pointer;
  213.   margin-top: 8px;
  214.   font-size: 1.4rem;
  215.   line-height: 2rem;
  216.   font-weight: 400;
  217.   position: relative;
  218.   color: var(--yt-spec-text-primary);
  219.   font-family: "Roboto","Arial",sans-serif;
  220.   white-space: nowrap;
  221.   display: flex;
  222.   margin-bottom: -10px;
  223.   padding: 10px 0 10px 21px;
  224.   gap: 23px;
  225.   align-items: center;
  226.   text-transform: capitalize;
  227. }
  228.  
  229. ydd-item:hover {
  230.   background-color: var(--yt-spec-10-percent-layer);
  231. }
  232.  
  233. ydd-item-icon {
  234.   content: '⇩';
  235.   font-size: 2.1rem;
  236. }
  237.  
  238. ydd-item-text {
  239.   position: relative;
  240. }
  241.  
  242. ydd-item-button {
  243.   position: absolute;
  244.   left: 0;
  245.   top: 0;
  246.   width: 90%;
  247.   height: 100%;
  248.   opacity: 0;
  249.   cursor: pointer;
  250.   z-index: 9999;
  251. }
  252.  
  253. ydd-item-sidebar {
  254.   position: absolute;
  255.   display: flex;
  256.   flex-direction: column;
  257.   justify-content: center;
  258.   align-items: center;
  259.   background: rgba(255, 255, 255, 0.2);
  260.   border-radius: 3px;
  261.   padding: 1px;
  262.   color: var(--yt-spec-text-primary);
  263.   z-index: 9999;
  264.   right: 0;
  265.   top: 0;
  266.   width: 10%;
  267.   height: 90%;
  268. }
  269.  
  270. #ydd-button-sub {
  271.   cursor: pointer;
  272.   font-size: 2rem;
  273.   padding: 8px 12px;
  274.   border: none;
  275.   border-radius: 15px;
  276.   margin-left: 8px;
  277.   line-height: 2rem;
  278.   font-weight: 500;
  279.   color: #0f0f0f;
  280.   background-color: #f1f1f1;
  281.   font-family: "Roboto","Arial",sans-serif;
  282.   align-items: center;
  283.   text-transform: capitalize;
  284. }
  285.  
  286. #ydd-button-sub:hover {
  287.   filter: brightness(90%);
  288. }
  289.  
  290. ytd-menu-popup-renderer {
  291.   min-height: 100px !important;
  292.   min-width: 133px !important;
  293. }
  294. `;
  295.  
  296. GM_registerMenuCommand('Settings', opencfg);
  297.  
  298. const defaults = {
  299.   downloadService: 'auto',
  300.   quality: 'max',
  301.   vCodec: 'vp9',
  302.   aFormat: 'mp3',
  303.   filenamePattern: 'pretty',
  304.   buttonDownloadInfo: 'onchange',
  305.   isAudioMuted: false,
  306.   disableMetadata: false,
  307.   redirectShorts: false,
  308.   backupService: 'y2mate',
  309.   subscribeButton: true,
  310. };
  311.  
  312. let frame = document.createElement('div');
  313. document.body.appendChild(frame);
  314.  
  315. let gmc = new GM_config({
  316.   id: 'YDD_config',
  317.   title: 'YouTube Direct Downloader (YDD) - Settings',
  318.   css: gmcCSS,
  319.   frame: frame,
  320.   fields: {
  321.     subscribeButton: {
  322.       section: ['Position of download button'],
  323.       label: 'Show download button next to subscribe button:',
  324.       labelPos: 'left',
  325.       type: 'checkbox',
  326.       default: defaults.subscribeButton,
  327.     },
  328.     downloadService: {
  329.       section: ['Download method'],
  330.       label: 'Service:',
  331.       labelPos: 'left',
  332.       type: 'select',
  333.       default: defaults.downloadService,
  334.       options: ['auto', 'cobalt', 'y2mate', 'yt1s'],
  335.     },
  336.     quality: {
  337.       section: ['Cobalt-only settings'],
  338.       label: 'Quality:',
  339.       labelPos: 'left',
  340.       type: 'select',
  341.       default: defaults.quality,
  342.       options: ['max', '2160', '1440', '1080', '720', '480', '360', '240', '144'],
  343.     },
  344.     vCodec: {
  345.       label: 'Video codec:',
  346.       labelPos: 'left',
  347.       type: 'select',
  348.       default: defaults.vCodec,
  349.       options: ['h264', 'vp9', 'av1'],
  350.     },
  351.     aFormat: {
  352.       label: 'Audio format:',
  353.       type: 'select',
  354.       default: defaults.aFormat,
  355.       options: ['best', 'mp3', 'ogg', 'wav', 'opus'],
  356.     },
  357.     isAudioMuted: {
  358.       label: 'Download videos without audio:',
  359.       type: 'checkbox',
  360.       default: defaults.isAudioMuted,
  361.     },
  362.     disableMetadata: {
  363.       label: 'Download videos without metadata:',
  364.       type: 'checkbox',
  365.       default: defaults.disableMetadata,
  366.     },
  367.     filenamePattern: {
  368.       label: 'Filename pattern:',
  369.       type: 'select',
  370.       default: defaults.filenamePattern,
  371.       options: ['classic', 'pretty', 'basic', 'nerdy'],
  372.     },
  373.     buttonDownloadInfo: {
  374.       label: 'Show quality info below button:',
  375.       type: 'select',
  376.       default: defaults.buttonDownloadInfo,
  377.       options: ['always', 'onchange', 'never'],
  378.     },
  379.     backupService: {
  380.       label: 'Backup service:',
  381.       type: 'select',
  382.       default: defaults.backupService,
  383.       options: ['y2mate', 'yt1s', 'none'],
  384.     },
  385.     redirectShorts: {
  386.       section: ['Extra features'],
  387.       label: 'Redirect shorts:',
  388.       labelPos: 'left',
  389.       type: 'checkbox',
  390.       default: defaults.redirectShorts,
  391.     },
  392.     url: {
  393.       section: ['Links'],
  394.       label: 'All my userscripts - FawayTT',
  395.       type: 'button',
  396.       click: () => {
  397.         GM_openInTab('https://github.com/FawayTT/userscripts');
  398.       },
  399.     },
  400.     cobaltUrl: {
  401.       label: 'Cobalt github page',
  402.       type: 'button',
  403.       click: () => {
  404.         GM_openInTab('https://github.com/imputnet/cobalt');
  405.       },
  406.     },
  407.   },
  408.   events: {
  409.     save: function () {
  410.       gmc.close();
  411.       deleteButton();
  412.       createButton();
  413.       deleteSubscribeButton();
  414.       createSubscribeButton();
  415.     },
  416.     init: onInit,
  417.   },
  418. });
  419.  
  420. function opencfg() {
  421.   gmc.open();
  422. }
  423.  
  424. let menuOuter;
  425. let menuParent;
  426. let nextSibling;
  427. let oldHref = document.location.href;
  428. let yddAdded = false;
  429.  
  430. function getYouTubeVideoID(url) {
  431.   if (url.includes('shorts')) {
  432.     const regex = /\/shorts\/([^/?]+)/;
  433.     const match = url.match(regex);
  434.     const id = match ? match[1] : null;
  435.     return id;
  436.   }
  437.   const urlParams = new URLSearchParams(new URL(url).search);
  438.   return urlParams.get('v');
  439. }
  440.  
  441. function handleCobaltError(errorMessage, isAudioOnly) {
  442.   const backupService = gmc.get('backupService') || 'y2mate';
  443.   if (gmc.get('downloadService') === 'auto') {
  444.     download(isAudioOnly, 'y2mate');
  445.     return;
  446.   }
  447.   let alertText = 'Cobalt error: ' + (errorMessage || 'Something went wrong! Try again later.');
  448.   if (backupService !== 'none') {
  449.     alertText += '\n\nYou will be redirected to backup provider ' + backupService + '.';
  450.     alert(alertText);
  451.     download(isAudioOnly, backupService);
  452.   } else alert(alertText);
  453. }
  454.  
  455. function download(isAudioOnly, downloadService) {
  456.   if (!downloadService) downloadService = gmc.get('downloadService');
  457.   switch (downloadService) {
  458.     case 'y2mate':
  459.       if (isAudioOnly) window.open(`https://www.y2mate.com/youtube-mp3/${getYouTubeVideoID(document.location.href)}`);
  460.       else window.open(`https://www.y2mate.com/download-youtube/${getYouTubeVideoID(document.location.href)}`);
  461.       break;
  462.     case 'yt1s':
  463.       if (isAudioOnly) window.open(`https://www.yt1s.com/en/youtube-to-mp3?q=${getYouTubeVideoID(document.location.href)}`);
  464.       else window.open(`https://www.yt1s.com/en/youtube-to-mp4?q=${getYouTubeVideoID(document.location.href)}`);
  465.       break;
  466.     default:
  467.       GM_xmlhttpRequest({
  468.         method: 'POST',
  469.         url: 'https://api.cobalt.tools/api/json',
  470.         headers: {
  471.           Accept: 'application/json',
  472.           'Content-Type': 'application/json',
  473.         },
  474.         data: JSON.stringify({
  475.           url: encodeURI(document.location.href),
  476.           vQuality: gmc.get('quality'),
  477.           vCodec: gmc.get('vCodec'),
  478.           aFormat: gmc.get('aFormat'),
  479.           filenamePattern: gmc.get('filenamePattern'),
  480.           isAudioMuted: gmc.get('isAudioMuted'),
  481.           disableMetadata: gmc.get('disableMetadata'),
  482.           isAudioOnly: isAudioOnly,
  483.         }),
  484.         onload: (response) => {
  485.           try {
  486.             const data = JSON.parse(response.responseText);
  487.             if (data.url) window.open(data.url);
  488.             else handleCobaltError(data.text, isAudioOnly);
  489.           } catch (error) {
  490.             handleCobaltError(null, isAudioOnly);
  491.             if (downloadService !== 'auto') console.error(error);
  492.           }
  493.         },
  494.         onerror: function (error) {
  495.           const errorMessage = error.message || error;
  496.           handleCobaltError(errorMessage, isAudioOnly);
  497.         },
  498.         ontimeout: function () {
  499.           const alertText = 'Cobalt is not responding. Please try again later.';
  500.           handleCobaltError(alertText, isAudioOnly);
  501.         },
  502.       });
  503.       break;
  504.   }
  505.   hideMenu();
  506. }
  507.  
  508. function addButtonDownloadInfo(serviceName, div) {
  509.   if (serviceName === 'cobalt') {
  510.     const option = gmc.get('buttonDownloadInfo');
  511.     if (option === 'never') return;
  512.     const quality = gmc.get('quality') || defaults.quality;
  513.     const vCodec = gmc.get('vCodec') || defaults.vCodec;
  514.     if (option === 'onchange' && quality === defaults.quality && vCodec === defaults.vCodec) return;
  515.     const qualityText = `${quality}, ${vCodec}`;
  516.     const downloadInfo = document.createElement('ydd-item-button-info');
  517.     downloadInfo.style.cssText = `
  518.                 position: absolute;
  519.                 left: 0;
  520.                 bottom: -10px;
  521.                 font-size: 0.8rem;
  522.                 color: var(--yt-spec-text-primary);
  523.                 opacity: 0.6;`;
  524.     downloadInfo.innerText = qualityText;
  525.     div.appendChild(downloadInfo);
  526.   }
  527. }
  528.  
  529. function deleteButton() {
  530.   const buttons = document.getElementsByTagName('ydd-item');
  531.   if (buttons.length === 0) return;
  532.   const button = buttons[0];
  533.   button.remove();
  534. }
  535.  
  536. function hideMenu() {
  537.   const menu = document.getElementsByTagName('ytd-menu-popup-renderer')[0];
  538.   if (!menu) return;
  539.   menuOuter = menu.parentElement.parentElement;
  540.   if (!menuOuter) return;
  541.   menuParent = menuOuter.parentNode;
  542.   nextSibling = menuOuter.nextSibling;
  543.   menuOuter.remove();
  544. }
  545.  
  546. function addMenu() {
  547.   if (menuOuter && menuParent) {
  548.     if (nextSibling) {
  549.       menuParent.insertBefore(menuOuter, nextSibling); // Re-insert before the next sibling if it exists
  550.     } else {
  551.       menuParent.appendChild(menuOuter); // Append if it's the last child
  552.     }
  553.     menuOuter.style.display = 'none';
  554.   }
  555. }
  556.  
  557. const addStyles = () => {
  558.   const style = document.createElement('style');
  559.   style.type = 'text/css';
  560.   style.innerHTML = yddCSS;
  561.   document.head.appendChild(style);
  562. };
  563.  
  564. function createButton() {
  565.   addMenu();
  566.   if (document.getElementsByTagName('ydd-item').length !== 0) return;
  567.   const serviceName = gmc.get('downloadService') || defaults.downloadService;
  568.   const menu = document.getElementsByTagName('ytd-menu-popup-renderer')[0];
  569.   const item = document.createElement('ydd-item');
  570.   const icon = document.createElement('ydd-item-icon');
  571.   const text = document.createElement('ydd-item-text');
  572.   const button = document.createElement('ydd-item-button');
  573.   const sidebar = document.createElement('ydd-item-sidebar');
  574.   const settings = document.createElement('ydd-item-settings');
  575.   const audioButton = document.createElement('ydd-item-audio-download');
  576.   text.innerText = serviceName === 'auto' ? 'YDD' : serviceName;
  577.   icon.innerText = '⇩';
  578.   settings.innerText = '☰';
  579.   audioButton.innerText = '▶';
  580.   addButtonDownloadInfo(serviceName, text);
  581.   audioButton.title = `Download audio only`;
  582.   settings.title = 'Settings';
  583.   item.appendChild(icon);
  584.   item.appendChild(text);
  585.   item.appendChild(button);
  586.   item.appendChild(sidebar);
  587.   sidebar.appendChild(settings);
  588.   sidebar.appendChild(audioButton);
  589.  
  590.   button.addEventListener('click', () => {
  591.     download();
  592.   });
  593.  
  594.   audioButton.addEventListener('click', () => {
  595.     download(true);
  596.   });
  597.  
  598.   settings.addEventListener('click', opencfg);
  599.  
  600.   menu.insertBefore(item, menu.firstChild);
  601. }
  602.  
  603. function deleteSubscribeButton() {
  604.   const button = document.getElementById('ydd-button-sub');
  605.   if (!button) return;
  606.   button.remove();
  607. }
  608.  
  609. function createSubscribeButton() {
  610.   if (!gmc.get('subscribeButton')) return;
  611.   const ownerBar = document.getElementById('owner');
  612.   if (!ownerBar || document.getElementById('ydd-button-sub')) return;
  613.   const button = document.createElement('button');
  614.   button.id = 'ydd-button-sub';
  615.   ownerBar.appendChild(button);
  616.   let downloadService = gmc.get('downloadService') || defaults.downloadService;
  617.   if (downloadService === 'auto') {
  618.     button.title = 'Download with YDD';
  619.   } else button.title = 'Download via ' + downloadService;
  620.   button.innerText = '⇩';
  621.   button.addEventListener('click', () => {
  622.     download();
  623.   });
  624. }
  625.  
  626. function checkShort() {
  627.   if (document.location.href.indexOf('youtube.com/shorts') > -1) {
  628.     if (gmc.get('redirectShorts')) window.location.replace(window.location.toString().replace('/shorts/', '/watch?v='));
  629.     return true;
  630.   } else return false;
  631. }
  632.  
  633. function modifyMenu() {
  634.   const short = checkShort();
  635.   if (document.location.href.indexOf('youtube.com/watch') === -1 && !short) {
  636.     yddAdded = true;
  637.     return;
  638.   }
  639.   addMenu();
  640.   menuOuter = null;
  641.   menuParent = null;
  642.   nextSibling = null;
  643.   if (short) {
  644.     const menuBtn = document.getElementById('menu-button');
  645.     if (!menuBtn) return;
  646.     yddAdded = true;
  647.     menuBtn.addEventListener('click', createButton);
  648.     return;
  649.   }
  650.   const topRow = document.getElementById('top-row');
  651.   const menuBtn = topRow.querySelector('#button-shape');
  652.   createSubscribeButton();
  653.   if (!topRow || !menuBtn) return;
  654.   yddAdded = true;
  655.   menuBtn.addEventListener('click', createButton);
  656. }
  657.  
  658. function onInit() {
  659.   addStyles();
  660.   const observer = new MutationObserver(function () {
  661.     if (!yddAdded) return modifyMenu();
  662.     if (oldHref != document.location.href) {
  663.       oldHref = document.location.href;
  664.       yddAdded = false;
  665.     }
  666.   });
  667.   observer.observe(document.body, {
  668.     childList: true,
  669.     subtree: true,
  670.   });
  671. }