Extract image URL from specific element and log it to console
目前为
// ==UserScript==
// @name 아카라이브 미리보기 이미지, 모두 열기
// @namespace Violentmonkey Scripts
// @version 1.02
// @description Extract image URL from specific element and log it to console
// @author Your Name
// @match https://arca.live/b/*
// @grant none
// ==/UserScript==
// 설정 변수
var config = {
openAllButton: true, // 모두 열기 버튼 생성
thumbnail: true, // 미리보기 이미지 생성
thumbnailHover: true, // 미리보기 이미지 마우스 오버시 보이게
originalThumbnail: true, // 개념글 썸네일 클릭 시 원본 이미지 불러오기
thumbnailHoverBest: true, // 개념글 미리보기 이미지 마우스 오버시 보이게
delay: 200 // 이미지 생성 딜레이 (0.2초)
};
// 모두 열기 버튼 생성
if (config.openAllButton) {
var openAllButton = document.createElement('a');
openAllButton.className = 'btn btn-sm btn-primary float-left';
openAllButton.href = '#';
openAllButton.innerHTML = '<span class="ion-android-list"></span><span> 모두 열기 </span>';
openAllButton.addEventListener('click', function(event) {
event.preventDefault();
document.querySelectorAll('a.vrow.column:not(.notice)').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(openAllButton, targetElement);
}
// 미리보기 이미지 생성
if (config.thumbnail) {
setTimeout(function() {
document.querySelectorAll('a.vrow.column:not(.notice)').forEach(function(element) {
var vcolId = element.querySelector('.vrow-top .vcol.col-id');
var vcolTitle = element.querySelector('.vrow-top .vcol.col-title');
vcolId.style.width = '3rem';
var vcolThumb = document.createElement('span');
vcolThumb.className = 'vcol col-thumb';
vcolThumb.style.width = '5rem';
vcolTitle.parentNode.insertBefore(vcolThumb, vcolTitle);
var vrowPreview = element.querySelector('.vrow-preview');
if (vrowPreview) {
element.style.height = 'auto';
element.style.paddingTop = '3px';
element.style.paddingBottom = '3px';
var imageElement = vrowPreview.querySelector('img');
var imageUrl = imageElement.getAttribute('src');
var image = document.createElement('img');
image.src = imageUrl;
image.style.width = '5rem';
image.style.height = '5rem';
vcolThumb.appendChild(image);
vrowPreview.style.width = '30rem';
vrowPreview.style.height = 'auto';
vrowPreview.style.top = 'auto';
vrowPreview.style.left = '10rem';
vrowPreview.style.display = 'none';
if (config.thumbnailHover) {
image.addEventListener('mouseenter', function() {
imageElement.src = imageUrl.replace('&type=list', '');
vrowPreview.style.display = null;
});
image.addEventListener('mouseleave', function() {
vrowPreview.style.display = 'none';
});
}
}
});
}, config.delay);
}
// 썸네일 클릭 시 원본 이미지 불러오기
if (config.originalThumbnail) {
document.querySelectorAll('a.title.preview-image').forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); // 기본 동작 방지
var imageUrl = link.querySelector('img').getAttribute('src').replace(/&type=list/g, '');
window.location.href = imageUrl;
});
});
}
// 개념글 미리보기 이미지 마우스 오버시 보이게
if (config.thumbnailHoverBest) {
// 이미지 요소 선택
var imageElements = document.querySelectorAll('.vrow.hybrid .title.preview-image .vrow-preview img');
// 각 이미지 요소에 이벤트 추가
imageElements.forEach(function(imageElement) {
// 이미지에 호버 이벤트 추가
imageElement.addEventListener('mouseenter', function() {
// 이미지의 부모 요소 찾기
var parentDiv = imageElement.closest('.vrow.hybrid');
// 이미지 URL에서 &type=list 부분 제거
var imageUrl = imageElement.src.replace('&type=list', '');
// 복제된 이미지 요소 생성
var duplicateImageElement = document.createElement('img');
duplicateImageElement.src = imageUrl;
// 복제된 이미지의 스타일 설정
duplicateImageElement.style.position = 'absolute';
duplicateImageElement.style.width = '30rem';
duplicateImageElement.style.height = 'auto';
duplicateImageElement.style.top = 'auto';
duplicateImageElement.style.left = '7.5rem'; // 오른쪽으로 10rem 이동
duplicateImageElement.style.zIndex = '1';
duplicateImageElement.style.padding = '5px';
duplicateImageElement.style.border = '1px solid';
duplicateImageElement.style.borderRadius = '5px';
duplicateImageElement.style.boxSizing = 'content-box';
duplicateImageElement.style.backgroundColor = '#fff'; // 배경색
duplicateImageElement.style.borderColor = '#bbb'; // 테두리 색상
// vrow hybrid 클래스에 align-items: center; 스타일 추가
parentDiv.classList.add('hybrid');
parentDiv.style.alignItems = 'center'; // 수직 가운데 정렬
// 복제된 이미지 요소를 기존 이미지 요소 다음에 추가
parentDiv.appendChild(duplicateImageElement);
// 마우스를 이미지에서 떼었을 때 복제된 이미지 제거
imageElement.addEventListener('mouseleave', function() {
duplicateImageElement.remove();
});
});
});
}