Extract image URL from specific element and log it to console
目前为
// ==UserScript==
// @name arcalive
// @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==
// 썸네일 이미지 가져오기
(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;
});
});
})();
// 썸네일 이미지 생성
setTimeout(function() {
// 요소를 찾기 위한 CSS 선택자
var selector = 'a.vrow.column:not(.notice)';
// 요소들을 모두 가져오기
var elements = document.querySelectorAll(selector);
// 모두 열기 버튼 요소 생성
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);
// 각 요소에 대한 처리
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);
});
}, 100);