imgur-helper.js

// ==UserScript==
// @name         Imgur Helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://imgur.com/a/*
// @match        https://imgur.com
// @match        https://imgur.com/*
// @icon         https://www.google.com/s2/favicons?domain=imgur.com
// @require      https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// ==/UserScript==

'use strict';

function log(message) {
    console.log('IMGUR SCRIPT: ' + message);
}

/**
 * 
 * @param {*} wrapper Wrapper contains img tag
 * @returns New created button
 */
function insertButton(wrapper) {
    log('Adding button for image');
    var image = $(wrapper).find('img')[0];
    var url = image.getAttribute('src');
    var newUrl = url.replace('i.imgur.com', 'imgur.ihainan.me');
    var button = wrapper.querySelector('.PostContentMenu').querySelector('button');
    var new_button = createButton(newUrl, button);
    button.parentNode.insertBefore(new_button, button);
    return new_button;
}

/**
 * 
 * @param {*} url The URL will be copied when the new created button pressed
 * @param {*} button The button next to the new created button
 * @returns  New created button
 */
function createButton(url, button) {
    var new_button = button.cloneNode(true);
    new_button.style.marginRight = '2px';
    new_button.innerHTML = '<span class="Button-label" id="added_button">Copy RPL</span>';
    new_button.addEventListener('click', function () {
        var dummy = document.createElement('textarea');
        document.body.appendChild(dummy);
        dummy.value = url;
        dummy.select();
        document.execCommand('copy');
        document.body.removeChild(dummy);
        alert(url);
    });
    return new_button;
}


function handleImages(uploadPosts) {
    $(uploadPosts).find('.PostContent-imageWrapper').each(function (index, wrapper) {
        if ($(wrapper).find('#added_button').length == 0) {
            log('Handling image ' + index);
            var new_button = insertButton(wrapper);
            var image = $(wrapper).find('img')[0];
            image.addEventListener("DOMAttrModified", function (event) {
                log('image\'s src changed');
                if (event.attrName == "src") {
                    log('Remove existing button');
                    new_button.remove();
                    insertButton(wrapper);
                }
            });
        }
    });
}

function waitForEl(selector, callback) {
    if ($(selector).length) {
        log('found element');
        callback();
    } else {
        setTimeout(function () {
            waitForEl(selector, callback);
        }, 2000);
    }
}

(function () {
    log('Hi');

    var imageCoumt = 0;
    var lastURL = "";

    function printURL() {
        setTimeout(function () {
            if (lastURL != $(location).attr('href')) {
                log('URL changed');
                lastURL = $(location).attr('href');
                imageCoumt = 0;

                waitForEl('.UploadPost-files', function () {
                    var uploadPosts = $('.UploadPost-files')[0];
                    log("$(uploadPosts).find('.PostContent - imageWrapper').length = " + $(uploadPosts).find('.PostContent-imageWrapper').length);
                    handleImages(uploadPosts);
                    $(uploadPosts).bind('DOMSubtreeModified', function (e) {
                        var newCount = $(uploadPosts).find('.PostContent-imageWrapper').length;
                        if (newCount != imageCoumt) {
                            log('newCount = ' + newCount);
                            imageCoumt = newCount;
                            handleImages(uploadPosts);
                        }
                    });
                });
            }
            printURL();
        }, 500);
    };

    printURL();
})();