前言

由于笔者最近遇到的某些网站如果不进行页面操作的话，很容易自动退出登录，故想到利用浏览器的油猴插件设计一个油猴脚本来进行自动定期刷新页面即可解决，求问GPT后，发现这种简单的小问题根本难不倒GPT，效率和效果都非常明显，这种强大的良心AI且用且珍惜吧。

操作过程

首先简单问了一下，GPT正常给出结果，也能正常使用，提问如下：

然后开始提一些个性化需求，需求如下：

最后给出的代码如下：

// ==UserScript==
// @name         Auto Refresh with Custom Interval
// @namespace    http://tampermonkey.net/
// @version      1.1.240826
// @description  Automatically refresh a webpage at a user-defined interval.
// @author       2act and chatgpt-4.0
// @match        https://whatever/*
// @match        https://dz.sfnote.com/*/life
// @grant        none
// @run-at       document-end
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function($) {
    'use strict';

    const Q = $.noConflict(true);
    let reloadTimeout = 0;
    let countdownInterval = 0;

    // Create the message div
    let messageDiv = document.createElement('div');
    messageDiv.style.position = 'fixed';
    messageDiv.style.top = '0';
    messageDiv.style.left = '50%';
    messageDiv.style.transform = 'translateX(-50%)';
    messageDiv.style.backgroundColor = '#f0ad4e';
    messageDiv.style.color = '#fff';
    messageDiv.style.padding = '10px';
    messageDiv.style.zIndex = '10001';
    messageDiv.style.display = 'none';
    messageDiv.innerHTML = `
        <span id="messageText">Plugin loaded but no refresh set</span>
        <button id="closeMessage" style="background:none;border:none;color:white;float:right;">&times;</button>
    `;
    document.body.appendChild(messageDiv);

    // Close message when the close button is clicked
    Q('#closeMessage').on('click', function() {
        Q(messageDiv).slideUp();
    });

    // Show the message div
    function showMessage(text) {
        Q('#messageText').text(text);
        Q(messageDiv).slideDown();
        setTimeout(() => {
            Q(messageDiv).slideUp();
        }, 5000); // Hide after 5 seconds
    }

    // Create a panel for setting the refresh interval
    let panel = document.createElement('div');
    panel.style.position = 'fixed';
    panel.style.bottom = '5px';
    panel.style.right = '10px';
    panel.style.backgroundColor = '#f9f9f9';
    panel.style.border = '1px solid #ccc';
    panel.style.padding = '5px';
    panel.style.zIndex = '10000';
    panel.innerHTML = `
        <label for="refreshInterval">Set refresh interval (seconds):</label>
        <input type="number" id="refreshInterval" min="5" step="5" value="${localStorage.getItem('refreshInterval') || 60}">
        <button id="setRefresh">Set</button>
        <button id="stopRefresh">Stop</button>
    `;
    document.body.appendChild(panel);

    // Function to start the auto refresh
    function startRefresh(interval) {
        stopRefresh(); // Stop any existing intervals

        panel.style.backgroundColor = '#f9f9f9';
        updatePanelText(interval); // Update the panel text with the countdown

        let countdown = interval;
        countdownInterval = setInterval(() => {
            countdown--;
            updatePanelText(countdown);
            if (countdown <= 0) {
                clearInterval(countdownInterval);
            }
        }, 1000);

        if (interval > 0) {
            localStorage.setItem('refreshInterval', interval);
            reloadTimeout = setTimeout(() => location.reload(), interval * 1000);
            showMessage("Refresh set successfully");
        }
    }

    // Function to update the panel text with the countdown
    function updatePanelText(seconds) {
        panel.querySelector('label').textContent = `Refresh in ${seconds} seconds`;
    }

    // Function to stop the auto refresh
    function stopRefresh() {
        localStorage.removeItem('refreshInterval');
        // clear Interval and Timeout
        clearTimeout(reloadTimeout);
        clearInterval(countdownInterval);
        panel.querySelector('label').textContent = 'Set refresh interval (seconds):';
        panel.style.backgroundColor = '#f9f9f9';
        showMessage("Auto-refresh stopped");
    }

    // Set the event listener for the buttons
    document.getElementById('setRefresh').addEventListener('click', () => {
        let interval = parseInt(document.getElementById('refreshInterval').value, 10);
        if (isNaN(interval) || interval < 5) {
            alert('Please enter a valid interval (minimum 5 seconds).');
        } else {
            startRefresh(interval);
        }
    });

    document.getElementById('stopRefresh').addEventListener('click', () => {
        stopRefresh();
    });

    // Check if there's a stored interval and start the refresh if valid
    let storedInterval = parseInt(localStorage.getItem('refreshInterval'), 10);
    if (!isNaN(storedInterval) && storedInterval > 0) {
        startRefresh(storedInterval);
    } else {
        // Show initial message if no refresh is set
        showMessage("Plugin loaded but no refresh set");
    }


})(jQuery);

上述代码是我小改后的，刚开始是有一个很自然的bug的：点击Stop后并没有清除掉设置的Timeout和改变面板文字的Interval，但也无伤大雅，毕竟追着GPT问它也能改好。