파트너 스트리머이며 매니저가 아닌 채팅의 닉네임과 메시지를 연두색으로 표시
当前为
파트너 스트리머이면서 매니저가 아닌 채팅의 닉네임과 메시지를 연두색으로 표시함
일반 채팅들 사이에 채팅을 보기 더 쉬워집니다
다만 테스트 조건이 보기 어려워 아래의 테스트 코드를 통해 정상작동을 확인 했으나, 파트너 스트리머이면서 매니저가 아닌 채팅의 적용은 확인하지 못했습니다.
// ==UserScript==
// @name Chzzk_Test: Fan Badge Green
// @namespace Chzzk_Test: Fan Badge Green
// @version 1.0
// @description 테스트용: 후원뱃지가 있으면서 매니저가 아닌 유저의 닉네임과 메시지를 초록색으로 표시
// @author DOGJIP
// @match https://chzzk.naver.com/*
// @grant none
// @run-at document-end
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const GREEN_COLOR = "rgb(102,200,102)";
let chatObserver = null;
// 채팅 메시지에 대해 후원뱃지(fan_03.png) 조건 확인 및 스타일 적용
function processChatMessage(messageElem) {
// 이미 처리된 메시지 건너뛰기
if (messageElem.getAttribute('data-fan-processed') === 'true') return;
// 배지 이미지들을 찾아서 조건 체크 (후원뱃지와 매니저 여부)
const badgeImgs = messageElem.querySelectorAll('.badge_container__a64XB img');
let isFan = false, isManager = false;
badgeImgs.forEach(img => {
if (img.src.includes("fan_03.png")) isFan = true;
if (img.src.includes("manager.png")) isManager = true;
});
// 조건에 맞으면 닉네임과 메시지에 초록색 인라인 스타일 적용
if (isFan && !isManager) {
const nicknameElem = messageElem.querySelector('.live_chatting_username_nickname__dDbbj');
const textElem = messageElem.querySelector('.live_chatting_message_text__DyleH');
if (nicknameElem) nicknameElem.style.color = GREEN_COLOR;
if (textElem) textElem.style.color = GREEN_COLOR;
}
// 중복 적용 방지
messageElem.setAttribute('data-fan-processed', 'true');
}
// 채팅 컨테이너를 감시하는 옵저버 설정 (새 채팅 메시지가 추가될 때마다 처리)
function setupChatObserver() {
// 기존 옵저버 해제
if (chatObserver) {
chatObserver.disconnect();
}
// 채팅 리스트 컨테이너 (예: live_chatting_list_wrapper__)를 찾습니다.
const chatContainer = document.querySelector('[class*="live_chatting_list_wrapper__"]');
if (!chatContainer) {
setTimeout(setupChatObserver, 500);
return;
}
// 이미 존재하는 채팅 메시지 처리
const existingMessages = chatContainer.querySelectorAll('[class^="live_chatting_message_chatting_message__"]');
existingMessages.forEach(msg => processChatMessage(msg));
// MutationObserver로 새 메시지 감지
chatObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) {
if (node.className && node.className.indexOf('live_chatting_message_chatting_message__') !== -1) {
processChatMessage(node);
} else {
// 자식에 채팅 메시지가 있을 수 있으므로 모두 처리
const msgs = node.querySelectorAll('[class^="live_chatting_message_chatting_message__"]');
msgs.forEach(msg => processChatMessage(msg));
}
}
});
});
});
chatObserver.observe(chatContainer, { childList: true, subtree: true });
}
// SPA 대응: URL 변경 시 채팅 옵저버 재설정
function setupSPADetection() {
let lastUrl = location.href;
function onUrlChange() {
if (location.href !== lastUrl) {
lastUrl = location.href;
// 새 DOM 로딩 시간 고려하여 1초 후 옵저버 재설정
setTimeout(setupChatObserver, 1000);
}
}
// pushState, replaceState 후킹
const origPushState = history.pushState;
history.pushState = function() {
origPushState.apply(history, arguments);
onUrlChange();
};
const origReplaceState = history.replaceState;
history.replaceState = function() {
origReplaceState.apply(history, arguments);
onUrlChange();
};
window.addEventListener('popstate', onUrlChange);
}
// 초기화: 채팅 옵저버 및 SPA 감지 설정
function init() {
setupChatObserver();
setupSPADetection();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
