Discord Userscript: Adds a direct download button and an 'open in new tab' button for content such as (embedded) images and uploaded files. (Discord Extra File Button Options v2)

discord.extrafilebuttons.user.js

// ==UserScript==
// @name        Discord Extra File Button Options v2
// @description Adds a direct download button and an 'open in new tab' button for content such as (embedded) images and uploaded files.
// @namespace   Violentmonkey Scripts
// @grant       GM_addStyle
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @match       *://discordapp.com/*
// 
// ==/UserScript==

GM_addStyle(" div#downloadIcon { width: 20px; height: 20px; background-image: url('https://millie.me/data/download.png'); background-position: center; background-repeat: no-repeat; } div#newTabIcon { width: 20px; height: 20px; background-image: url('https://millie.me/data/tabs.png'); background-position: center; background-repeat: no-repeat; } #downloadLink {  z-index: 999; opacity: 0.6; margin: 0; position: relative;  bottom: 0; float: right; text-decoration: none; background-color: #424549; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); padding: 0px; border-radius: 0px; width: 20px; height: 20px; line-height: 17px; font-size: 10px; color: #fff; font-weight: normal; text-align: center; transition: all 0.2s ease-in-out; } #downloadLink:hover { opacity: 1; text-decoration: none; background-color: #7289da; color: #fff; transition: all 0.4s ease-in-out; }");

(function($) {
    "use strict";

    $.fn.autoButton = function() {

        $("div[class^=attachment-]").each(
            function() {
                var link, height;
                var image = $(this).find('.image');
                var imgHeight = $(image).height();
                if ($(this).find('#downloadLink').length === 0) {
                    if (imgHeight > 50) {
                        link = $(this).find('a').attr('href');
                        height = $(image).height() - 20;
                        console.log(height + " add");
                        $('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -40px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>').insertBefore($(image));
                        $('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -40px;" id="downloadLink" download><div id="downloadIcon"></div></a>').insertBefore($(image));
                    }
                    else { 
                        $(image).after($('<a id="downloadLink" style="display: none;"></a>'));
                    }
                }

                var video = $(this).find('.metadata');
                if ($(this).find('#downloadLink').length === 0) {
                    link = $(this).find('a').attr('href');
                    height = 0;
                    $(video).after($('<a href="' + link + '" style="margin-top: ' + -20 + 'px; left: 40px; opacity: 1" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>'));
                    $(video).after($('<a href="' + link + '" style="margin-top: ' + -15 + 'px; left: 60px; opacity: 1;" id="downloadLink" download><div id="downloadIcon"></div></a>'));

                }
            }
        );

        $("a[class$='embed-thumbnail-image']").each(
            function() {
                if ($(this).find('#downloadLink').length === 0) {
                    var image = $(this).find('.image').eq(0);
                    var imageHtml = $(image).html();
                    if (imageHtml.indexOf("spinner") === -1) {
                        var link = $(this).attr('href');
                        var height = -20;
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -20px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>'));
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: 0px;" id="downloadLink" download><div id="downloadIcon"></div></a>'));
                    }
                }
            }
        );

        $("a[class$='embed-thumbnail-article']").each(
            function() {
                if ($(this).find('#downloadLink').length === 0) {
                    var image = $(this).find('.image').eq(0);
                    var imageHtml = $(image).html();
                    if (imageHtml.indexOf("spinner") === -1) {
                        var link = $(image).attr('src').split('?')[0];
                        var height = -20;
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -20px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>'));
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: 0px;" id="downloadLink" download><div id="downloadIcon"></div></a>'));
                    }
                }
            }
        );

        $("a[class$='embed-thumbnail-rich']").each(
            function() {
                if ($(this).find('#downloadLink').length === 0) {
                    var image = $(this).find('.image').eq(0);
                    var imageHtml = $(image).html();
                    if (imageHtml.indexOf("spinner") === -1) {
                        var link = $(image).attr('src').split('?')[0];
                        var height = -20;
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -20px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>'));
                        $(image).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: 0px;" id="downloadLink" download><div id="downloadIcon"></div></a>'));
                    }
                }
            }
        );

        $("div[class$='embed-inline'], a[class$='embed-thumbnail-gifv']").each(
            function() {
                if ($(this).find('#downloadLink').length === 0) {
                    var embedMedia = $(this).find('video');
                    var link = $(embedMedia).attr('src');
                    var height = -20;
                    $(embedMedia).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: -20px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>'));
                    $(embedMedia).after($('<a href="' + link + '" style="margin-top: ' + height + 'px; left: 0px;" id="downloadLink" download><div id="downloadIcon"></div></a>'));
                }
            }
        );
        return this;
    };

    // Helper function for finding all elements matching selector affected by a mutation
    var mutationFind = function(mutation, selector) {
        var target = $(mutation.target),
            addedNodes = $(mutation.addedNodes);
        var mutated = target.add(addedNodes).filter(selector);
        var descendants = addedNodes.find(selector);
        var ancestors = target.parents(selector);
        return mutated.add(descendants).add(ancestors);
    };

    // Watch for new embeds in chat messages
    new MutationObserver(function(mutations, observer) {
        mutations.forEach(function(mutation) {
            mutationFind(mutation, ".message").autoButton();
        });
    }).observe(document, {
        childList: true,
        subtree: true
    });
})(jQuery.noConflict(true));