alancnet/chatgpt-html-preview.js

## chatgpt-html-preview.js
// ==UserScript==
// @name         ChatGPT Code Preview
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Combine and preview HTML, CSS, and JS code blocks from ChatGPT
// @author       Wizulus
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const getCodeBlocks = () => {
        const codeBlocks = {
            html: null,
            css: null,
            js: null
        };

        document.querySelectorAll('div.markdown > pre').forEach(pre => {
            const languageSpan = pre.querySelector('span');
            const codeElement = pre.querySelector('code');
            if (languageSpan && codeElement) {
                const language = languageSpan.textContent.toLowerCase();
                const code = codeElement.textContent;
                if (language === 'html') codeBlocks.html = code;
                if (language === 'css') codeBlocks.css = code;
                if (language === 'javascript' || language === 'js') codeBlocks.js = code;
            }
        });

        return codeBlocks;
    };

    const createIframe = (htmlString) => {
        let iframe = document.getElementById('codePreviewIframe');
        if (!iframe) {
            iframe = document.createElement('iframe');
            iframe.id = 'codePreviewIframe';
            iframe.style.position = 'fixed';
            iframe.style.top = '0';
            iframe.style.left = '0';
            iframe.style.width = '400px';
            iframe.style.height = '300px';
            iframe.style.border = '1px solid black';
            iframe.style.zIndex = '9998';
            iframe.style.resize = 'both';
            iframe.style.overflow = 'auto';
            document.body.appendChild(iframe);
        }

        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write(htmlString);
        iframeDoc.close();
    };

    const createCloseButton = () => {
        let closeButton = document.getElementById('closeIframeButton');
        if (!closeButton) {
            closeButton = document.createElement('button');
            closeButton.id = 'closeIframeButton';
            closeButton.innerText = 'Close Preview';
            closeButton.style.position = 'fixed';
            closeButton.style.top = '82px';
            closeButton.style.right = '10px';
            closeButton.style.backgroundColor = '#000';
            closeButton.style.color = '#fff';
            closeButton.style.border = 'none';
            closeButton.style.padding = '5px 10px';
            closeButton.style.zIndex = '9999';
            closeButton.style.cursor = 'pointer';
            closeButton.onclick = () => {
                const iframe = document.getElementById('codePreviewIframe');
                if (iframe) iframe.remove();
                closeButton.remove();
            };
            document.body.appendChild(closeButton);
        }
    };

    const createCombinedHTML = (codeBlocks) => {
        let combinedHTML;
        if (codeBlocks.html && codeBlocks.html.includes('<html')) {
            combinedHTML = codeBlocks.html.replace(/<link\s+[^>]*>/g, '');
            if (codeBlocks.css) {
                combinedHTML = combinedHTML.replace('<head>', `<head><style>${codeBlocks.css}</style>`);
            }
        } else {
            combinedHTML = `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <style>${codeBlocks.css || ''}</style>
                </head>
                <body>
                    ${codeBlocks.html || ''}
                    <script>${codeBlocks.js || ''}</script>
                </body>
                </html>
            `;
        }
        return combinedHTML;
    };

    const previewCombinedCode = () => {
        const codeBlocks = getCodeBlocks();
        const combinedHTML = createCombinedHTML(codeBlocks);
        createIframe(combinedHTML);
        createCloseButton();
    };

    const addButton = () => {
        let button = document.getElementById('previewCodeButton');
        if (!button) {
            button = document.createElement('button');
            button.id = 'previewCodeButton';
            button.innerText = 'Preview Code';
            button.style.position = 'fixed';
            button.style.top = '42px';
            button.style.right = '10px';
            button.style.backgroundColor = '#000';
            button.style.color = '#fff';
            button.style.border = 'none';
            button.style.padding = '5px 10px';
            button.style.zIndex = '9999';
            button.style.cursor = 'pointer';
            button.onclick = previewCombinedCode;
            document.body.appendChild(button);
        }
    };

    addButton();
})();
	// ==UserScript==
	// @name ChatGPT Code Preview
	// @namespace http://tampermonkey.net/
	// @version 1.3
	// @description Combine and preview HTML, CSS, and JS code blocks from ChatGPT
	// @author Wizulus
	// @match https://chatgpt.com/*
	// @grant none
	// ==/UserScript==

	(function() {
	'use strict';

	const getCodeBlocks = () => {
	const codeBlocks = {
	html: null,
	css: null,
	js: null
	};

	document.querySelectorAll('div.markdown > pre').forEach(pre => {
	const languageSpan = pre.querySelector('span');
	const codeElement = pre.querySelector('code');
	if (languageSpan && codeElement) {
	const language = languageSpan.textContent.toLowerCase();
	const code = codeElement.textContent;
	if (language === 'html') codeBlocks.html = code;
	if (language === 'css') codeBlocks.css = code;
	if (language === 'javascript' \|\| language === 'js') codeBlocks.js = code;
	}
	});

	return codeBlocks;
	};

	const createIframe = (htmlString) => {
	let iframe = document.getElementById('codePreviewIframe');
	if (!iframe) {
	iframe = document.createElement('iframe');
	iframe.id = 'codePreviewIframe';
	iframe.style.position = 'fixed';
	iframe.style.top = '0';
	iframe.style.left = '0';
	iframe.style.width = '400px';
	iframe.style.height = '300px';
	iframe.style.border = '1px solid black';
	iframe.style.zIndex = '9998';
	iframe.style.resize = 'both';
	iframe.style.overflow = 'auto';
	document.body.appendChild(iframe);
	}

	const iframeDoc = iframe.contentDocument \|\| iframe.contentWindow.document;
	iframeDoc.open();
	iframeDoc.write(htmlString);
	iframeDoc.close();
	};

	const createCloseButton = () => {
	let closeButton = document.getElementById('closeIframeButton');
	if (!closeButton) {
	closeButton = document.createElement('button');
	closeButton.id = 'closeIframeButton';
	closeButton.innerText = 'Close Preview';
	closeButton.style.position = 'fixed';
	closeButton.style.top = '82px';
	closeButton.style.right = '10px';
	closeButton.style.backgroundColor = '#000';
	closeButton.style.color = '#fff';
	closeButton.style.border = 'none';
	closeButton.style.padding = '5px 10px';
	closeButton.style.zIndex = '9999';
	closeButton.style.cursor = 'pointer';
	closeButton.onclick = () => {
	const iframe = document.getElementById('codePreviewIframe');
	if (iframe) iframe.remove();
	closeButton.remove();
	};
	document.body.appendChild(closeButton);
	}
	};

	const createCombinedHTML = (codeBlocks) => {
	let combinedHTML;
	if (codeBlocks.html && codeBlocks.html.includes('<html')) {
	combinedHTML = codeBlocks.html.replace(/<link\s+[^>]*>/g, '');
	if (codeBlocks.css) {
	combinedHTML = combinedHTML.replace('<head>', `<head><style>${codeBlocks.css}</style>`);
	}
	} else {
	combinedHTML = `
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>${codeBlocks.css \|\| ''}</style>
	</head>
	<body>
	${codeBlocks.html \|\| ''}
	<script>${codeBlocks.js \|\| ''}</script>
	</body>
	</html>
	`;
	}
	return combinedHTML;
	};

	const previewCombinedCode = () => {
	const codeBlocks = getCodeBlocks();
	const combinedHTML = createCombinedHTML(codeBlocks);
	createIframe(combinedHTML);
	createCloseButton();
	};

	const addButton = () => {
	let button = document.getElementById('previewCodeButton');
	if (!button) {
	button = document.createElement('button');
	button.id = 'previewCodeButton';
	button.innerText = 'Preview Code';
	button.style.position = 'fixed';
	button.style.top = '42px';
	button.style.right = '10px';
	button.style.backgroundColor = '#000';
	button.style.color = '#fff';
	button.style.border = 'none';
	button.style.padding = '5px 10px';
	button.style.zIndex = '9999';
	button.style.cursor = 'pointer';
	button.onclick = previewCombinedCode;
	document.body.appendChild(button);
	}
	};

	addButton();
	})();