Mydealz Comment-Preview

Zeigt verlinkte Kommentare beim Klick in einem Popup an
当前为 2025-01-27 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Mydealz Comment-Preview
// @namespace    https://mydealz.de/
// @version      1.1.1
// @description  Zeigt verlinkte Kommentare beim Klick in einem Popup an
// @match        https://www.mydealz.de/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Popup erstellen
    const popup = document.createElement('div');
    popup.id = 'commentPopup';
    popup.style.position = 'fixed';
    popup.style.backgroundColor = '#fff';
    popup.style.padding = '12px';
    popup.style.border = '1px solid #ccc';
    popup.style.borderRadius = '6px';
    popup.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
    popup.style.zIndex = '999999';
    popup.style.maxWidth = '600px';
    popup.style.maxHeight = '400px';
    popup.style.overflow = 'auto';
    popup.style.display = 'none';
    document.body.appendChild(popup);

    // GraphQL-Abfrage für einen Kommentar
    async function fetchSingleComment(commentId) {
        const query = `
            query comment($id: ID!) {
                comment(id: $id) {
                    preparedHtmlContent
                    createdAtTs
                    user {
                        userId
                        username
                    }
                }
            }
        `;

        const variables = {
            id: commentId
        };

        const response = await fetch('https://www.mydealz.de/graphql', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            body: JSON.stringify({
                query,
                variables
            })
        });

        const data = await response.json();
        if (data.errors) {
            throw new Error(data.errors[0].message);
        }

        return data?.data?.comment;
    }

    // Click-Handler für Links
    async function onLinkClick(event) {
        const link = event.target.closest('a');
        if (!link) return;

        const fullUrl = link.title || link.href;

        // Verbesserte RegEx zur Erkennung von Kommentar- und Antwort-Links
        const commentMatch = fullUrl.match(/(?:\/deals\/|\/diskussion\/|\/feedback\/)(?:.*?-)?(\d+)(?:#comment-|#reply-)(\d+)/i);
        if (!commentMatch) return;

        event.preventDefault();

        const dealId = commentMatch[1];
        const commentId = commentMatch[2];

        try {
            popup.style.display = 'block';
            popup.style.left = (event.clientX + 15) + 'px';
            popup.style.top = (event.clientY + 15) + 'px';
            popup.innerHTML = '<em>Lade Kommentar...</em>';

            const commentData = await fetchSingleComment(commentId);
            if (!commentData) {
                popup.innerHTML = '<em>Kommentar nicht gefunden</em>';
                return;
            }

            const commentDate = new Date(commentData.createdAtTs * 1000).toLocaleString('de-DE', {
                year: 'numeric',
                month: 'numeric',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            }).replace(',', '');

            popup.innerHTML = `
    <div style="position:relative; padding-right:30px;">
        <button onclick="document.getElementById('commentPopup').style.display='none'"
                style="position:absolute; top:-5px; right:5px; background:none; color:#000;
                       border:none; cursor:pointer; font-size:16px;
                       line-height:1; padding:0; font-family:Arial;">
            ×
        </button>
        <div style="font-weight: bold; margin-bottom: 8px;">
            Kommentar von ${commentData.user.username} (${commentDate}):
        </div>
        <div style="font-size: 14px; margin-bottom: 15px;">
            ${commentData.preparedHtmlContent}
        </div>
        <div style="text-align: right;">
            <button onclick="document.getElementById('commentPopup').style.display='none'; window.location.href='${fullUrl}'"
                    style="padding: 6px 12px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Zum Kommentar
            </button>
        </div>
    </div>
`;


        } catch (e) {
            console.error(e);
            popup.innerHTML = '<em>Fehler beim Laden</em>';
        }
    }

    // Event-Listener für Klicks
    document.addEventListener('click', onLinkClick);

    // Popup schließen wenn außerhalb geklickt wird
    document.addEventListener('click', (event) => {
        if (!popup.contains(event.target) && event.target.tagName !== 'A') {
            popup.style.display = 'none';
        }
    });
})();