InstaDownload2.js

(function(window){
        
    const mediaRegex = /img|video/gi;
    const linkStyles = {
      display: 'inline-block',
      padding: '5px 10px',
      backgroundColor: '#ffffff',
      color: '#262626',
      fontWeight: '600',
      cursor: 'pointer',
      position: 'fixed',
      top: '0',
      left: '0',
      zIndex: '-1',
      display: 'inline-block',
      visibility: 'hidden',
      opacity: '0',
      borderRadius: '3px',
      border: '1px solid #e6e6e6',
      transition: 'all .2s',
      backfaceVisibility: 'hidden'
    }
    
    const linkHiddenStyles = {
        zIndex: '-1',
        opacity: '0',
        visibility: 'hidden',
        transform: 'translate(0,0)'
    }

    const $mediaLink = document.createElement('a');
          $mediaLink.target = '_blank';
          $mediaLink.textContent = 'Open in new tab';
    
          setStyles($mediaLink, linkStyles);
          $mediaLink.addEventListener('click', hideMediaLink);

    let lastScrollPosY = 0;
    
    document.addEventListener('contextmenu', showMediaLink);
    
    function showMediaLink(event){
        const elements = document.elementsFromPoint(event.clientX, event.clientY);
        const media = elements.find(element=>mediaRegex.test(element.tagName));

        if(media){
            $mediaLink.href = media.getAttribute('src');
            media.parentElement.parentElement.appendChild($mediaLink);
                        
            const linkTempStyles = {
               zIndex: '100000',
               visibility: 'visible',
               opacity: '1',
               top: `${event.clientY - 40}px`,
               left: `${event.clientX - 10}px` 
            }
                                        
            setStyles($mediaLink, linkTempStyles);

            lastScrollPosY = window.scrollY
            document.addEventListener('scroll', onPageScroll);
        }


    }

    function hideMediaLink(){
        document.removeEventListener('scroll', onPageScroll);
        setStyles($mediaLink, linkHiddenStyles);
    }
    
    function onPageScroll(event){
        
        const translateY = lastScrollPosY - window.scrollY;

        setStyles($mediaLink, {
            transform: `translate(0,${translateY}px)`,
        });
        
        if( Math.abs(translateY) > 250){
            hideMediaLink();
        }
    }
    
    function setStyles($element, styles){
        Object.keys(styles).forEach((key, style) => {
            $element.style[key] = String(styles[key]);
        });
    }

})(window);