您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Greasy Fork is available in English.
Extract image URL from specific element and log it to console
当前为
// ==UserScript== // @name 아카라이브 미리보기 이미지, 모두 열기 // @namespace Violentmonkey Scripts // @version 1.0 // @description Extract image URL from specific element and log it to console // @author Your Name // @match https://arca.live/b/* // @grant none // ==/UserScript== // 변수들을 만들어 기본값을 설정합니다. var enableThumbnailImage = true; // 썸네일 클릭 시 원본 이미지 불러오기 var enableOpenAllButton = true; // 모두 열기 버튼 생성 var enableElementProcessing = true; // 미리보기 이미지 생성 var time = 100; // 0.1초 뒤에 이미지 생성 // 썸네일 클릭 시 원본 이미지 불러오기 if (enableThumbnailImage) { (function() { 'use strict'; // 이미지 프리뷰 링크를 찾아서 이벤트 핸들러를 추가합니다. document.querySelectorAll('a.title.preview-image').forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); // 기본 동작 방지 // 이미지의 src 속성을 가져옵니다. var imageUrl = link.querySelector('img').getAttribute('src'); // "&type=list" 부분을 제거합니다. imageUrl = imageUrl.replace(/&type=list/g, ''); // 새로운 URL로 리다이렉션합니다. window.location.href = imageUrl; }); }); })(); } // 요소를 찾기 위한 CSS 선택자 var selector = 'a.vrow.column:not(.notice)'; // 요소들을 모두 가져오기 var elements = document.querySelectorAll(selector); // 모두 열기 버튼 생성 부분 if (enableOpenAllButton) { var newButton = document.createElement('a'); newButton.className = 'btn btn-sm btn-primary float-left'; // btn-danger 대신 btn-primary로 변경 newButton.href = '#'; // #으로 설정하여 페이지 이동을 방지합니다. newButton.innerHTML = '<span class="ion-android-list"></span><span> 모두 열기 </span>'; // 버튼 텍스트 및 아이콘 설정 // 버튼 클릭 시 동작하는 함수 정의 newButton.addEventListener('click', function(event) { event.preventDefault(); // 기본 동작 방지 // 각 요소의 href 속성 값 새 탭에서 열기 elements.forEach(function(element) { var href = element.getAttribute('href'); var classes = element.className.split(' '); // 필터된 클래스를 가지고 있는 요소는 제외 if (href && !classes.includes('filtered') && !classes.includes('filtered-keyword')) { window.open(href, '_blank'); // 새 탭에서 링크 열기 } }); }); // 모두 열기 버튼을 삽입할 위치 찾기 var targetElement = document.querySelector('.form-control.select-list-type'); // 모두 열기 버튼을 삽입할 위치의 앞에 모두 열기 버튼 추가 targetElement.parentNode.insertBefore(newButton, targetElement); } // 0.1초 뒤 실행 setTimeout(function() { // 미리보기 이미지 생성 if (enableElementProcessing) { elements.forEach(function(element) { // vcol col-title 요소 앞에 vcol col-box 요소 생성 var vcolTitle = element.querySelector('.vrow-top .vcol.col-title'); var vcolBox = document.createElement('span'); vcolBox.className = 'vcol col-box'; vcolBox.style.width = '5rem'; vcolBox.style.height = '5rem'; // 이미지를 담는 div 요소 생성 var imageContainer = document.createElement('span'); imageContainer.className = 'image-container'; // 클래스 설정 imageContainer.style.width = '100%'; // 이미지의 너비와 높이와 동일하게 설정 imageContainer.style.height = '100%'; imageContainer.style.overflow = 'hidden'; // 이미지가 넘치지 않도록 설정 // 이미지가 있는지 확인 var imageElement = element.querySelector('.vrow-preview img'); // 이미지가 있는 경우에만 처리 if (imageElement) { // vrow column 요소의 높이를 4rem으로 설정 element.style.height = '5.5rem'; // vcol col-id 요소의 너비를 3rem으로 설정 var vcolId = element.querySelector('.vrow-top .vcol.col-id'); vcolId.style.width = '3rem'; // 이미지의 src 속성을 가져옵니다. var imageUrl = imageElement.getAttribute('src'); // 이미지 요소 생성 및 설정 var image = document.createElement('img'); image.src = imageUrl; image.style.width = '100%'; // 부모 요소인 imageContainer에 꽉 차도록 설정 image.style.height = 'auto'; // 이미지의 비율 유지 // 이미지를 imageContainer에 추가 imageContainer.appendChild(image); // vrow-preview의 width와 height를 150px로 설정 var vrowPreview = element.querySelector('.vrow-preview'); vrowPreview.style.width = '30rem'; vrowPreview.style.height = 'auto'; vrowPreview.style.top = 'auto'; vrowPreview.style.left = '10rem'; vrowPreview.style.display = 'none'; // 이미지에 마우스를 올리면 클래스명 변경 image.addEventListener('mouseenter', function() { imageElement.src = imageUrl.replace('&type=list', ''); vrowPreview.style.display = null; }); // 이미지를 벗어나면 다시 클래스명 변경 image.addEventListener('mouseleave', function() { vrowPreview.style.display = 'none'; }); } else { // 이미지가 없는 경우에는 높이를 4rem으로 설정하지 않음 // vcol col-id 요소의 너비를 3rem으로 설정 var vcolId = element.querySelector('.vrow-top .vcol.col-id'); vcolId.style.width = '3rem'; } // vcol col-box 요소에 이미지를 추가 vcolBox.appendChild(imageContainer); // vcol col-box 요소를 vcol col-title 요소 앞에 삽입 vcolTitle.parentNode.insertBefore(vcolBox, vcolTitle); }); } }, time);