Display all Instagram image sizes

instagram-media.user.js

// ==UserScript==
// @name         Instagram media
// @namespace    https://arnoldsk.lv/
// @version      0.1
// @description  small images? cringe
// @author       ArnoldsK
// @match        https://www.instagram.com/*
// @grant        none
// ==/UserScript==

;(() => {
  const addLinksEl = (targetEl, items) => {
    if (targetEl.querySelector('.img-links')) return

    const linksEl = document.createElement('div')

    linksEl.classList.add('img-links')
    linksEl.style.cssText = `
      z-index: 99999;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: right;
      font-size: 10px;
      line-height: 10px;
    `
    linksEl.innerHTML = items
      .map(({ src, size }) => {
        const anchorEl = document.createElement('a')

        anchorEl.href = src
        anchorEl.target = '_blank'
        anchorEl.style.cssText = `
          background: rgba(0, 0, 0, 0.3);
          color: #f6f6f6;
          padding: 2px 4px;
          margin: 4px 2px;
        `
        anchorEl.innerText = size

        return anchorEl.outerHTML
      })
      .join('')

    targetEl.appendChild(linksEl)
  }

  window.addEventListener('mouseover', (e) => {
    const imgEl = e.target.parentNode.querySelector('img')

    if (!imgEl || !imgEl.srcset) return

    const variants = imgEl.srcset.split(',')
    const items = []

    for (const variant of variants) {
      const [src, size] = variant.split(' ')

      items.push({ src, size })
    }

    addLinksEl(imgEl.parentNode, items)
  })
})()