githubのissue/prでクリックすると画像を大きくするやつ

github-lightbox.user.js

// ==UserScript==
// @name         github - lightbox
// @namespace    https://github.com/unarist/
// @version      0.1
// @author       unarist
// @match        https://github.com/*/*/issues/*
// @match        https://github.com/*/*/pull/*
// @grant        none
// @downloadURL  https://gist.github.com/unarist/982dcff096062f53406bf0ab5d470744/raw/github-lightbox.user.js
// @license      MIT License
// @run-at       document-idle
// @noframes
// ==/UserScript==

(function() {

    const tag = (name, props = {}, children = []) => {
        const e = Object.assign(document.createElement(name), props);
        if (typeof props.style === "object") Object.assign(e.style, props.style);
        (children.forEach ? children : [children]).forEach(c => e.appendChild(c));
        return e;
    };

    const action = {
        show: (elem) => Object.assign(elem.style, { display: 'block', opacity: 1 }),
        hide: (elem) => {
            elem.addEventListener('transitionend', () => elem.style.display = 'none', { once: 1 });
            elem.style.opacity = 0;
        }
    };

    const container = tag('div', {
        style: "position:fixed; top:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display:none; z-index: 999; transition: 100ms",
        onclick: e => action.hide(container),
        onkeydown: e => e.keyCode === 27 && action.hide(container)
    }, [
        tag('div', { style: "height:100%; border:1em solid transparent; box-sizing:border-box;" })
    ]);

    document.body.appendChild(container);

    window.addEventListener('click', e => {
        if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
        const img = e.target;
        if (img.tagName === 'IMG' && img.closest('.markdown-body')) {
            // hrefの方を優先した方がいいかも
            const scale = (window.innerWidth < img.naturalWidth || window.innerHeight < img.naturalHeight) ? 'contain' : 'auto';
            container.firstChild.style.background = `url("${img.src}") center/${scale} no-repeat`;
            action.show(container);
            e.preventDefault();
        }
    });
})();