Comic viewer restore

Show comic, removes the upsell overlay, and restores page scrolling.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name               Comic viewer restore
// @namespace          https://greasyfork.org/users/821661
// @version            0.2.1
// @description        Show comic, removes the upsell overlay, and restores page scrolling.
// @author             hdyzen
// @match              https://www.gocomics.com/*
// @run-at             document-start
// @icon               https://www.google.com/s2/favicons?domain=www.gocomics.com
// @grant              none
// @license            MIT
// @noframes
// ==/UserScript==

const comics = new Map();

Response.prototype.json = new Proxy(Response.prototype.json, {
    async apply(target, thisArg, argArray) {
        const result = await Reflect.apply(target, thisArg, argArray);

        const isArray = Array.isArray(result);
        if (isArray && result[0]?.url) {
            comics.set(location.pathname, result[0]);
        }

        return result;
    },
});

const observer = new MutationObserver(() => {
    const comicViewer = document.querySelector('[class*="showComicViewer__skeleton"]:not([data-processed])');
    if (!comicViewer) return;

    const comic = comics.get(location.pathname);
    if (!comic) return;
    comicViewer.dataset.processed = true;

    observer.disconnect();
    comicViewer.innerHTML = `<img class="comic-image" src="${comics.get(location.pathname)?.url}">`;
    observer.observe(document.documentElement, { childList: true, subtree: true });
});

observer.observe(document.documentElement, { childList: true, subtree: true });

const style = document.createElement("style");
style.textContent = `
    [class*='upsell'] { display: none !important }
    html, body { overflow: auto !important; position: initial !important }
    .comic-image { background-color: #1f1b19; }
    `;
document.documentElement.append(style);