☰

Manga Enhancer

Enhances your manga reading experience with a set of features:

// ==UserScript==
// @name          Manga Enhancer
// @namespace     Moose
// @version       3.0
// @description   Enhances your manga reading experience with a set of features:
//                  1. Navigate between chapters using arrow keys. Also works by 1+ -1 on chapters URL to find new chapters
//                  2. Close tabs with a button press. Default "/" can be changed on line #101
//                  3. Remove gaps between pages.
//                  4. Auto-reload on image loading errors. Also tells the user that some images are missing. As an added note of this function, it continues to show till all images are loaded and then removes itself
//                  5. Image size as a percentage of screen width, also save preferences. Found at the top right of the screen
//
// If the script doesn't work on the site, add the site URL as shown below.
// @match         https://manganelo.com/*
// @match         https://mangakakalot.com/*
// @match         https://readmanganato.com/*
// @match         https://manganato.com/*
// @match         https://chapmanganato.com/*
// @match         https://chapmanganato.to/*
//
// @icon        https://manganato.com/favicon-96x96.png
// @author        Moose, ChatGPT
// @description   12/26/2023
// @license MIT
// ==/UserScript==

// Function to create a div for displaying error messages
function createErrorDisplayDiv() {
    const errorDisplayDiv = document.createElement('div');
    errorDisplayDiv.style.position = 'fixed';
    errorDisplayDiv.style.top = '50%';
    errorDisplayDiv.style.left = '10px';
    errorDisplayDiv.style.padding = '10px';
    errorDisplayDiv.style.background = 'white';
    errorDisplayDiv.style.border = '2px solid black';
    errorDisplayDiv.style.borderRadius = '5px';
    errorDisplayDiv.style.display = 'none'; // Initially hidden

    // Create close button (X)
    const closeButton = document.createElement('span');
    closeButton.textContent = 'X';
    closeButton.style.float = 'right';
    closeButton.style.cursor = 'pointer';
    closeButton.addEventListener('click', () => {
        errorDisplayDiv.style.display = 'none';
    });

    // Append close button to the error display div
    errorDisplayDiv.appendChild(closeButton);

    document.body.appendChild(errorDisplayDiv);
    return errorDisplayDiv;
}

// Function to display an error prompt with the number of images with loading errors
function displayErrorPrompt() {
    let reloadPromptShown = false;

    const updateMessage = () => {
        const errorImages = document.querySelectorAll('img:not(.loaded)');
        const totalImages = errorImages.length;

        if (totalImages > 0) {
            // If there are images with loading errors, update the error message
            const newMessage = `Error loading ${totalImages} image(s). Do you want to reload the page?`;
            errorDisplayDiv.textContent = newMessage;
            errorDisplayDiv.style.display = 'block';
        } else {
            // If no error is found, hide the error message
            closeErrorMessage();
            clearInterval(updateInterval);
        }
    };

    // Check image load status periodically and update the message
    const updateInterval = setInterval(updateMessage, checkInterval);
}

// Main script block
(function () {
    'use strict';

    // Create a div for displaying error messages globally
    const errorDisplayDiv = createErrorDisplayDiv();

    // Counter for image loading attempts
    let attempts = 0;
    const maxAttempts = 3; // Adjust the maximum number of attempts as needed
    const checkInterval = 5000; // Adjust the interval as needed

    // Function to close the error message
    function closeErrorMessage() {
        errorDisplayDiv.style.display = 'none';
    }

// Function to update the error message box based on the number of images with loading errors
function updateMessage() {
    attempts++;

    const allImages = document.querySelectorAll('img');
    const errorImages = Array.from(allImages).filter(img => !img.classList.contains('loaded') && (!img.complete || img.naturalWidth === 0));
    const totalImages = errorImages.length;

    if (totalImages > 0) {
        // If there are images with loading errors, update the error message
        const newMessage = `Error loading ${totalImages} image(s). Do you want to reload the page?`;
        errorDisplayDiv.textContent = newMessage;
        errorDisplayDiv.style.display = 'block';
    } else {
        // If no error is found, hide the error message
        closeErrorMessage();
        clearInterval(updateInterval);
    }
}

    // Check image load status periodically and update the message
    const updateInterval = setInterval(updateMessage, checkInterval);

    // Function to check if all images are loaded
    function checkAllImagesLoaded() {
        const allImages = document.querySelectorAll('img');
        const unloadedImages = Array.from(allImages).filter(img => !img.classList.contains('loaded'));

        if (unloadedImages.length === 0) {
            // If all images are loaded, hide the error message
            closeErrorMessage();
            clearInterval(updateInterval);
        }
    }

    // Check if all images are loaded periodically
    const checkAllImagesInterval = setInterval(checkAllImagesLoaded, 1000); // Check every second

    // Check if the current URL contains "chapter-"
    const isChapterUrl = window.location.href.includes('chapter-');

    // If the current URL contains "chapter-", enhance the reading experience
    if (isChapterUrl) {
        // Add event listener for arrow key presses
        window.addEventListener('keydown', function (event) {
            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
                const isLeftArrow = event.key === 'ArrowLeft';

                const currentUrl = window.location.href;
                const match = currentUrl.match(/:\/\/([^/]+)\/([^/]+)\/chapter-(\d+)/);

                if (match) {
                    const domain = match[1];
                    const path = match[2];
                    const currentChapter = parseInt(match[3], 10);

                    // Increment or decrement the current chapter based on the arrow key
                    const newChapter = isLeftArrow ? currentChapter - 1 : currentChapter + 1;

                    // Ensure the new chapter is non-negative
                    if (newChapter >= 0) {
                        const newUrl = currentUrl.replace(`://${domain}/${path}/chapter-${currentChapter}`, `://${domain}/${path}/chapter-${newChapter}`);
                        window.location.href = newUrl;
                    }
                }
                event.preventDefault(); // Prevent the default behavior of arrow keys (e.g., scrolling)
            }
        });

        // Add event listener for the forward slash key press
        window.addEventListener('keydown', function (event) {
            // Forward slash key press
            if (event.key === '/' && event.code === 'Slash') {
                // Close the current tab
                window.close();
            }
        });

        // Remove space between pages
        const targetDivs = document.querySelectorAll('div[style*="max-width: 620px; max-height: 310px; margin: 10px auto; overflow: hidden; display: block;"]');
        targetDivs.forEach(targetDiv => {
            // Change the margin property to "0" instead of "10px auto"
            targetDiv.style.margin = '0';
        });

        // Size Changer Section
        let isResizeEnabled = localStorage.getItem('isResizeEnabled') === 'true';

        // Function to set and save the image size as a percentage of screen width
        function setImageSize(percentage) {
            // Check if the current URL contains "chapter-#"
            if (window.location.href.includes('chapter-')) {
                // Set the image size for all images in your application logic
                const images = document.querySelectorAll('img');
                images.forEach(image => {
                    image.style.width = isResizeEnabled ? percentage + '%' : ''; // Always set the size, even if resizing is enabled
                });

                // Save the user's preference in local storage
                localStorage.setItem('userImageSizePercentage', percentage);
            }
        }

        // Function to get the saved image size percentage
        function getSavedImageSizePercentage() {
            // Retrieve the user's saved preference from local storage
            const savedPercentage = localStorage.getItem('userImageSizePercentage');

            // Return the saved percentage or a default value if not found
            return savedPercentage ? parseFloat(savedPercentage) : 50; // Default percentage: 50%
        }

        // Function to toggle image resizing
        function toggleResize() {
            isResizeEnabled = !isResizeEnabled;
            const buttonText = isResizeEnabled ? 'Toggle Resize Enabled' : 'Toggle Resize Disabled';

            // Change the text on the "Toggle Resize" button
            toggleResizeButton.textContent = buttonText;

            // Save the current state of "Toggle Resize" in local storage
            localStorage.setItem('isResizeEnabled', isResizeEnabled);

            // Adjust the image size based on the current state of "Toggle Resize"
            setImageSize(getSavedImageSizePercentage());
        }

        // Function to handle button click and prompt the user for a new size percentage
        function handleButtonClick() {
            // Ask the user for a new image size percentage
            const newPercentage = prompt('Enter the new image size as a percentage of screen width:', getSavedImageSizePercentage());

            // Validate and set the new size percentage
            if (newPercentage !== null) {
                const validatedPercentage = parseFloat(newPercentage);
                if (!isNaN(validatedPercentage) && validatedPercentage > 0 && validatedPercentage <= 100) {
                    setImageSize(validatedPercentage);
                } else {
                    alert('Invalid input. Please enter a percentage between 1 and 100.');
                }
            }
        }

        // Function to create a div for displaying error messages
        function createErrorDisplayDiv() {
            const errorDisplayDiv = document.createElement('div');
            errorDisplayDiv.style.position = 'fixed';
            errorDisplayDiv.style.top = '50%';
            errorDisplayDiv.style.left = '10px';
            errorDisplayDiv.style.padding = '10px';
            errorDisplayDiv.style.background = 'white';
            errorDisplayDiv.style.border = '2px solid black';
            errorDisplayDiv.style.borderRadius = '5px';
            errorDisplayDiv.style.display = 'none'; // Initially hidden

            // Create close button (X)
            const closeButton = document.createElement('span');
            closeButton.textContent = 'X';
            closeButton.style.float = 'right';
            closeButton.style.cursor = 'pointer';
            closeButton.addEventListener('click', () => {
                errorDisplayDiv.style.display = 'none';
            });

            // Append close button to the error display div
            errorDisplayDiv.appendChild(closeButton);

            document.body.appendChild(errorDisplayDiv);
            return errorDisplayDiv;
        }

        // Create a button to trigger image size adjustment
        const resizeButton = document.createElement('button');
        resizeButton.textContent = 'Adjust Image Size';
        resizeButton.style.position = 'absolute';
        resizeButton.style.top = '10px';
        resizeButton.style.right = '10px';
        resizeButton.addEventListener('click', function () {
            handleButtonClick();
            setImageSize(getSavedImageSizePercentage()); // Adjust image size when resizing is toggled
        });

        // Append the button to the body
        document.body.appendChild(resizeButton);

        // Create a button to toggle image resizing
        const toggleResizeButton = document.createElement('button');
        toggleResizeButton.textContent = isResizeEnabled ? 'Toggle Resize Enabled' : 'Toggle Resize Disabled';
        toggleResizeButton.style.position = 'absolute';
        toggleResizeButton.style.top = '50px';
        toggleResizeButton.style.right = '10px';
        toggleResizeButton.addEventListener('click', toggleResize);

        // Append the button to the body
        document.body.appendChild(toggleResizeButton);

        // Initialize the image size percentage and "Toggle Resize" state on script load
        isResizeEnabled = localStorage.getItem('isResizeEnabled') === 'true';
        const buttonText = isResizeEnabled ? 'Toggle Resize Enabled' : 'Toggle Resize Disabled';
        toggleResizeButton.textContent = buttonText;
        setImageSize(getSavedImageSizePercentage());
    }
})();