Komga Userscript

komga.js

// ==UserScript==
// @name         ComicEater Komga
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://localhost:3030/*
// @icon         https://www.google.com/s2/favicons?domain=google.com
// @grant        GM_addStyle
// ==/UserScript==

function setCount() {
    try {
        const pageLeftEl = document.querySelectorAll('.text-caption.text-center.mt-1')[0];
        const pagesLeft = Number(pageLeftEl.textContent.replace(' pages left', ''));
        const pagesTotal = Number(document.querySelector(".col.col-auto").textContent.split(' · ')[1].replace(' pages ', ''));
        const pageIndex = pagesTotal - pagesLeft;
        if (pageIndex) {
            pageLeftEl.textContent = `Resume from page ${pageIndex} ┃ ${pageLeftEl.textContent}`;
        }
    } catch(error){
        console.log(error)
    }
}

function getNumber(s) {
    if (!(s?.match)) return;
    let firstNumber = null;
    const match = s.match(/\d+/);
    if (match) {
        firstNumber = parseInt(match[0], 10);
    }
    return firstNumber;
}


function renumber(){
    if ( !location.href.includes('series')){
        return false;
    }
    const volumes = Array.from(document.querySelectorAll(".v-card__subtitle.pa-2.pb-1.text--primary"))
    volumes.forEach((entry, index) => {
        try {
            const volNum = entry.textContent.match(/年(\d+.*?)号/)?.[1];
            if (!volNum) {
                return;
            }
            const orderNumber = entry.textContent.match(/\d+/)?.[0];
            entry.textContent = entry.textContent.replace(orderNumber, volNum)
        } catch(error){
            console.log(error)
        }
    });
}

function getSuffle(){
    const volumes = Array.from(document.querySelectorAll(".v-card__subtitle.pa-2.pb-1.text--primary"))
    const randomChoice = volumes[Math.floor(Math.random() * volumes.length)]
    randomChoice.click();

}

function setShuffleButton() {
    const el = document.getElementById("shuffleBtn")
    if (el) {
        return;
    }
    var x = document.querySelectorAll(".v-toolbar__content > button")
    var randomButton = document.createElement("div");
    randomButton.innerHTML = `<button id="shuffleBtn" data-v-30c644cd="" type="button" class="v-btn v-btn--icon v-btn--round theme--dark v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon"><svg role="presentation" viewBox="0 0 24 24" style=""><title>Shuffle</title><path d="M17,3L22.25,7.5L17,12L22.25,16.5L17,21V18H14.26L11.44,15.18L13.56,13.06L15.5,15H17V12L17,9H15.5L6.5,18H2V15H5.26L14.26,6H17V3M2,6H6.5L9.32,8.82L7.2,10.94L5.26,9H2V6Z" style="fill: currentcolor; --darkreader-inline-fill: currentcolor;" data-darkreader-inline-fill=""></path></svg></i></span></button>`
    const newEl = x[x.length-1].insertAdjacentElement('afterend', randomButton)
    debugger;
   console.log('here')

    newEl.addEventListener("click", getSuffle)
}

function setMissing() {
    if ( !location.href.includes('series/')){
        return false;
    }
    const volumes = Array.from(document.querySelectorAll(".v-card__subtitle.pa-2.pb-1.text--primary"))

    const volsToMark = []
    volumes.forEach((entry, index) => {
        const prevVol = 0;
        if(index > 0){
            let prevVol = volumes[index - 1];
            let currNum = getNumber(entry.textContent)
            let prevNum = getNumber(prevVol.textContent)
            if( currNum - prevNum > 1){
                volsToMark.push(entry);
                entry.style.cssText = 'color:tomato !important';
            }
        }
    });
}

function onPageChange(){
    try {
        setMissing();
    } catch (err) {
        console.log(err);
    }
    try {
        setCount();
    } catch (err) {
        console.log(err);
    }
    try {
        renumber()
    } catch (err) {
        console.log(err);
    }
    try {
        setShuffleButton()
    } catch (err) {
        console.log(err);
    }
    console.log('Finished')
}

function detectPageChange() {
    var previousUrl = '';
    var observer = new MutationObserver(function(mutations) {
        if (location.href !== previousUrl && !location.href.includes("redirect")) {
            previousUrl = location.href;
            console.log(`URL changed to ${location.href}`);
            setTimeout(onPageChange, 500);

        }
    });

    const config = {subtree: true, childList: true};
    observer.observe(document, config);
}

(function() {
    'use strict';

    // Define your custom CSS styles here
    const customStyles = `
        /* Adjust the width of the specified element */
        .v-card.v-card--link.v-sheet.theme--dark.no-link {
            width: 400px !important;
        }

        /* Your additional styles go here */
    `;
    GM_addStyle(customStyles);
    detectPageChange();

})();