Adds a styled context menu option to open Instagram profile pictures in new tab
// ==UserScript==
// @name Instagram Profile Picture Opener
// @namespace https://github.com/GooglyBlox
// @version 1.3
// @description Adds a styled context menu option to open Instagram profile pictures in new tab
// @author GooglyBlox
// @match https://www.instagram.com/*
// @match https://www.instagram.com/
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant unsafeWindow
// @run-at document-start
// @inject-into content
// @license MIT
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(`
.ig-custom-context-menu {
position: fixed;
z-index: 999999;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
border: 1px solid rgba(219, 219, 219, 0.2);
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
padding: 8px;
min-width: 240px;
animation: menuFadeIn 0.2s ease-out;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ig-custom-context-menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
color: #262626;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s ease;
gap: 12px;
}
.ig-custom-context-menu-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.ig-custom-context-menu-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
@keyframes menuFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.ig-custom-divider {
height: 1px;
background: rgba(219, 219, 219, 0.8);
margin: 8px 4px;
}
@media (prefers-color-scheme: dark) {
.ig-custom-context-menu {
background: rgba(38, 38, 38, 0.98);
border-color: rgba(38, 38, 38, 0.2);
}
.ig-custom-context-menu-item {
color: #fafafa;
}
.ig-custom-context-menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.ig-custom-divider {
background: rgba(38, 38, 38, 0.8);
}
}
`);
function getHDProfilePicUrl(url) {
return url;
}
const icons = {
openInNew: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>`,
download: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>`
};
function handleContextMenu(event) {
const img = event.target;
if (img.tagName === 'IMG' && (
img.closest('a[href^="/"]') !== null ||
img.closest('[role="button"]') !== null ||
img.closest('article') !== null
)) {
event.stopPropagation();
event.preventDefault();
const existingMenu = document.querySelector('.ig-custom-context-menu');
if (existingMenu) {
document.body.removeChild(existingMenu);
}
const contextMenu = document.createElement('div');
contextMenu.className = 'ig-custom-context-menu';
const rect = event.target.getBoundingClientRect();
const x = event.clientX;
const y = event.clientY;
const menuWidth = 240;
const menuHeight = 120;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const adjustedX = Math.min(x, viewportWidth - menuWidth - 10);
const adjustedY = Math.min(y, viewportHeight - menuHeight - 10);
contextMenu.style.left = `${adjustedX}px`;
contextMenu.style.top = `${adjustedY}px`;
const openInNewTab = document.createElement('div');
openInNewTab.className = 'ig-custom-context-menu-item';
openInNewTab.innerHTML = `${icons.openInNew}Open Profile Picture`;
openInNewTab.addEventListener('click', () => {
const hdUrl = getHDProfilePicUrl(img.src);
window.open(hdUrl, '_blank');
document.body.removeChild(contextMenu);
});
const downloadImage = document.createElement('div');
downloadImage.className = 'ig-custom-context-menu-item';
downloadImage.innerHTML = `${icons.download}Download Profile Picture`;
downloadImage.addEventListener('click', async () => {
const hdUrl = getHDProfilePicUrl(img.src);
const username = img.closest('a')?.getAttribute('href')?.replace(/\//g, '') || 'profile';
try {
const response = await fetch(hdUrl);
const blob = await response.blob();
const blobUrl = window.URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = `${username}_profile_picture.jpg`;
downloadLink.click();
window.URL.revokeObjectURL(blobUrl);
} catch (error) {
console.error('Failed to download image:', error);
}
document.body.removeChild(contextMenu);
});
contextMenu.appendChild(openInNewTab);
contextMenu.appendChild(document.createElement('div')).className = 'ig-custom-divider';
contextMenu.appendChild(downloadImage);
document.body.appendChild(contextMenu);
function removeContextMenu(e) {
if (!contextMenu.contains(e.target)) {
document.body.removeChild(contextMenu);
document.removeEventListener('click', removeContextMenu);
document.removeEventListener('contextmenu', removeContextMenu);
}
}
document.addEventListener('click', removeContextMenu);
document.addEventListener('contextmenu', removeContextMenu);
}
}
function init() {
document.addEventListener('contextmenu', handleContextMenu, true);
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
init();
}
});
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
init();
observer.observe(document.body, {
childList: true,
subtree: true
});
});
} else {
init();
observer.observe(document.body, {
childList: true,
subtree: true
});
}
})();