Greasy Fork

I asked ChatGPT how to modify your script to keep formatting and it suggested the following changes, which worked, and the result is a lot nicer. You get the code block boxes in the output, etc..

        // const clone = contentBlock.cloneNode(true);
        // clone.querySelectorAll('pre').forEach(pre => {
        //     const code = sanitize(pre.innerText.trim());
        //     pre.replaceWith(`<pre><code>${code}</code></pre>`);
        // });

        // clone.querySelectorAll('img, canvas').forEach(el => {
        //     el.replaceWith('[Image or Canvas]');
        // });

        // const cleanText = sanitize(clone.innerText.trim()).replace(/\n/g, '<br>');

        // html += `
        //     <div class="message">
        //         <div class="sender">${sender}</div>
        //         <div class="content">${cleanText}</div>
        //     </div>
        // `;

        // clone the node so we don’t touch the live DOM
        const clone = contentBlock.cloneNode(true);

        // strip out anything you definitely don’t want (scripts, styles, canvases, etc.)
        clone.querySelectorAll('script, style, canvas').forEach(el => el.remove());
        // replace images with a placeholder
        clone.querySelectorAll('img').forEach(img => {
            const placeholder = document.createElement('span');
            placeholder.textContent = '[Image]';
            img.replaceWith(placeholder);
        });

        // now grab innerHTML rather than innerText, so tags survive
        // (optionally you could run this through a sanitizer that only
        //  allows <b>,<i>,<strong>,<em>,<a>,<pre>,<code>,<ul>,<li>,<p>, etc.)
        const styledHTML = clone.innerHTML.trim();

        html += `
            <div class="message">
                <div class="sender">${sender}</div>
                <div class="content">${styledHTML}</div>
            </div>
        `;