Adds a direct download button and an 'open in new tab' button for content such as (embedded) images and uploaded files.

discord.extrafilebuttons.user.js

// ==UserScript==
// @name        Discord Extra File Button Options
// @version     1
// @description Adds a direct download button and an 'open in new tab' button for (embedded) images.
// @namespace   Violentmonkey Scripts
// @grant       GM_addStyle
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @require     https://gist.github.com/notcammy/a8b37bc2f49a76c30220d80fdd661429/raw/3148bcb32b9f0ce30cc62ee684eb60962051bcfa/jquery.initialize.js
// @match       *://discordapp.com/*
// @match       *://cdn.discordapp.com/*

// @run-at      document-idle
//
// ==/UserScript==

var dark = false;
var width, height, link;
var log_prefix = "[DISCORD_EXTA_BUTTONS] ";

if ((window.location.href.indexOf("cdn.discordapp.com") != -1) && window.location.hash.indexOf("startdownload") != -1) {
    var dl_url = $(document).find("img").eq(0).attr('src');
    var a = $("<a>")
    .attr("href", dl_url)
    .attr("download", dl_url.substring(dl_url.lastIndexOf('/')+1).split("#")[0])
    .appendTo("body");
    a[0].click();
    a.remove();
    setTimeout(function(){ window.close(); }, 100);

}

GM_addStyle(" div#downloadIcon { width: 20px; height: 20px; background-image: url('https://i.imgur.com/LsR4Cpe.png'); background-position: center; background-repeat: no-repeat; } div#newTabIcon { width: 20px; height: 20px; background-image: url('https://i.imgur.com/Q72RgDa.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; }");

$(document).on('click', '#downloadIcon', function() {
    e.preventDefault();
    window.open($(this).parent().attr('href'), '_self');
});

function determineType(object) {
    var type = 999; // 0 = image. 1 = gif. 2 = gifv embed. 3 = video embed

    if ($(object).attr("class").indexOf("hiddenSpoilers-") != -1) {
        type = "IMAGESPOILER";
        return type;
    }
    var image_href = $(object).attr("href") ? $(object).attr("href") : "";
    if(typeof image_href !== "undefined")
    {
        if (((image_href != "") && (image_href.indexOf(".png") != -1) || (image_href.indexOf(".jpg") != -1) || (image_href.indexOf(".jpeg") != -1)) && ($(object).parent().attr("class").indexOf("container") != -1)) {
            type = "IMAGE";
        }
        else if (((image_href != "") && (image_href.indexOf(".png") != -1) || (image_href.indexOf(".jpg") != -1) || (image_href.indexOf(".jpeg") != -1)) && ($(object).parent().attr("class").indexOf("embedInner-") != -1)) {
            type = "IMAGEEMBED";
        }
        else if ((image_href != "") && ((image_href.indexOf(".png") != -1) || (image_href.indexOf(".jpg") != -1) || (image_href.indexOf(".jpeg") != -1)) && ($(object).attr("class").indexOf("embedImage-") != -1)) {
            type = "IMAGELINK";
        }
        else if ((image_href != "") && (image_href.indexOf(".gif") != -1)) {
            type = "GIF";
        }
    }
    else if ($(object).attr("class").indexOf("embedGIFV-") != -1) {
        type = "GIFV";
    }
    else if ($(object).parent().attr("class").indexOf("embedVideo-") == -1 && ($(object).attr("class").indexOf("embedImage-") == -1) && ($(object).find("video").length != -1)) {
        type = "VIDEO";
    }
    else if ($(object).parent().attr("class").indexOf("embedVideo-") != -1 && ($(object).find("video").length != -1)) {
        type = "VIDEOLINK";
    }

    return type;
};

$(document).on("click", "*[class*='spoilerContainer-']", function(){
    link = $(this).find("img").attr("src").split("?width")[0];
    console.log($(this).parent().html());
    height = 20;
    width = $(this).width() - 20;
    if ($(this).width() >= 50 && $(this).height() >= 50) {
        $(this).after('<a href="' + link + '" style="margin-bottom: -20px; bottom: ' + (height) + 'px; left: ' + (width-20) + 'px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>');
        $(this).after('<a href="' + link + '#startdownload" style="margin-bottom: -20px; bottom: ' + height + 'px; left: ' + width + 'px;" id="downloadLink" target="_blank" download><div id="downloadIcon"></div></a>');
    }
});

$("*[class*='imageWrapper-']").initialize(function() {
    var type = determineType($(this));
    var link;
    console.log(log_prefix + "detected post with type '" + type + "'.");
    if (type == "IMAGE") {
        link = $(this).attr('href');
        height = 20;
        width = $(this).width() - 20;
        if ($(this).width() >= 50 && $(this).height() >= 50) {
            $(this).after('<a href="' + link + '" style="margin-bottom: -20px; bottom: ' + (height) + 'px; left: ' + (width-20) + 'px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>');
            $(this).after('<a href="' + link + '#startdownload" style="margin-bottom: -20px; bottom: ' + height + 'px; left: ' + width + 'px;" id="downloadLink" target="_blank" download><div id="downloadIcon"></div></a>');
        }
    }

    if (type == "IMAGESPOILER") {
        console.log(log_prefix + "Can't add buttons for spoilered content just yet, waiting for user interaction first.");
    }

    if (type == "IMAGEEMBED") {
        link = $(this).attr('href');
        height = 20;
        width = 0;
        $(this).after('<a href="' + link + '" style="margin-bottom: -20px; bottom: ' + (height) + 'px; left: ' + (width-20) + 'px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>');
        $(this).after('<a href="' + link + '#startdownload" style="margin-bottom: -20px; bottom: ' + height + 'px; left: ' + width + 'px;" id="downloadLink" target="_blank" download><div id="downloadIcon"></div></a>');
    }

    if (type == "IMAGELINK") {
        link = $(this).attr('href');
        height = 20;
        width = $(this).width();
        $(this).after('<a href="' + link + '" style="bottom: ' + (height+20) + 'px; left: ' + (width-40) + 'px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>');
        $(this).after('<a href="' + link + '#startdownload" style="bottom: ' + height + 'px; left: ' + (width-20) + 'px;" id="downloadLink" target="_blank" download><div id="downloadIcon"></div></a>');
    }

    if (type == "GIF") {
        link = $(this).attr('href');
        height = 20;
        width = $(this).width() - 20;
        if ($(this).width() >= 50 && $(this).height() >= 50) {
            $(this).after('<a href="' + link + '" style="margin-bottom: -20px; bottom: ' + (height) + 'px; left: ' + (width-20) + 'px;" id="downloadLink" target="_blank"><div id="newTabIcon"></div></a>');
            $(this).after('<a href="' + link + '#startdownload" style="margin-bottom: -20px; bottom: ' + height + 'px; left: ' + width + 'px;" id="downloadLink" target="_blank" download><div id="downloadIcon"></div></a>');
        }
    }
});