lunamoth · August 2, 2024 10:19
diff --git a/본문 내용 읽기 쉽게 리더모드 유저스크립트.js b/본문 내용 읽기 쉽게 리더모드 유저스크립트.js
 // ==UserScript==
 // @name         Reader Mode, Toggle Main Content CSS (Optimized and Fixed)
 // @namespace    http://tampermonkey.net/
 // @version      2.3
 // @description  Reader Mode, Toggle CSS of the main content area on alt + 4 (Optimized and fixed version with title fix)
 // @author       Claude & ChatGPT
 // @match        *://*/*
 // @grant        none
 // @require      https://raw.githubusercontent.com/mozilla/readability/main/Readability.js
 // ==/UserScript==

 (function() {
    'use strict';

    let originalContent = null;
    let customContentApplied = false;

    // Function to create a minimal clone of the document for Readability
    function createMinimalClone() {
        const minimalClone = document.implementation.createHTMLDocument('');
        const newBody = minimalClone.body;

        // Copy only the necessary elements
        ['title', 'body'].forEach(tag => {
            const elem = document.getElementsByTagName(tag)[0];
            if (elem) {
                newBody.appendChild(elem.cloneNode(true));
            }
        });

        return minimalClone;
    }

    // Function to get the best title
    function getBestTitle(readabilityTitle) {
        const originalTitle = document.title;
        const h1Title = document.querySelector('h1');

        if (readabilityTitle && readabilityTitle.trim().length > 0) {
            return readabilityTitle;
        } else if (h1Title && h1Title.textContent.trim().length > 0) {
            return h1Title.textContent.trim();
        } else if (originalTitle && originalTitle.trim().length > 0) {
            return originalTitle;
        }

        return "Untitled Document";
    }

    // Function to apply custom CSS to the main content
    function applyCustomCSS() {
        // Create a minimal clone of the document for Readability
        const documentClone = createMinimalClone();
        const article = new Readability(documentClone).parse();

        if (article) {
            // Create a container for the title and main content
            const container = document.createElement('div');
            container.style.cssText = `
                color: #000;
                font-family: Lato, '나눔바른고딕', sans-serif;
                font-size: 18px;
                font-weight: 400;
                letter-spacing: 0;
                line-height: 2;
                text-align: left;
                word-break: keep-all;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fdf6e3;
            `;

            // Get the best available title
            const bestTitle = getBestTitle(article.title);

            // Add the title
            const titleElement = document.createElement('h1');
            titleElement.textContent = bestTitle;
            titleElement.style.cssText = `
                text-align: center;
                margin-top: 20px;
                font-family: Lato, '나눔바른고딕', sans-serif;
                color: #000;
                font-size: 24px;
                font-weight: bold;
            `;
            container.appendChild(titleElement);

            // Add the main content
            const mainContent = document.createElement('div');
            mainContent.innerHTML = article.content || document.body.innerHTML;

            // Preserve line breaks
            mainContent.innerHTML = mainContent.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br>');

            // Add a style tag for images instead of inline styling
            const styleTag = document.createElement('style');
            styleTag.textContent = `
                #reader-mode-content img {
                    max-width: 100%;
                    height: auto;
                }
            `;
            document.head.appendChild(styleTag);

            container.id = 'reader-mode-content';
            container.appendChild(mainContent);

            // Save original content if not saved already
            if (!originalContent) {
                originalContent = document.body.innerHTML;
            }

            // Apply custom content
            document.body.innerHTML = '';
            document.body.appendChild(container);

            // Set the overall background color
            document.body.style.backgroundColor = "#fdf6e3";

            customContentApplied = true;
        } else {
            console.error("Readability couldn't parse the page content.");
        }
    }

    // Function to restore original content
    function restoreOriginalContent() {
        if (originalContent) {
            document.body.innerHTML = originalContent;
            document.body.style.backgroundColor = '';
            customContentApplied = false;
        }
    }

    // Listen for the keydown event
    document.addEventListener('keydown', function(event) {
        if (event.altKey && event.key === '4') {
            if (customContentApplied) {
                restoreOriginalContent();
            } else {
                applyCustomCSS();
            }
        }
    }, false);

    // Log to confirm the script is running
    console.log("Toggle Main Content CSS script is active.");
 })();
	// ==UserScript==
	// @name Reader Mode, Toggle Main Content CSS (Optimized and Fixed)
	// @namespace http://tampermonkey.net/
	// @version 2.3
	// @description Reader Mode, Toggle CSS of the main content area on alt + 4 (Optimized and fixed version with title fix)
	// @author Claude & ChatGPT
	// @match :///*
	// @grant none
	// @require https://raw.githubusercontent.com/mozilla/readability/main/Readability.js
	// ==/UserScript==

	(function() {
	'use strict';

	let originalContent = null;
	let customContentApplied = false;

	// Function to create a minimal clone of the document for Readability
	function createMinimalClone() {
	const minimalClone = document.implementation.createHTMLDocument('');
	const newBody = minimalClone.body;

	// Copy only the necessary elements
	['title', 'body'].forEach(tag => {
	const elem = document.getElementsByTagName(tag)[0];
	if (elem) {
	newBody.appendChild(elem.cloneNode(true));
	}
	});

	return minimalClone;
	}

	// Function to get the best title
	function getBestTitle(readabilityTitle) {
	const originalTitle = document.title;
	const h1Title = document.querySelector('h1');

	if (readabilityTitle && readabilityTitle.trim().length > 0) {
	return readabilityTitle;
	} else if (h1Title && h1Title.textContent.trim().length > 0) {
	return h1Title.textContent.trim();
	} else if (originalTitle && originalTitle.trim().length > 0) {
	return originalTitle;
	}

	return "Untitled Document";
	}

	// Function to apply custom CSS to the main content
	function applyCustomCSS() {
	// Create a minimal clone of the document for Readability
	const documentClone = createMinimalClone();
	const article = new Readability(documentClone).parse();

	if (article) {
	// Create a container for the title and main content
	const container = document.createElement('div');
	container.style.cssText = `
	color: #000;
	font-family: Lato, '나눔바른고딕', sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 2;
	text-align: left;
	word-break: keep-all;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fdf6e3;
	`;

	// Get the best available title
	const bestTitle = getBestTitle(article.title);

	// Add the title
	const titleElement = document.createElement('h1');
	titleElement.textContent = bestTitle;
	titleElement.style.cssText = `
	text-align: center;
	margin-top: 20px;
	font-family: Lato, '나눔바른고딕', sans-serif;
	color: #000;
	font-size: 24px;
	font-weight: bold;
	`;
	container.appendChild(titleElement);

	// Add the main content
	const mainContent = document.createElement('div');
	mainContent.innerHTML = article.content \|\| document.body.innerHTML;

	// Preserve line breaks
	mainContent.innerHTML = mainContent.innerHTML.replace(/(?:\r\n\|\r\|\n)/g, '<br>');

	// Add a style tag for images instead of inline styling
	const styleTag = document.createElement('style');
	styleTag.textContent = `
	#reader-mode-content img {
	max-width: 100%;
	height: auto;
	}
	`;
	document.head.appendChild(styleTag);

	container.id = 'reader-mode-content';
	container.appendChild(mainContent);

	// Save original content if not saved already
	if (!originalContent) {
	originalContent = document.body.innerHTML;
	}

	// Apply custom content
	document.body.innerHTML = '';
	document.body.appendChild(container);

	// Set the overall background color
	document.body.style.backgroundColor = "#fdf6e3";

	customContentApplied = true;
	} else {
	console.error("Readability couldn't parse the page content.");
	}
	}

	// Function to restore original content
	function restoreOriginalContent() {
	if (originalContent) {
	document.body.innerHTML = originalContent;
	document.body.style.backgroundColor = '';
	customContentApplied = false;
	}
	}

	// Listen for the keydown event
	document.addEventListener('keydown', function(event) {
	if (event.altKey && event.key === '4') {
	if (customContentApplied) {
	restoreOriginalContent();
	} else {
	applyCustomCSS();
	}
	}
	}, false);

	// Log to confirm the script is running
	console.log("Toggle Main Content CSS script is active.");
	})();