MangaHub Viewer

userscript.js

// ==UserScript==
// @name         MangaHub Image Resizer
// @namespace    http://tampermonkey.net/
// @version      2023-12-27
// @description  Resize images on MangaHub for better mobile viewing
// @author       You
// @match        https://mangahub.io/chapter/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mangahub.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let count = -1;
    let isDesktop = false

    // Function to resize images
    function resizeImages() {
        console.log("RESIZE", count);

        const widthOptions = [400, 460, 520, 580];
        const width = `${widthOptions.at(count % widthOptions.length) * (isDesktop ? 1.8 : 1)}px`

        const images = document.querySelectorAll('#mangareader img');

        images.forEach(image => {
            image.style.maxWidth = width;
        });

        const navbar =document.querySelector("nav.navbar-fixed-bottom");
        navbar.style.opacity = ".2"
    }

    function deleteNumberCount() {
        const elements = document.querySelectorAll(`#app .reader-page #mangareader p`)
        elements.forEach(x => x.remove())
    }

    // Function to create and attach the button
    function createMobileResizeButton() {
        const buttonId = 'mangaHubMobileResizeButton';

        // Check if the button is already attached
        if (!document.getElementById(buttonId)) {
            const button = document.createElement('button');
            button.id = buttonId;
            button.innerText = 'Mobile';
            button.style.position = 'fixed';
            button.style.bottom = '5px';
            button.style.right = '45px';
            button.style.zIndex = '9999';
            button.style.background = 'white'; // Set white background
            button.style.color = 'black'; // Set black text color
            button.style.border = 'none'; // Remove border
            button.style.padding = '5px 10px'; // Add padding for better visibility
            button.style.borderRadius = "5px";
            button.addEventListener('click', () => {
                isDesktop = false;
                count += 1;
                resizeImages();
                if (count === 0) {
                    setInterval(deleteNumberCount, 1000);
                    setInterval(resizeImages, 1000);
                }
            });

            document.body.appendChild(button);
        }
    }

    // Function to create and attach the button
    function createDesktopResizeButton() {
        const buttonId = 'mangaHubDesktopResizeButton';

        // Check if the button is already attached
        if (!document.getElementById(buttonId)) {
            const button = document.createElement('button');
            button.id = buttonId;
            button.innerText = 'Desktop';
            button.style.position = 'fixed';
            button.style.bottom = '5px';
            button.style.right = '120px';
            button.style.zIndex = '9999';
            button.style.background = 'white'; // Set white background
            button.style.color = 'black'; // Set black text color
            button.style.border = 'none'; // Remove border
            button.style.padding = '5px 10px'; // Add padding for better visibility
            button.style.borderRadius = "5px";
            button.addEventListener('click', () => {
                isDesktop = true;
                count += 1;
                resizeImages();
                if (count === 0) {
                    setInterval(resizeImages, 1000);
                }
            });

            document.body.appendChild(button);
        }
    }

    function createUI() {
        createMobileResizeButton()
        createDesktopResizeButton()
    }

    // Check every second if the button is attached
    setInterval(createUI, 1000);
})();