Download MP3 & Video for YouTube v2.1 (HD, MP4, 3GP, Others)

This script helps to add a YouTube download button.

As of 2018-01-26. See the latest version.

// ==UserScript==
// @name Download MP3 & Video for YouTube v2.1 (HD, MP4, 3GP, Others)
// @description This script helps to add a YouTube download button.
// @namespace https://greasyfork.org/
// @homepageURL https://greasyfork.org/scripts/34613
// @supportURL https://greasyfork.org/scripts/34613/feedback
// @author Punisher
// @version 2.1
// @date 2018-01-26
// @compatible chrome
// @compatible firefox
// @compatible opera
// @compatible safari
// @license GNU GPL v3.0 or later. http://www.gnu.org/copyleft/gpl.html
// @match *://www.youtube.com/*
// ==/UserScript==

    if(document.getElementById("polymer-app") || document.getElementById("masthead") || window.Polymer){
        setInterval(function(){
            if(window.location.href.indexOf("watch?v=") < 0){
                return false;
            }
            if(document.getElementById("count") && document.getElementById("genyoutube") === null){
                polymerInject();
            }
        }, 100);
    } else {
        setInterval(function(){
            if(window.location.href.indexOf("watch?v=") < 0){
                return false;
            }
            if(document.getElementById("watch7-subscription-container") && document.getElementById("genyoutube") === null){
                htmlInject();
            }
        }, 100);
    }

    function htmlInject(){
        if (document.getElementById("watch7-subscription-container")) {
            var wrap = document.getElementById('watch7-subscription-container');
            var button = "<div id='genyoutube' style='display: inline-block; margin-left: 10px; vertical-align: middle;'>";
            button += "<a href=\"https://y2mate.com/youtube-to-mp3/" + ytvid(document.URL) + "\" title=\"Download\" target=\"_blank\"" +
            "style=\"display: inline-block; font-size: inherit; height: 22px; border: 1px solid rgb(58, 58, 58); border-radius: 3px; padding-left: 28px; cursor: pointer; vertical-align: middle; position: relative; line-height: 22px; text-decoration: none; z-index: 1; color: rgb(255, 255, 255);\">";
            button += "<i style=\"position: absolute; display: inline-block; left: 6px; top: 3px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGlkPSJzdmcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNIDQsMCA0LDggMCw4IDgsMTYgMTYsOCAxMiw4IDEyLDAgNCwwIHoiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+); background-size: 12px; background-repeat: no-repeat; background-position: center center; width: 16px; height: 16px;\"></i>";
            button += "<span style=\"padding-right: 12px;\">Download</span></a></div>";
        
            var style = "<style>#youtube button::-moz-focus-inner{padding:0;margin:0}#genyoutube a{background-color:#3A3A3A}#youtube a:hover{background-color:rgb(58, 58, 58)}#youtube a:active{background-color:rgb(58, 58, 58)}</style>";
        
            var tmp = wrap.innerHTML;
            wrap.innerHTML = tmp + button + style;
        }
    }

    function polymerInject(){
        var buttonDiv = document.createElement("span");
        buttonDiv.style.width = "100%";
        buttonDiv.id = "youtube";

        var targetElement = document.querySelectorAll("[id='count']");
        for(var i = 0; i < targetElement.length; i++){
            if(targetElement[i].className.indexOf("ytd-video-primary-info-renderer") > -1){
                targetElement[i].appendChild(buttonDiv);
            }
        }
    }

    function ytvid(url) {
        var p = /((http|https)\:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig;
        return (url.match(p)) ? RegExp.$3 : false;
    }