// ==UserScript== // @name Instagram 이미지/비디오 다운로드 버튼 // @name:en Instagram Image/Video Download Button // @namespace web.nextbyte.ai // @version 5.0 // @description 인스타그램 피드의 각 이미지에 다운로드 버튼을 자동으로 추가하고, 포스트 열기 시 팝업에서 다중 이미지 및 비디오 다운로드 지원. 비디오 위에도 다운로드 버튼 추가 // @description:en Automatically adds download buttons to each image in the Instagram feed, and supports downloading multiple images and videos from popups when opening posts. Also adds download buttons over videos. // @author NextByte // @match *://www.instagram.com/* // @grant GM_download // @grant GM_registerMenuCommand // ==/UserScript== (function() { 'use strict'; console.log('Instagram 이미지/비디오 다운로드 버튼 스크립트 로드됨'); // 다운로드 버튼 스타일 const buttonStyle = ` position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; font-weight: 600; z-index: 9999; display: flex; align-items: center; gap: 5px; transition: all 0.2s; backdrop-filter: blur(10px); `; const buttonHoverStyle = ` background: rgba(0, 0, 0, 0.9); transform: scale(1.05); `; // 다운로드 아이콘 SVG const downloadIcon = ` `; // 팝업 스타일 const popupStyle = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); z-index: 10000; max-width: 600px; max-height: 80vh; overflow-y: auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; `; const overlayStyle = ` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; `; const popupImageStyle = ` position: relative; margin-bottom: 15px; border-radius: 8px; overflow: hidden; background: #f0f0f0; `; const popupImageItemStyle = ` width: 100%; max-height: 300px; object-fit: cover; display: block; `; const popupVideoStyle = ` width: 100%; max-height: 300px; display: block; `; const popupButtonStyle = ` position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: white; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 600; z-index: 10001; display: flex; align-items: center; gap: 5px; transition: all 0.2s; backdrop-filter: blur(10px); `; // 이미지 다운로드 함수 function downloadImage(imageUrl, filename) { try { // GM_download를 사용하여 다운로드 if (typeof GM_download !== 'undefined') { GM_download({ url: imageUrl, name: filename, onload: () => console.log('다운로드 완료:', filename), onerror: (error) => { console.error('다운로드 실패:', error); fallbackDownload(imageUrl, filename); } }); } else { fallbackDownload(imageUrl, filename); } } catch (error) { console.error('다운로드 오류:', error); fallbackDownload(imageUrl, filename); } } // 비디오 다운로드 함수 function downloadVideo(videoUrl, filename) { try { // GM_download를 사용하여 다운로드 if (typeof GM_download !== 'undefined') { GM_download({ url: videoUrl, name: filename, onload: () => console.log('비디오 다운로드 완료:', filename), onerror: (error) => { console.error('비디오 다운로드 실패:', error); fallbackDownload(videoUrl, filename); } }); } else { fallbackDownload(videoUrl, filename); } } catch (error) { console.error('비디오 다운로드 오류:', error); fallbackDownload(videoUrl, filename); } } // 대체 다운로드 방법 (fetch + blob) function fallbackDownload(url, filename) { fetch(url) .then(response => response.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = blobUrl; a.download = filename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(blobUrl); document.body.removeChild(a); }) .catch(error => { console.error('대체 다운로드 실패:', error); // 마지막 방법: 새 탭에서 열기 window.open(url, '_blank'); }); } // 파일명 생성 함수 function generateFilename(url, postUrl, index = null, isVideo = false) { const timestamp = new Date().getTime(); const postId = postUrl ? postUrl.split('/p/')[1]?.split('/')[0] : 'unknown'; let extension = 'jpg'; if (isVideo) { extension = 'mp4'; } else { extension = url.includes('.jpg') ? 'jpg' : 'png'; } const indexStr = index !== null ? `_${index}` : ''; return `instagram_${postId}${indexStr}_${timestamp}.${extension}`; } // 다운로드 버튼 생성 함수 function createDownloadButton(imageElement, container) { // 이미 버튼이 있는지 확인 if (container.querySelector('.instagram-download-btn')) { return; } const button = document.createElement('button'); button.className = 'instagram-download-btn'; button.innerHTML = downloadIcon + '다운로드'; button.style.cssText = buttonStyle; // 호버 효과 button.addEventListener('mouseenter', () => { button.style.background = 'rgba(0, 0, 0, 0.9)'; button.style.transform = 'scale(1.05)'; }); button.addEventListener('mouseleave', () => { button.style.background = 'rgba(0, 0, 0, 0.7)'; button.style.transform = 'scale(1)'; }); // 클릭 이벤트 button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const imageUrl = imageElement.src; const postLink = container.closest('a'); const postUrl = postLink ? postLink.href : ''; const filename = generateFilename(imageUrl, postUrl); button.innerHTML = '⏳ 다운로드 중...'; button.disabled = true; downloadImage(imageUrl, filename); setTimeout(() => { button.innerHTML = downloadIcon + '다운로드'; button.disabled = false; }, 2000); }); container.appendChild(button); } // 팝업에서 다중 미디어 다운로드 버튼 생성 function createPopupDownloadButton(mediaUrl, postUrl, index, isVideo = false) { const button = document.createElement('button'); button.innerHTML = downloadIcon + '다운로드'; button.style.cssText = popupButtonStyle; button.addEventListener('mouseenter', () => { button.style.background = 'rgba(0, 0, 0, 0.9)'; button.style.transform = 'scale(1.05)'; }); button.addEventListener('mouseleave', () => { button.style.background = 'rgba(0, 0, 0, 0.7)'; button.style.transform = 'scale(1)'; }); button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const filename = generateFilename(mediaUrl, postUrl, index + 1, isVideo); button.innerHTML = '⏳ 다운로드 중...'; button.disabled = true; if (isVideo) { downloadVideo(mediaUrl, filename); } else { downloadImage(mediaUrl, filename); } setTimeout(() => { button.innerHTML = downloadIcon + '다운로드'; button.disabled = false; }, 2000); }); return button; } // 비디오 URL 추출 함수 - 개선된 버전 function extractVideoUrl(modal) { console.log('비디오 URL 추출 시작'); // video 태그에서 src 추출 const videoElement = modal.querySelector('video'); if (videoElement) { console.log('비디오 요소 찾음'); // video 태그의 src 속성 if (videoElement.src) { console.log('비디오 src 찾음:', videoElement.src); return videoElement.src; } // source 태그에서 src 추출 const sourceElements = videoElement.querySelectorAll('source'); console.log('source 태그 개수:', sourceElements.length); for (let source of sourceElements) { if (source.src) { console.log('source 태그에서 비디오 찾음:', source.src); return source.src; } } // data 속성 확인 if (videoElement.dataset.src) { console.log('data-src에서 비디오 찾음:', videoElement.dataset.src); return videoElement.dataset.src; } } console.log('비디오 URL을 찾을 수 없음'); return null; } // 팝업 생성 함수 function createPopup(items, postUrl) { // 오버레이 생성 const overlay = document.createElement('div'); overlay.style.cssText = overlayStyle; // 팝업 생성 const popup = document.createElement('div'); popup.style.cssText = popupStyle; // 제목 const title = document.createElement('h2'); title.textContent = '포스트 미디어 다운로드'; title.style.cssText = 'margin: 0 0 20px 0; font-size: 18px; font-weight: 600;'; popup.appendChild(title); // 미디어 컨테이너 const mediaContainer = document.createElement('div'); mediaContainer.style.cssText = 'margin-bottom: 20px;'; items.forEach((item, index) => { const mediaWrapper = document.createElement('div'); mediaWrapper.style.cssText = popupImageStyle; if (item.type === 'video') { // 비디오 요소 const video = document.createElement('video'); video.src = item.url; video.style.cssText = popupVideoStyle; video.controls = true; mediaWrapper.appendChild(video); } else { // 이미지 요소 const img = document.createElement('img'); img.src = item.url; img.style.cssText = popupImageItemStyle; mediaWrapper.appendChild(img); } const downloadBtn = createPopupDownloadButton(item.url, postUrl, index, item.type === 'video'); mediaWrapper.appendChild(downloadBtn); mediaContainer.appendChild(mediaWrapper); }); popup.appendChild(mediaContainer); // 닫기 버튼 const closeBtn = document.createElement('button'); closeBtn.textContent = '닫기'; closeBtn.style.cssText = ` width: 100%; padding: 10px; background: #0095f6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.2s; `; closeBtn.addEventListener('mouseenter', () => { closeBtn.style.background = '#0080d0'; }); closeBtn.addEventListener('mouseleave', () => { closeBtn.style.background = '#0095f6'; }); closeBtn.addEventListener('click', () => { overlay.remove(); popup.remove(); }); popup.appendChild(closeBtn); // 오버레이 클릭 시 닫기 overlay.addEventListener('click', () => { overlay.remove(); popup.remove(); }); // 팝업 클릭 시 오버레이 닫기 방지 popup.addEventListener('click', (e) => { e.stopPropagation(); }); document.body.appendChild(overlay); document.body.appendChild(popup); } // 비디오 요소에 다운로드 버튼 추가 function addVideoDownloadButton(videoElement, postUrl) { // 이미 버튼이 있는지 확인 if (videoElement.parentElement.querySelector('.instagram-video-download-btn')) { console.log('비디오 다운로드 버튼이 이미 존재함'); return; } const videoContainer = videoElement.parentElement; if (getComputedStyle(videoContainer).position === 'static') { videoContainer.style.position = 'relative'; } const button = document.createElement('button'); button.className = 'instagram-video-download-btn'; button.innerHTML = downloadIcon + '다운로드'; button.style.cssText = buttonStyle; // 호버 효과 button.addEventListener('mouseenter', () => { button.style.background = 'rgba(0, 0, 0, 0.9)'; button.style.transform = 'scale(1.05)'; }); button.addEventListener('mouseleave', () => { button.style.background = 'rgba(0, 0, 0, 0.7)'; button.style.transform = 'scale(1)'; }); // 클릭 이벤트 button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const videoUrl = extractVideoUrl(videoElement.parentElement); if (!videoUrl) { console.error('비디오 URL을 찾을 수 없습니다.'); alert('비디오 URL을 찾을 수 없습니다.'); return; } const filename = generateFilename(videoUrl, postUrl, null, true); button.innerHTML = '⏳ 다운로드 중...'; button.disabled = true; console.log('비디오 다운로드 시작:', filename); downloadVideo(videoUrl, filename); setTimeout(() => { button.innerHTML = downloadIcon + '다운로드'; button.disabled = false; }, 2000); }); videoContainer.appendChild(button); console.log('비디오 다운로드 버튼 추가됨'); } // 비디오 여부 확인 함수 function isVideo(element) { // video 태그 확인 if (element.tagName === 'VIDEO') { return true; } // 부모 요소에서 video 태그 확인 const videoParent = element.closest('video'); if (videoParent) { return true; } // aria-label에서 "동영상" 또는 "video" 확인 const ariaLabel = element.getAttribute('aria-label') || ''; if (ariaLabel.includes('동영상') || ariaLabel.includes('video')) { return true; } // 부모 요소의 aria-label 확인 const parent = element.closest('[aria-label]'); if (parent) { const parentLabel = parent.getAttribute('aria-label') || ''; if (parentLabel.includes('동영상') || parentLabel.includes('video')) { return true; } } return false; } // 포스트 팝업 감지 및 처리 function setupPostPopupListener() { document.addEventListener('click', (e) => { // 포스트 링크 클릭 감지 const postLink = e.target.closest('a[href*="/p/"]'); if (!postLink) return; console.log('포스트 링크 클릭 감지:', postLink.href); // 약간의 지연 후 팝업 감지 setTimeout(() => { // 팝업 내의 이미지 찾기 - 여러 선택자 시도 let modal = document.querySelector('[role="dialog"]'); // 대체 선택자들 if (!modal) { modal = document.querySelector('div[role="presentation"]'); } if (!modal) { modal = document.querySelector('div[style*="position: fixed"]'); } if (!modal) { modal = document.querySelector('div._aaqg'); } if (!modal) { // 더 넓은 범위로 찾기 const allDivs = document.querySelectorAll('div[style*="position: fixed"]'); for (let div of allDivs) { if (div.querySelector('video') || div.querySelector('img[src*="cdninstagram.com"]')) { modal = div; break; } } } if (!modal) { console.log('모달을 찾을 수 없음'); return; } console.log('모달 찾음:', modal); // 팝업 내의 모든 미디어 수집 (이미지 및 비디오) const items = []; const postUrl = postLink.href; // 비디오 감지 const videoElement = modal.querySelector('video'); console.log('비디오 요소 찾음:', videoElement ? '있음' : '없음'); const videoUrl = extractVideoUrl(modal); if (videoUrl) { items.push({ type: 'video', url: videoUrl }); console.log('비디오 감지:', videoUrl); // 비디오 요소에 다운로드 버튼 추가 if (videoElement) { console.log('비디오 요소에 다운로드 버튼 추가 시도'); addVideoDownloadButton(videoElement, postUrl); } else { console.log('비디오 요소를 찾을 수 없어 버튼 추가 불가'); } } else { console.log('비디오 URL을 추출할 수 없음'); } // 이미지 수집 const allImages = modal.querySelectorAll('img[src*="cdninstagram.com"]'); allImages.forEach(img => { // 프로필 사진 제외 if (img.src.includes('s150x150') || img.src.includes('s100x100')) { return; } // 비디오 커버 이미지 제외 (비디오가 있으면 첫 이미지는 커버) if (videoUrl && items.length > 0 && items[0].type === 'video') { // 비디오가 있으면 이미지는 추가하지 않음 return; } // 중복 제거 const isDuplicate = items.some(item => item.type === 'image' && item.url === img.src); if (!isDuplicate) { items.push({ type: 'image', url: img.src }); } }); // 다중 미디어인 경우 팝업 생성 if (items.length > 1) { console.log(`다중 미디어 감지: ${items.length}개`); createPopup(items, postUrl); } }, 500); }, true); } // 피드 이미지 감지 및 버튼 추가 function addDownloadButtons() { // 프로필 페이지의 그리드 이미지 (포스트 링크 내의 이미지) const gridImages = document.querySelectorAll('a[href*="/p/"] img[src*="cdninstagram.com"]'); gridImages.forEach(img => { // 프로필 사진은 제외 (150x150 크기) if (img.src.includes('s150x150')) { return; } const container = img.closest('a'); if (container && !container.querySelector('.instagram-download-btn')) { // 컨테이너를 relative로 설정 if (getComputedStyle(container).position === 'static') { container.style.position = 'relative'; } createDownloadButton(img, container); } }); // 피드의 큰 이미지 (홈 피드, 포스트 상세) - article 태그가 있는 경우 const feedImages = document.querySelectorAll('article img[src*="cdninstagram.com"]'); feedImages.forEach(img => { // 프로필 사진은 제외 if (img.src.includes('s150x150') || img.src.includes('s100x100')) { return; } const article = img.closest('article'); if (article) { const imageContainer = img.parentElement; if (imageContainer && !imageContainer.querySelector('.instagram-download-btn')) { if (getComputedStyle(imageContainer).position === 'static') { imageContainer.style.position = 'relative'; } createDownloadButton(img, imageContainer); } } }); // 모든 포스트 이미지 (더 넓은 범위) const allPostImages = document.querySelectorAll('img[src*="cdninstagram.com"][src*="t51"]'); allPostImages.forEach(img => { // 프로필 사진과 작은 썸네일 제외 if (img.src.includes('s150x150') || img.src.includes('s100x100') || img.src.includes('t51.2885-19')) { return; } // 이미 버튼이 있는지 확인 const parent = img.parentElement; if (parent && !parent.querySelector('.instagram-download-btn')) { if (getComputedStyle(parent).position === 'static') { parent.style.position = 'relative'; } createDownloadButton(img, parent); } }); } // MutationObserver로 동적 콘텐츠 감지 const observer = new MutationObserver((mutations) => { let shouldUpdate = false; mutations.forEach(mutation => { if (mutation.addedNodes.length > 0) { mutation.addedNodes.forEach(node => { if (node.nodeType === 1) { // Element node if (node.tagName === 'IMG' || node.querySelector('img')) { shouldUpdate = true; } } }); } }); if (shouldUpdate) { setTimeout(addDownloadButtons, 500); } }); // 페이지 로드 시 초기화 function init() { console.log('Instagram 다운로드 버튼 초기화 중...'); // 초기 버튼 추가 addDownloadButtons(); // 포스트 팝업 리스너 설정 setupPostPopupListener(); // 주기적으로 버튼 추가 (스크롤 시 새 이미지 로드 대응) setInterval(addDownloadButtons, 2000); // MutationObserver 시작 observer.observe(document.body, { childList: true, subtree: true }); console.log('Instagram 다운로드 버튼 활성화됨'); } // 페이지 로드 완료 후 실행 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // 메뉴 명령 등록 GM_registerMenuCommand('다운로드 버튼 새로고침', () => { addDownloadButtons(); alert('다운로드 버튼이 새로고침되었습니다!'); }); })();