Extract image URL from specific element and log it to console
目前为
// ==UserScript==
// @name 아카라이브 미리보기 이미지, 모두 열기
// @namespace Violentmonkey Scripts
// @version 1.01
// @description Extract image URL from specific element and log it to console
// @author Your Name
// @match https://arca.live/b/*
// @grant none
// ==/UserScript==
// 변수들을 만들어 기본값을 설정합니다.
var originalThumbnail = true; // 썸네일 클릭 시 원본 이미지 불러오기
var openAllButton = true; // 모두 열기 버튼 생성
var thumbnail = true; // 미리보기 이미지 생성
var thumbnailHover = true; // 미리보기 이미지 마우스 올리면 보이게
var time = 200; // 0.1초 뒤에 이미지 생성
// 썸네일 클릭 시 원본 이미지 불러오기
if (originalThumbnail) {
(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 (openAllButton) {
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);
}
if (thumbnail) {
setTimeout(function() {
// 미리보기 이미지 생성 코드를 여기에 넣으세요.
elements.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';
// vcol col-box 요소를 vcol col-title 요소 앞에 삽입
vcolTitle.parentNode.insertBefore(vcolThumb, vcolTitle);
// vrow-preview 요소를 찾습니다.
var vrowPreview = element.querySelector('.vrow-preview');
// vrow-preview 요소가 있는 경우에만 처리
if (vrowPreview) {
element.style.height = 'auto';
element.style.paddingTop = '3px';
element.style.paddingBottom = '3px';
// 이미지의 src 속성을 가져옵니다.
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';
// vcol col-box 요소에 이미지를 추가
vcolThumb.appendChild(image);
// vrow-preview의 width와 height를 150px로 설정
vrowPreview.style.width = '30rem';
vrowPreview.style.height = 'auto';
vrowPreview.style.top = 'auto';
vrowPreview.style.left = '10rem';
vrowPreview.style.display = 'none';
if (thumbnailHover) {
// 이미지에 마우스를 올리면 클래스명 변경
image.addEventListener('mouseenter', function() {
imageElement.src = imageUrl.replace('&type=list', '');
vrowPreview.style.display = null;
});
// 이미지를 벗어나면 다시 클래스명 변경
image.addEventListener('mouseleave', function() {
vrowPreview.style.display = 'none';
});
}
}
});
}, time); // 100밀리초 = 0.1초
}