tsum-image-downloader.user.js

// ==UserScript==
// @name        Tsum Image Downloader
// @namespace   tsum
// @include     https://www.tsum.ru/*
// @match       *://www.tsum.ru/*
// @version     1.1.1
// @grant       none
// @author      Oleg Koval
// ==/UserScript==

let styleTag = document.createElement('style');
styleTag.innerHTML = `
    .tsum-photo-dl { 
        z-index: 11;
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 10px 7px;
        background-color: #eaeaea;
        text-decoration: none;
        color: #222;
        opacity: 0.6;
    }
    .tsum-photo-dl:hover, .tsum-photo-dl:active, .tsum-photo-dl:focus { 
        opacity: 1;
        color: #222;
        text-decoration: none;
    }
`;
document.body.appendChild(styleTag);

function setButtons() {
    let sliderContainer = document.querySelector('.item__slider-right');
    let existingButton = sliderContainer.querySelector('.tsum-photo-dl');

    let slide = document.querySelector('.item__slider-right .slick-active');
    let imageUrl = slide.querySelector('img').getAttribute('src');

    if (existingButton) {
        if (existingButton.getAttribute('href') !== imageUrl) {
            existingButton.href = imageUrl;
            existingButton.setAttribute('download', imageUrl.substr(imageUrl.lastIndexOf('/') + 1).split('?')[0]);
        }
        return;
    }

    let dl = document.createElement('a');
    dl.href = imageUrl;
    dl.setAttribute('download', imageUrl.substr(imageUrl.lastIndexOf('/') + 1).split('?')[0]);
    dl.setAttribute('target', '_blank');
    dl.setAttribute('class', 'tsum-photo-dl');
    dl.innerHTML =  `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
        </svg>
    `;

    sliderContainer.insertBefore(dl, sliderContainer.firstChild);
}

// slow observer (need for init only)
let documentObserver = new MutationObserver(function (mutations) {
    if (document.querySelector('.slick-active')) {
        startGalleryObserver();
        startHeadObserver();
    }
});
documentObserver.observe(document, {attributes: false, childList: true, characterData: false, subtree: true});

let galleryObserver;
function startGalleryObserver() {
    galleryObserver = new MutationObserver(function (mutations) {
        setButtons();
    });
    galleryObserver.observe(document.querySelector('.item__slider-right'), {attributes: true, childList: true, characterData: false, subtree: true});
    documentObserver.disconnect();
}

// track browsing (i had to do it)
let lastUrl = location.href;
function startHeadObserver() {
    let headObserver = new MutationObserver(function (mutations) {
        if (lastUrl === location.href) {
            return;
        }

        galleryObserver.disconnect();
        startGalleryObserver();
    });
    headObserver.observe(document.querySelector('head'), {attributes: true, childList: true, characterData: true, subtree: true});
}