Twitter Image Download

twitter-image-download.user.js

// ==UserScript==
// @name         Twitter Image Download
// @version      1.2
// @match        https://pbs.twimg.com/media/*
// @match        https://twitter.com/*
// @grant        none
// @author       Oleg Koval
// @noframes
// @namespace    twitter
// ==/UserScript==

if (window.location.host === 'pbs.twimg.com') {
    let imageUrl = '';
    if (window.location.href.includes(':large')) {
        imageUrl = window.location.href.replace(':large', ':orig');
    } else if (!window.location.href.includes(':orig')) {
        imageUrl = window.location.href + ':orig';
    }

    let img = document.getElementsByTagName('img')[0];

    let dl = document.createElement('a');
    let filename = imageUrl.replace('https://pbs.twimg.com/media/', '').replace(':orig', '');
    dl.href = imageUrl;
    dl.setAttribute('download', filename);
    dl.setAttribute('style', 'position: absolute; top: 16px; left: 16px; padding: 12px 12px; background-color: #fff; text-decoration: none; border: 2px solid #222; border-radius: 4px; color: #222; font-size: 18px; line-height: 1.5;');
    dl.innerHTML = `
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="18px" height="18px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
          <g>
              <path d="M256,512l256-256H352V0.001L160,0v256H0L256,512z"/>
          </g>
      </svg>
    `;
    document.body.insertBefore(dl, img);
    document.body.insertBefore(style, dl);
} else {
    let styleTag = document.createElement('style');
    styleTag.innerHTML = `
        .twitter-img-dl { 
            z-index:111; 
            position:absolute;
            top:16px;
            left:16px;
            padding: 12px 10px 10px;
            background-color: #fff;
            text-decoration: none;
            border: 2px solid #222;
            border-radius: 4px;
            color: #222;
            font-size: 18px;
            opacity: 0.6;
        }

        .twitter-img-dl:hover, .twitter-img-dl:active, .twitter-img-dl:focus { 
            opacity: 1;
            color: #222;
            text-decoration: none;
        }
    `;

    document.body.appendChild(styleTag);

    let setButtons = function() {
        let imgs = document.querySelectorAll('.AdaptiveMedia-photoContainer');

        for (const img of imgs) {
            if (img.parentNode.getElementsByClassName('twitter-img-dl').length) {
                continue;
            }

            let imageUrl = img.getAttribute('data-image-url');
            let dl = document.createElement('a');
            dl.href = imageUrl;
            dl.setAttribute('download', imageUrl.substr(imageUrl.lastIndexOf('/') + 1));
            dl.setAttribute('target', '_blank');
            dl.setAttribute('class', 'twitter-img-dl');
            dl.innerHTML =  `
              <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="18px" height="18px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                  <g>
                      <path d="M256,512l256-256H352V0.001L160,0v256H0L256,512z"/>
                  </g>
              </svg>
            `;

            img.parentNode.insertBefore(dl, img);
        }
    }

    let observer = new MutationObserver(function(mutations) {
        setButtons();
    });
    observer.observe(document, {attributes: true, childList: true, characterData: false, subtree: true});
}