ChatGPT 代码预览助手 - Code Previewer for ChatGPT

Preview HTML code on chatgpt.com by adding an iframe below code blocks with class 'language-html'.
目前為 2024-07-15 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         ChatGPT 代码预览助手 - Code Previewer for ChatGPT
// @namespace    http://xyde.net.cn
// @version      1.3
// @description  Preview HTML code on chatgpt.com by adding an iframe below code blocks with class 'language-html'.
// @author       You
// @match        https://chatgpt.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to create preview container
    function createPreviewContainer(htmlCode, id) {
        // Create container div
        const container = document.createElement('div');
        container.style.border = '1px solid #ddd';
        container.style.borderRadius = '5px';
        container.style.marginTop = '10px';
        container.style.padding = '10px';
        container.style.backgroundColor = '#f9f9f9';
        container.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

        // Create title
        const title = document.createElement('div');
        title.textContent = 'HTML Code Preview 网页代码预览';
        title.style.fontWeight = 'bold';
        title.style.marginBottom = '10px';
        title.style.textAlign = 'center';

        // Create iframe
        const iframe = document.createElement('iframe');
        iframe.className = 'html-preview-iframe';
        iframe.style.width = '100%';
        iframe.style.height = '300px';
        iframe.style.border = 'none';
        iframe.id = 'code-preview-' + id;

        // Wait for iframe to load before setting content
        iframe.onload = function() {
            const doc = iframe.contentDocument || iframe.contentWindow.document;
            doc.open();
            doc.write(htmlCode);
            doc.close();
        };

        // Append title and iframe to container
        container.appendChild(title);
        container.appendChild(iframe);

        return container;
    }

    // Function to find and process code elements
    function processCodeElements() {
        // Find all code elements with class 'language-html'
        const codeElements = document.querySelectorAll('code.language-html');

        // Iterate through each code element
        codeElements.forEach(codeElement => {
            // Check if it has already been processed
            if (codeElement.dataset.previewed){
                let iframe = document.querySelector("#code-preview-" + codeElement.dataset.id);
                iframe.contentDocument.open();
                iframe.contentDocument.write(codeElement.textContent);
                iframe.contentDocument.close();
                return;
            }

            // Mark as previewed
            codeElement.dataset.previewed = true;

            codeElement.dataset.id = Math.ceil(Math.random()*100000);

            // Get parent element of code block
            const parentElement = codeElement.closest('.flex-col');

            // Create a preview container
            const previewContainer = createPreviewContainer(codeElement.textContent, codeElement.dataset.id);

            // Insert container below the code element
            parentElement.appendChild(previewContainer);
        });
    }

    // Run processCodeElements initially and then every 3 seconds
    processCodeElements();
    setInterval(processCodeElements, 3000);
})();
欢迎访问Greasy Fork镜像
