Komica: F5 AI優化版

Instant jump to top and fast refresh on F5.

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Komica: F5 AI優化版
// @version      1.1.0
// @description  Instant jump to top and fast refresh on F5.
// @author       Hayao-Gai
// @namespace    https://github.com/HayaoGai
// @icon         https://i.imgur.com/ltLDPGc.jpg
// @match        *://*.komica*.org/*
// @match        *://*.komica1.org/*
// @exclude      *://*.komica1.org/*/src/*
// @exclude      *://*.komica1.org/*/thumb/*
// @exclude      *://*.komica1.org/*/pixmicat.php?mode=module*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    console.log('Komica F5: Script started');

    const redArrow = `
        <svg width="45" height="45" viewBox="0 0 128 128">
            <path fill="#800000" d="M64 10c29.8 0 54 24.2 54 54s-24.2 54-54 54S10 93.8 10 64 34.2 10 64 10zm0 20c-8.3 0-15 6.7-15 15v30l-15-15-7.1 7.1L64 104l37.1-37.1-7.1-7.1-15 15V45c0-8.3-6.7-15-15-15z"/>
        </svg>
    `;

    let ctrl = false;
    let r = false;

    // 使用 requestAnimationFrame 確保初始化在下一個畫面框架
    window.requestAnimationFrame(() => {
        console.log('Komica F5: Window loaded');
        initialize();
    });

    function initialize() {
        console.log('Komica F5: Initializing...');
        try {
            defineCSS();
            createArrowButton();
            setupKeyListeners();
            console.log('Komica F5: Script fully loaded');
        } catch (error) {
            console.error('Komica F5: Initialization Error:', error);
        }
    }

    function createArrowButton() {
        if (!document.body) {
            console.error('Komica F5: document.body not available');
            return;
        }
        const div = document.createElement('div');
        div.classList.add('arrow');
        div.innerHTML = redArrow;
        div.addEventListener('click', fastRefresh, { passive: true });
        document.body.appendChild(div);
        console.log('Komica F5: Arrow button created');
    }

    function fastRefresh() {
        console.log('Komica F5: Initiating fast refresh');
        // 立即跳到頂部
        window.scrollTo({
            top: 0,
            behavior: 'instant' // 確保即時跳轉
        });

        // 添加時間戳避免緩存
        const url = new URL(location.href);
        url.searchParams.set('t', Date.now());

        // 使用 replaceState 避免創建新的歷史記錄
        history.replaceState(null, '', url);
        location.reload(true); // true 強制從服務器重新加載
    }

    function setupKeyListeners() {
        document.addEventListener('keydown', (e) => {
            if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
                console.log('Komica F5: Refresh key detected');
                e.preventDefault();
                fastRefresh();
            }
        }, { passive: false });
    }

    function defineCSS() {
        const style = document.createElement('style');
        style.textContent = `
            .arrow {
                position: fixed;
                right: 50px;
                bottom: 30px;
                cursor: pointer;
                z-index: 9999;
                width: 45px;
                height: 45px;
                background-color: rgba(255, 255, 255, 0.8);
                border-radius: 50%;
                touch-action: manipulation; /* 優化移動端響應 */
            }
            .arrow svg {
                width: 100%;
                height: 100%;
                display: block;
            }
        `;
        document.head.appendChild(style);
        console.log('Komica F5: CSS defined');
    }
})();