Skip to content

Instantly share code, notes, and snippets.

@ArnoldsK
Last active December 20, 2020 00:09
Show Gist options
  • Save ArnoldsK/21094554c237caf86845898e5711980d to your computer and use it in GitHub Desktop.
Save ArnoldsK/21094554c237caf86845898e5711980d to your computer and use it in GitHub Desktop.
Display all Instagram image sizes
// ==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)
})
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment