Add tumblr share for photos on the right bottom of twitter page

add-tumblr-share-on-twitter.js

// ==UserScript==
// @name         twitter-tumblr-share
// @namespace    http://k-ui.jp/
// @version      0.1
// @description  shows how to use babel compiler
// @author       Keiichiro Ui
// @match       https://twitter.com/*
// ==/UserScript==

const targetSelector = "#permalink-overlay [data-element-context='platform_photo_card'] img";

function main() {
    const a = document.createElement("a");
    a.target="_blank";
    a.textContent = "tumblr";
    Object.assign(a.style, {
        position: "fixed",
        right: "0",
        bottom: "0",
        backgroundColor: "#36465d",
        color: "white",
        zIndex: "200000",
        padding: "4px",
        fontSize: "18px",
        margin: "0px",
    });
    onImgsChanged((imgs) => {
        console.log("imgs: ", imgs);
        if (imgs.length === 0) {
            if (document.body.contains(a)) document.body.removeChild(a);
            return;
        }
        const url = document.querySelector("link[rel=canonical]").href;
        const q = {
            posttype: "photo",
            url: encodeURIComponent(url),
            content: imgs.map(encodeURIComponent).join(","),
            caption: encodeURIComponent(`<a href="${url}">${document.title}</a>`),
        };
        a.href = `https://www.tumblr.com/widgets/share/tool?${Object.entries(q).map(e => e.join("=")).join("&")}`;
        document.body.appendChild(a);
    });
}

function onImgsChanged(callback) {
    let images = [];
    (function f() {
        const newImages = Array.from(document.querySelectorAll(targetSelector)).map(i => i.src + ":orig");
        if (!isEqualArray(images, newImages)) callback(newImages);
        images = newImages;
        requestAnimationFrame(f);
    })();
}

function isEqualArray(a, b) {
    if (a.length !== b.length) return false;
    return !a.some((e, i) => e !== b[i]);
}

main();