☰

펨코 댓글 이미지 링크 이미지로 보기

댓글에 있는 이미지 링크를 직접 이미지로 표시합니다.

目前為 2024-11-12 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         펨코 댓글 이미지 링크 이미지로 보기
// @namespace
// @version      1.1
// @description  댓글에 있는 이미지 링크를 직접 이미지로 표시합니다.
// @author       ChatGPT
// @match        *://*.fmkorea.com/*
// @grant        none
// @namespace https://greasyfork.org/users/1394821
// ==/UserScript==

(function () {
    'use strict';

    const isDebugMode = false;
    let isReplacing = false;

    function debugLog(message) {
        if (isDebugMode) {
            console.log(message);
        }
    }

    const imgRegex = /https?:\/\/[^\s"'<>]+\.(?:png|jpg|jpeg|gif|webp)/i;

    // 텍스트 노드에서 이미지 링크를 찾아 변환하는 함수
    function replaceImageLinks() {
        if (isReplacing) {
            debugLog("[fmk-comment-img] 이미지 변환 중이므로 중단");
            return;
        }
        isReplacing = true;
        debugLog("[fmk-comment-img] 이미지 변환 시작");

        const commentWrapper = document.querySelector('#cmtPosition');
        if (!commentWrapper) {
            debugLog("[fmk-comment-img] 댓글 래퍼 요소를 찾을 수 없습니다.");
            return;
        }

        const commentItems = commentWrapper.querySelectorAll('li');
        debugLog(`[fmk-comment-img] 댓글 요소 수: ${commentItems.length}`);

        commentItems.forEach((item, index) => {
            debugLog(`[fmk-comment-img] ${index + 1}번째 댓글 처리 중...`);

            const commentContent = item.querySelector('.comment-content');
            if (!commentContent) {
                debugLog(`[fmk-comment-img] ${index + 1}번째 댓글에 comment-content 요소가 없습니다.`);
                return;
            }

            const xeContentDivs = commentContent.querySelectorAll('.xe_content');
            xeContentDivs.forEach(xeContent => {
                traverseTextNodes(xeContent);
            });
        });

        isReplacing = false;
        debugLog("[fmk-comment-img] 이미지 변환 완료");
    }

    // 텍스트 노드를 순회하면서 이미지 링크를 변환
    function traverseTextNodes(element) {
        const hyperlinks = element.querySelectorAll('a:not(.findParent)');

        hyperlinks.forEach(link => {
           const url = link.textContent.trim();

           if (imgRegex.test(url)) {
               debugLog(`${url}`);
               const imgElement = document.createElement('img');
               imgElement.src = link.href;
               imgElement.style = 'height:auto; object-fit:contain; display:inline-block; vertical-align:middle;';

               link.textContent = '';
               link.appendChild(imgElement);
           }
        });
    }

    function observeCommentWrapper() {
        const commentWrapper = document.querySelector('#cmtPosition');
        if (!commentWrapper) {
            debugLog("[fmk-comment-img] 댓글 래퍼 요소를 찾을 수 없습니다.");
            return;
        }

        const observer = new MutationObserver((mutationsList) => {
            mutationsList.forEach(mutation => {
                if (mutation.target && mutation.target.classList.contains('xe_content')) {
                    debugLog("[fmk-comment-img] .xe_content 변경 감지됨");
                    replaceImageLinks();
                }
            });
        });

        observer.observe(commentWrapper, {
            childList: true,
            subtree: true,
        });

        debugLog("[fmk-comment-img] 댓글 래퍼 변경 감지 시작");
    }

    const style = document.createElement('style');
    style.innerHTML = `
        .comment-content img {
            max-width: 12% !important;
            height: auto !important;
        }
        @media (max-width: 768px) {
        .comment-content img {
            max-width: 30% !important;  /* 모바일 화면에서 이미지 크기 30%로 설정 */
        }
    }
    `;
    document.head.appendChild(style);

    observeCommentWrapper();
})();