[Bookmarklet] YouTubeの動画ページでサムネイルのリンクを表示

javascript:void((d => {const A = ['maxresdefault','hq720','sddefault','hqdefault','mqdefault','default'];let r,s,p,c,i,t,h;r = d.location.href.match(/youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]{11})/);if(!r) return;r = r[1];s = d.getElementById('bml-thumbs-style');if(!s) {s = d.createElement('style');s.id = 'bml-thumbs-style';s.type = 'text/css';d.head.appendChild(s);}s.innerHTML = `#thumbs-container {z-index: 10000;position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;background: rgba(0,0,0,.75);}#thumbs-container > div {display: flex;flex-direction: column;width: 33%;}#thumbs-container > div > span {text-align: center;font-size: 1.6rem;color: white;cursor: default;}#thumbs-container > div > a {margin: auto;}#thumbs-container img {border: 1px solid rgba(255,255,255,.25);}`;p = d.getElementById('thumbs-container');if(!p) {p = d.createElement('div');p.id = 'thumbs-container';p.addEventListener('click', e => {if(e.target.tagName != 'IMG' && e.target.tagName != 'A') {d.getElementById('thumbs-container').remove();}}, false);d.body.appendChild(p);}p.innerHTML = '';A.forEach(name => {h = `https://i.ytimg.com/vi/${r}/${name}.jpg`;c = d.createElement('div');c.innerHTML = `<span>${name}</span><a target="_blank" href="${h}"><img src="" width="360"></a>`;p.appendChild(c);i = c.querySelector('img');i.addEventListener('load', e => {e.target.parentNode.previousSibling.textContent += ` (${e.target.naturalWidth}x${e.target.naturalHeight})`;}, false);i.src = h;});})(document));