yLoader | YouTube Downloader & MP3 Converter

Worlds most advanced YouTube Downloader

// ==UserScript==
// @name         yLoader | YouTube Downloader & MP3 Converter
// @namespace    http://yloader.ws/
// @description  Worlds most advanced YouTube Downloader
// @author       yLoader.ws
// @match        https://www.youtube.com/*
// @grant        none
// @license      MIT
// @run-at       document-end
// @version      0.6
// ==/UserScript==

const buttons = ["MP3", "▼"];

const cssText = `

    .dropdown-menu {
        position: absolute;
        top: 40px;
        width: 145px;
        background-color: #e02f2f;
        padding: 0;
        z-index: 9999;
        border-radius: 20px;
    }

	.dropdown-menu-short {
        position: absolute;
        top: 54px;
        width: 145px;
        background-color: #e02f2f;
        padding: 0;
        z-index: 9999;
        border-radius: 20px;
		right: 0px;
    }

    .dropdown-item {
        border: solid #ac0101;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding: 9px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        color: white;
        font-size: var(--ytd-tab-system-font-size, 1.2rem);
        font-weight: var(--ytd-tab-system-font-weight, 500);
        letter-spacing: var(--ytd-tab-system-letter-spacing, .007px);
        text-align: center;
        user-select: none;
		display: flex;
		
    }

	.dropdown-item-icon{
		background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
		width: 14px;
		height: 14px;
		margin-right: 8px;
		margin-top: 1px;
	}

	.dropdown-item-text{
		height: 14px;
		font-weight: bold;
		color: white;
		font-size: 14px;
		margin-top: -1px;
	}

    .dropdown-item-top{
        border-radius: 20px 20px 0px 0px;
        border-width: 2px 2px 1px 2px;
    }

    .dropdown-item-bottom{
        border-radius: 0px 0px 20px 20px;
        border-width: 1px 2px 2px 2px;
    }

	.dropdown-item-top-short{
        border-radius: 20px 20px 0px 0px;
        border-width: 2px 2px 1px 2px;
    }

	.dropdown-item-middle-short{
        border-radius: 0px;
        border-width: 1px 2px 1px 2px;
    }

    .dropdown-item-bottom-short{
        border-radius: 0px 0px 20px 20px;
        border-width: 1px 2px 2px 2px;
    }

    .dropdown-item:hover {
        background-color: #eb4747;
    }

    .download-button {
        border: solid #ac0101;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        display: flex;
        flex-direction: row;
        cursor: pointer;
        background-color: #e02f2f;
        color: white;
        padding: var(--yt-button-padding);
        padding-top: 8px;
        margin: auto var(--ytd-subscribe-button-margin, 0px);
        white-space: nowrap;
        max-height: 36px;
        font-size: var(--ytd-tab-system-font-size, 1.2rem);
        font-weight: var(--ytd-tab-system-font-weight, 500);
        letter-spacing: var(--ytd-tab-system-letter-spacing, .007px);
        text-transform: var(--ytd-tab-system-text-transform, uppercase);
        transition: background-color 0.1s ease-out 20ms;
        user-select: none;
    }
    .left-button{
        border-radius: 20px 0px 0px 20px;
        border-width: 2px 1px 2px 2px;
        padding-right: 14px;
    }
    .right-button{
        border-radius: 0px 20px 20px 0px;
        border-width: 2px 2px 2px 1px;
        padding-right: 10px;
        padding-left: 10px;
		background-position: center;
        background-repeat: no-repeat;
        background-size: 40%;
		height: 36px;
		width: 38px;
    }
    .download-button:hover{
        background-color: #eb4747;
    }
    .download-button-text {
        --yt-formatted-string-deemphasize_-_display: initial;
        --yt-formatted-string-deemphasize-color: var(--yt-spec-text-secondary);
        --yt-formatted-string-deemphasize_-_margin-left: 4px;
		font-weight: bold;
    }
	.download-button-icon {
		background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
		width: 14px;
		height: 14px;
		margin-top: 1px;
	}
    .download-button-container {
        display: flex;
        flex-direction: row;
		position: relative;
    }
    .download-button-container-shorts {
        display: flex;
        flex-direction: column;
		position: relative;
    }
    .download-playlist-button {
        margin-right: 8px;
        margin-left: 0px;
    }
    .download-playlist-button-text {
        color: #E4E4E4;
    }
    .download-button-shorts {
        border: solid #ac0101;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-width: 2px;
        border-radius: 30px;
        height: 48px;
        width: 48px;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
        background-color: #e02f2f;
        color: white;
        white-space: nowrap;
        font-size: 13px;
        font-weight: var(--ytd-tab-system-font-weight, 500);
        letter-spacing: var(--ytd-tab-system-letter-spacing, .007px);
        text-transform: var(--ytd-tab-system-text-transform, uppercase);
        transition: background-color 0.3s ease;
		background-position: center;
        background-repeat: no-repeat;
        background-size: 60%;
    }
    .download-button-shorts:hover{
        background-color: #eb4747;
    }
`;

(function () {

  var rightbtn;

  if (window.location.href.startsWith("https://www.youtube.com")) {
    ("use strict");

    let dropdownVisible = false;
    let dropdownShortsVisible = false;
    let youtubeshorts = false;

    function disableDropdown() {
      document.getElementById("dropdown-menu").remove();
      document.querySelector(".left-button").style.borderRadius =
        "20px 0px 0px 20px";
      document.querySelector(".left-button").style.borderBottomWidth = "2px";
      document.querySelector(".right-button").style.borderRadius =
        "0px 20px 20px 0px";
      document.querySelector(".right-button").style.borderBottomWidth = "2px";
      dropdownVisible = false;

      var iconDownSvg =
        '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#ffffff" class="fill-000000"></path></svg>';
      rightbtn.style.backgroundImage =
        'url("data:image/svg+xml,' + encodeURIComponent(iconDownSvg) + '")';
    }

    function disableShortsDropdown() {
      document.getElementById("dropdown-menu-short").remove();

      dropdownShortsVisible = false;
    }

    function run() {
      setTimeout(function () {
        if (window.location.href.includes("youtube.com/watch")) {
          document.getElementById("downloadshorts").remove();
          youtubeshorts = false;
        }
      }, 1000);
    }

    // playlist pages will try to add the buttons repeatedly
    let playlistButtonsAdded = false;

    function addButtons() {
      setTimeout(() => {
        // apply css
        const style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = cssText;
        document.head.appendChild(style);

        // check for playlist and create appropriate query
        let query = "#analytics-button:not(.download-panel)";

        let inPlaylist = location.href.includes("/playlist");
        if (inPlaylist && !playlistButtonsAdded) {
          query += ", div.metadata-buttons-wrapper:not(.download-panel)";
          playlistButtonsAdded = true;
        }

        if (window.location.toString().includes("youtube.com/shorts/")) {
          // check for youtube shorts
          youtubeshorts = true;
          query = "#actions:not(.download-panel)";
        }

        document.addEventListener("click", function (event) {
          var dropdownMenu = document.getElementById("analytics-button");
          var targetElement = event.target;

          if (
            !dropdownMenu.contains(targetElement) &&
            youtubeshorts === false
          ) {
            disableDropdown();
            dropdownVisible = false;
          }
        });

        document.querySelectorAll(query).forEach((panel) => {
          const container = document.createElement("div");

          if (youtubeshorts) {
            container.classList.add("download-button-container-shorts");
            container.id = "downloadshorts";

            const button = document.createElement("div");
            button.classList.add("download-button-shorts");

            var iconDownloadSvg =
              '<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512"><path d="M383.6 322.7 278.6 423c-5.8 6-13.7 9-22.4 9s-16.5-3-22.4-9L128.4 322.7c-12.5-11.9-12.5-31.3 0-43.2 12.5-11.9 32.7-11.9 45.2 0l50.4 48.2v-217c0-16.9 14.3-30.6 32-30.6s32 13.7 32 30.6v217l50.4-48.2c12.5-11.9 32.7-11.9 45.2 0s12.5 31.2 0 43.2z" fill="#ffffff" class="fill-000000"></path></svg>';

            var iconCloseSvg =
              '<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512"><path d="M437.5 386.6 306.9 256l130.6-130.6c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L256 205.1 125.4 74.5c-14.1-14.1-36.8-14.1-50.9 0-14.1 14.1-14.1 36.8 0 50.9L205.1 256 74.5 386.6c-14.1 14.1-14.1 36.8 0 50.9 14.1 14.1 36.8 14.1 50.9 0L256 306.9l130.6 130.6c14.1 14.1 36.8 14.1 50.9 0 14-14.1 14-36.9 0-50.9z" fill="#ffffff" class="fill-000000"></path></svg>';

            button.style.backgroundImage =
              'url("data:image/svg+xml,' +
              encodeURIComponent(iconDownloadSvg) +
              '")';

            button.addEventListener("click", () => {
              if (dropdownShortsVisible) {
                disableShortsDropdown();
                button.style.backgroundImage =
                  'url("data:image/svg+xml,' +
                  encodeURIComponent(iconDownloadSvg) +
                  '")';

                button.style.backgroundSize = "60%";
              } else {
                button.style.backgroundImage =
                  'url("data:image/svg+xml,' +
                  encodeURIComponent(iconCloseSvg) +
                  '")';

                button.style.backgroundSize = "45%";

                const dropdownMenu = document.createElement("div");
                dropdownMenu.id = "dropdown-menu-short";
                dropdownMenu.classList.add("dropdown-menu-short");

                for (let j = 0; j < 3; j++) {
                  if (j == 0) {
                    const dropdownItem = document.createElement("div");
                    dropdownItem.classList.add("dropdown-item");
                    dropdownItem.classList.add("dropdown-item-top-short");

                    var iconCameraSvg =
                      '<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512"><path d="M115.2 378C87 378 64 400.9 64 429s23 51 51.2 51h37.2c15.3 0 28.9-6.8 38.3-17.4.1-.1.3-.1.4-.2.6-.6 1-1.5 1.5-2.1 1.3-1.6 2.5-3.2 3.5-5 9.5-14.2 14-32.9 14-47.2V207.5c.8-14.2 11.2-25.7 25.1-28.9 1.7-.4 5.4-1.2 5.4-1.2L390.5 149c.7-.1 1.3-.2 2-.3.8-.1 1.5-.1 2.4-.1 12.1 0 21.1 9.5 21.1 21.2v131.4c0 25.5 2.9 31.9-40.5 31.9h-20.1c-28.3 0-51.2 22.9-51.2 51s22.9 51 51.2 51h37.2c18.2 0 34.1-9.4 43.2-23.6 0-.1.1 0 .2 0 9-12.2 11.9-30.6 11.9-55.3V53.4c0-11.7-9.9-21.2-22-21.2-.7 0-1.4.1-2 .1l-3.1.5L203.3 74c-13.8 3.7-26.3 16.9-27.3 31.4v250.5c0 13.9 2 22.2-47.7 22.2h-13.1z" fill="#ffffff" class="fill-000000"></path></svg>';

                    const dropdownItemIcon = document.createElement("div");
                    dropdownItemIcon.classList.add("dropdown-item-icon");
                    dropdownItemIcon.style.backgroundImage =
                      'url("data:image/svg+xml,' +
                      encodeURIComponent(iconCameraSvg) +
                      '")';

                    const dropdownItemText = document.createElement("div");
                    dropdownItemText.classList.add("dropdown-item-text");
                    dropdownItemText.innerHTML = "download MP3";

                    dropdownItem.addEventListener("click", () => {
                      let url = window.location.toString();
                      let videoId = url.split("/").pop();

                      window.open("https://yloader.ws/yturlmp3/" + videoId);

                      disableShortsDropdown();

                      button.style.backgroundImage =
                        'url("data:image/svg+xml,' +
                        encodeURIComponent(iconDownloadSvg) +
                        '")';

                      button.style.backgroundSize = "60%";
                    });

                    dropdownItem.appendChild(dropdownItemIcon);
                    dropdownItem.appendChild(dropdownItemText);
                    dropdownMenu.appendChild(dropdownItem);
                  } else if (j == 1) {
                    const dropdownItem = document.createElement("div");
                    dropdownItem.classList.add("dropdown-item");
                    dropdownItem.classList.add("dropdown-item-middle-short");

                    var iconCameraSvg =
                      '<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h10v10H0V3ZM12 6l3-3h1v10h-1l-3-3V6Z" fill="#ffffff" class="fill-030708"></path></svg>';

                    const dropdownItemIcon = document.createElement("div");
                    dropdownItemIcon.classList.add("dropdown-item-icon");
                    dropdownItemIcon.style.backgroundImage =
                      'url("data:image/svg+xml,' +
                      encodeURIComponent(iconCameraSvg) +
                      '")';

                    const dropdownItemText = document.createElement("div");
                    dropdownItemText.classList.add("dropdown-item-text");
                    dropdownItemText.innerHTML = "download MP4";

                    dropdownItem.addEventListener("click", () => {
                      let url = window.location.toString();
                      let videoId = url.split("/").pop();

                      window.open("https://yloader.ws/yturlmp4/" + videoId);

                      disableShortsDropdown();

                      button.style.backgroundImage =
                        'url("data:image/svg+xml,' +
                        encodeURIComponent(iconDownloadSvg) +
                        '")';

                      button.style.backgroundSize = "60%";
                    });

                    dropdownItem.appendChild(dropdownItemIcon);
                    dropdownItem.appendChild(dropdownItemText);
                    dropdownMenu.appendChild(dropdownItem);
                  } else if (j == 2) {
                    const dropdownItem = document.createElement("div");
                    dropdownItem.classList.add("dropdown-item");
                    dropdownItem.classList.add("dropdown-item-bottom-short");

                    var iconImageSvg =
                      '<svg viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"><path d="M24 6c0-2.2-1.8-4-4-4H4C1.8 2 0 3.8 0 6v12c0 2.2 1.8 4 4 4h16c2.2 0 4-1.8 4-4V6zM6 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm16 12c0 1.1-.9 2-2 2H4.4c-.9 0-1.3-1.1-.7-1.7l3.6-3.6c.4-.4 1-.4 1.4 0l.6.6c.4.4 1 .4 1.4 0l6.6-6.6c.4-.4 1-.4 1.4 0l3 3c.2.2.3.4.3.7V18z" fill="#ffffff" class="fill-000000"></path></svg>';

                    const dropdownItemIcon = document.createElement("div");
                    dropdownItemIcon.classList.add("dropdown-item-icon");
                    dropdownItemIcon.style.backgroundImage =
                      'url("data:image/svg+xml,' +
                      encodeURIComponent(iconImageSvg) +
                      '")';

                    const dropdownItemText = document.createElement("div");
                    dropdownItemText.classList.add("dropdown-item-text");
                    dropdownItemText.innerHTML = "get Thumbnail";

                    dropdownItem.addEventListener("click", () => {
                      let url = window.location.toString();
                      let videoId = url.split("/").pop();

                      window.open(
                        "https://yloader.ws/ytthumbnail/" + videoId
                      );

                      disableShortsDropdown();

                      button.style.backgroundImage =
                        'url("data:image/svg+xml,' +
                        encodeURIComponent(iconDownloadSvg) +
                        '")';

                      button.style.backgroundSize = "60%";
                    });

                    dropdownItem.appendChild(dropdownItemIcon);
                    dropdownItem.appendChild(dropdownItemText);
                    dropdownMenu.appendChild(dropdownItem);
                  }
                }
                container.appendChild(dropdownMenu);
                dropdownShortsVisible = true;
              }
            });

            container.appendChild(button);
          } else {
            container.classList.add("download-button-container");
            for (let i = 0; i < buttons.length; i++) {
              const button = document.createElement("div");

              button.classList.add("download-button");
              if (inPlaylist) {
                button.classList.add("download-playlist-button");
              }

              const buttonText = document.createElement("span");
              buttonText.classList.add("download-button-text");

              if (i === 0) {
                button.id = "leftbtn";
                button.classList.add("left-button");

                buttonText.innerHTML = "MP3";
                button.title = "download MP3 from video";

                button.appendChild(buttonText);

                button.addEventListener("click", () => {
                  var videoId = new URL(window.location.href).searchParams.get(
                    "v"
                  );

                  window.open("https://yloader.ws/yturlmp3/" + videoId);

                  if (dropdownVisible) {
                    disableDropdown();
                  }
                });
              } else if (i === 1) {
                button.classList.add("right-button");
                var iconDownSvg =
                  '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#ffffff" class="fill-000000"></path></svg>';
                var iconUpSvg =
                  '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" fill="#ffffff" class="fill-000000"></path></svg>';

                button.style.backgroundImage =
                  'url("data:image/svg+xml,' +
                  encodeURIComponent(iconDownSvg) +
                  '")';

                button.title = "";

                button.addEventListener("click", () => {
                  if (dropdownVisible) {
                    disableDropdown();
                  } else {
                    
                    button.style.backgroundImage =
                      'url("data:image/svg+xml,' +
                      encodeURIComponent(iconUpSvg) +
                      '")';

                    const dropdownMenu = document.createElement("div");
                    dropdownMenu.id = "dropdown-menu";
                    dropdownMenu.classList.add("dropdown-menu");

                    for (let j = 0; j < buttons.length; j++) {
                      if (j == 0) {
                        const dropdownItem = document.createElement("div");
                        dropdownItem.classList.add("dropdown-item");
                        dropdownItem.classList.add("dropdown-item-top");

                        var iconCameraSvg =
                          '<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h10v10H0V3ZM12 6l3-3h1v10h-1l-3-3V6Z" fill="#ffffff" class="fill-030708"></path></svg>';

                        const dropdownItemIcon = document.createElement("div");
                        dropdownItemIcon.classList.add("dropdown-item-icon");
                        dropdownItemIcon.style.backgroundImage =
                          'url("data:image/svg+xml,' +
                          encodeURIComponent(iconCameraSvg) +
                          '")';

                        const dropdownItemText = document.createElement("div");
                        dropdownItemText.classList.add("dropdown-item-text");
                        dropdownItemText.innerHTML = "download MP4";

                        dropdownItem.addEventListener("click", () => {
                          var videoId = new URL(
                            window.location.href
                          ).searchParams.get("v");

                          window.open(
                            "https://yloader.ws/yturlmp4/" + videoId
                          );

                          disableDropdown();
                        });

                        dropdownItem.appendChild(dropdownItemIcon);
                        dropdownItem.appendChild(dropdownItemText);
                        dropdownMenu.appendChild(dropdownItem);
                      } else if (j == 1) {
                        const dropdownItem = document.createElement("div");
                        dropdownItem.classList.add("dropdown-item");
                        dropdownItem.classList.add("dropdown-item-bottom");

                        var iconImageSvg =
                          '<svg viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"><path d="M24 6c0-2.2-1.8-4-4-4H4C1.8 2 0 3.8 0 6v12c0 2.2 1.8 4 4 4h16c2.2 0 4-1.8 4-4V6zM6 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm16 12c0 1.1-.9 2-2 2H4.4c-.9 0-1.3-1.1-.7-1.7l3.6-3.6c.4-.4 1-.4 1.4 0l.6.6c.4.4 1 .4 1.4 0l6.6-6.6c.4-.4 1-.4 1.4 0l3 3c.2.2.3.4.3.7V18z" fill="#ffffff" class="fill-000000"></path></svg>';

                        const dropdownItemIcon = document.createElement("div");
                        dropdownItemIcon.classList.add("dropdown-item-icon");
                        dropdownItemIcon.style.backgroundImage =
                          'url("data:image/svg+xml,' +
                          encodeURIComponent(iconImageSvg) +
                          '")';

                        const dropdownItemText = document.createElement("div");
                        dropdownItemText.classList.add("dropdown-item-text");
                        dropdownItemText.innerHTML = "get Thumbnail";

                        dropdownItem.addEventListener("click", () => {
                          var videoId = new URL(
                            window.location.href
                          ).searchParams.get("v");
                          window.open(
                            "https://yloader.ws/ytthumbnail/" + videoId
                          );
                          disableDropdown();
                          button.style.backgroundImage =
                            'url("data:image/svg+xml,' +
                            encodeURIComponent(iconDownSvg) +
                            '")';
                        });

                        dropdownItem.appendChild(dropdownItemIcon);
                        dropdownItem.appendChild(dropdownItemText);
                        dropdownMenu.appendChild(dropdownItem);
                      }
                    }
                    container.appendChild(dropdownMenu);
                    dropdownVisible = true;
                  }
                });
              }

              container.appendChild(button);
              rightbtn = button;
            }
          }

          panel.classList.add("download-panel");
          panel.insertBefore(container, panel.firstElementChild);
        });
      }, 200);
    }

    window.onload = function () {
      run();
      addButtons();

      window.addEventListener("yt-navigate-start", run, true);
      window.addEventListener("yt-navigate-start", addButtons);
      window.addEventListener("yt-navigate-finish", addButtons);
    };
  }
})();