☰

Instagram: Fix Image Linking

Fix Right Click on Image/Video to Download & User Mentions Button on Instagram browsing as Guest

  1. // ==UserScript==
  2. // @name            Instagram: Fix Image Linking
  3. // @name:de         Instagram: Bildlink beheben
  4. // @version         1.1.4
  5. // @description     Fix Right Click on Image/Video to Download & User Mentions Button on Instagram browsing as Guest
  6. // @description:de  Behebe Rechtsklick aufs Bild/Video zum Herunterladen & User Verlinkungen/Erwähnungen Button auf Instagram beim Browsen als Gast
  7. // @icon            https://static.cdninstagram.com/rsrc.php/y4/r/QaBlI0OZiks.ico
  8. // @author          TalkLounge (https://github.com/TalkLounge)
  9. // @namespace       https://github.com/TalkLounge/instagram-fix-image-linking
  10. // @license         MIT
  11. // @match           https://www.instagram.com/*
  12. // @grant           GM_addStyle
  13. // ==/UserScript==
  14.  
  15. // Test Image with Tags: https://www.instagram.com/jesse_tl_/p/CmlWRARrL07/
  16. // Test Video: https://www.instagram.com/jesse_tl_/reel/CJU6gKvhGf_/
  17. // Test Carousel: https://www.instagram.com/p/CmLDljMhEtY/
  18. (function () {
  19.     'use strict';
  20.  
  21.     // Hide Login Popup & Login Banner
  22.     GM_addStyle(`
  23.     body > div:has(input[type=password]), div:has(a[href^='/accounts']):has(> button) {
  24.         display: none !important;
  25.     }`);
  26.  
  27.     // Only run on posts /p/ or reels /reel/
  28.     if (! /\/p\/|\/reel\//.test(window.location.pathname)) {
  29.         return;
  30.     }
  31.  
  32.     function modifyDOM() {
  33.         const imgs = [...document.querySelectorAll("main div[tabindex] img[style]")].concat([...document.querySelectorAll("main video")]);
  34.  
  35.         let actives = [];
  36.         for (let i = 0; i < imgs.length; i++) {
  37.             if (imgs[i].tagName == "IMG") {
  38.                 // Right click to download image
  39.                 imgs[i].parentNode.parentNode.querySelector("div:nth-child(2)")?.remove();
  40.  
  41.                 // Cursor
  42.                 imgs[i].parentNode.parentNode.parentNode.style.cursor = "default";
  43.  
  44.                 // Disable login popup
  45.                 imgs[i].onclick = () => {
  46.                     event.stopPropagation();
  47.                 }
  48.             } else if (imgs[i].tagName == "VIDEO") {
  49.                 // Right click to download video
  50.                 imgs[i].parentNode.querySelector("div:nth-child(2)")?.remove();
  51.  
  52.                 // Show video controls
  53.                 imgs[i].controls = true;
  54.  
  55.                 // Mute video
  56.                 imgs[i].addEventListener("play", (event) => {
  57.                     event.target.muted = false;
  58.                 });
  59.             }
  60.  
  61.             // Fix user mentions
  62.             actives[i] = false;
  63.  
  64.             if (!imgs[i].parentNode.parentNode.parentNode.querySelector("button svg")) { // Skip when no user mentions
  65.                 continue;
  66.             }
  67.  
  68.             imgs[i].parentNode.parentNode.parentNode.querySelector("button svg").parentNode.parentNode.onclick = () => {
  69.                 const j = i;
  70.                 event.stopPropagation();
  71.  
  72.                 if (!actives[j]) {
  73.                     actives[j] = true;
  74.  
  75.                     imgs[j].parentNode.parentNode.parentNode.querySelectorAll("a").forEach((item) => {
  76.                         item.parentNode.style.opacity = 1;
  77.                         item.parentNode.style.transform = item.parentNode.style.transform.replace(" scale(0)", "");
  78.                         item.parentNode.style.pointerEvents = "inherit"
  79.                     });
  80.                 } else {
  81.                     actives[j] = false;
  82.  
  83.                     imgs[j].parentNode.parentNode.parentNode.querySelectorAll("a").forEach((item) => {
  84.                         item.parentNode.style.opacity = 0;
  85.                     });
  86.                 }
  87.             }
  88.         }
  89.     }
  90.  
  91.     function isBackButton() {
  92.         if (document.querySelectorAll("button:not(ul *)[aria-label]").length <= 1) {
  93.             return;
  94.         }
  95.  
  96.         document.querySelector("button:not(ul *)[aria-label]").onclick = modifyDOM;
  97.     }
  98.  
  99.     function init() {
  100.         if (![...document.querySelectorAll("main div[tabindex] img[style]")].concat([...document.querySelectorAll("main video")]).length) {
  101.             return;
  102.         }
  103.  
  104.         clearInterval(interval);
  105.  
  106.         modifyDOM();
  107.  
  108.         const nextButton = document.querySelector("button:not(ul *)[aria-label]");
  109.         if (nextButton) {
  110.             nextButton.onclick = modifyDOM;
  111.             window.setInterval(isBackButton, 1000);
  112.         }
  113.     }
  114.  
  115.     const interval = window.setInterval(init, 500);
  116. })();