使用油猴脚本实现一键开启或关闭自动刷新网页

介绍

一般情况下，我们不会有这个自动刷新浏览器网页的需求，但以前实习的时候，也确实遇到过这种需求。正好这几天写的博客都跟油猴脚本多少有点关系，就想试着写写看。

如果是让网页一直不停的刷新，那么实现起来太简单了，但使用体验肯定不会好。我对这个脚本的基本要求是：

1. 能设置刷新时间，并提供一个可以生成随机刷新时间的方法。
2. 能有一个提示信息，也就是一个简单的提示弹窗，提示当前的状态【是否开启了自动刷新功能？多少秒后开始刷新网页？】，一段时间后自动消失。
3. 能匹配到所有网页地址，也就是在所有网页上都生效。
4. 能使用快捷键来控制是否进行自动刷新，并且，只使用一个快捷键。如果一个脚本就占用两个快捷键的话，使用起来的体验并不好，增加了记忆负担。

后面我会提供完整的脚本代码，你直接复制过去使用即可。我的脚本使用的是 Ctrl + Alt + r 这个自定义快捷键来开启或关闭网页的自动刷新。默认情况下，我是使用的 5秒 到 10 秒 这个时间段中的一个随机时间来刷新网页。

你或许应该想到了，要实现我说的这些功能，只使用以前定义变量的方式是行不通的，因为一旦网页自动刷新后，这个变量的状态就丢失了，下次执行这个脚本的时候，这个变量就又变成初始值了。

所以，想要实现我说的那些功能就需要使用到 localStorage 技术，但前面也说了，这个脚本要适用于所有网页，所以，如果是在 100 个网页上都执行过这个脚本，那么这 100 个网页上都会被设置一个用于判断是否在自动刷新网页的本地存储内容。如果以后不再打开这些网页，那么这个脚本就会产生垃圾。虽然清除浏览器缓存可以将这些内容删掉。但还是要将这个自动删除的功能考虑进来。我下方提供的脚本代码已经实现了这个自动删除的功能，所以，你可以发现使用，它不会产生垃圾。

完整代码

使用下面这个代码，你只需要在自己的浏览器的油猴脚本管理器中新建一个脚本，然后复制下方的内容替换掉油猴默认生成的内容即可。

// ==UserScript==
// @name         Toggle 网页自动刷新
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  通过 Ctrl + Alt + r 快捷键控制网页自动刷新，再次按下停止刷新，支持动态设置刷新时间和提示信息显示。
// @author       王某人
// @run-at       document-end
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // 最小刷新时间（毫秒）
    const minTime = 5000;
    // 最大刷新时间（毫秒）
    const maxTime = 10000;

    // 生成一个随机的刷新时间，范围在minTime和maxTime之间
    function generateTime(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 默认刷新时间为5秒
    // let refreshTime = 5000;
    // 使用随机时间生成函数，如果想要固定时间，可以直接设置refreshTime值
    let refreshTime = generateTime(minTime, maxTime);

    let timer;
    let autoRefreshActive = localStorage.getItem('autoRefreshActive') === 'true';

    // 显示提示信息
    function showToast(message) {
        const toast = document.createElement('div');
        toast.textContent = message;
        toast.style.position = 'fixed';
        toast.style.top = '20px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.padding = '10px 20px';
        toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        toast.style.color = 'white';
        toast.style.borderRadius = '5px';
        toast.style.fontSize = '24px';
        toast.style.zIndex = '9999';
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.remove();
        }, 2000);
    }

    function startAutoRefresh() {
        // 如果已经在定时中则返回
        if (timer) return;
        timer = setInterval(() => {
            location.reload();
        }, refreshTime);
        showToast(`网页将在 ${refreshTime / 1000} 秒后自动刷新`);
    }

    function stopAutoRefresh() {
        clearInterval(timer);
        timer = null;
        showToast('已关闭自动刷新');
    }

    // 初始状态处理
    if (autoRefreshActive) {
        startAutoRefresh();
    } else {
        showToast('未开启自动刷新网页！');
        console.log('未开启自动刷新网页！');
    }

    document.addEventListener('keydown', function (event) {
        if (event.ctrlKey && event.altKey && event.key === 'r') {
            autoRefreshActive = !autoRefreshActive; // 切换状态
            localStorage.setItem('autoRefreshActive', autoRefreshActive);
            if (autoRefreshActive) {
                // 如果是固定时间，则注释这行代码
                refreshTime = generateTime(minTime, maxTime); // 每次启用时重新生成刷新时间
                startAutoRefresh();
            } else {
                stopAutoRefresh();
            }
        }
    });

    window.onbeforeunload = function () {
        // 开启自动刷新的情况下，不执行删除
        if (!autoRefreshActive) {
            localStorage.removeItem('autoRefreshActive');
        }
    };
})();

注意事项

原本是准备写写代码解释的，但写了一些内容后，发现要解释的东西有点太多了，三言两语解释不清楚，索性就删掉了，反正这个脚本基本功能都完善了，拿过来就可以用 ，基本不需要修改什么。所以，就讲讲一些注意事项吧。

首先就是快捷键，我默认设置的快捷键是 Ctrl + Alt + r ，原因有两个吧：一个是因为浏览器默认好像没有占用这个快捷键，另外就是字母 r 可以记成是 refresh 或者 reload ，比较好记忆。浏览器有很多刷新网页的方法，比如下图中的快捷键：这张图片是打开开发者工具，然后打开开发者工具中的设置界面中找到的。

如果你要修改成你自己的快捷键，那么就找到这行代码进行修改即可： if (event.ctrlKey && event.altKey && event.key === 'r') {。如果要使用类似 F5 这样的快捷键来刷新网页的话，应该还需要加上这行代码 event.preventDefault(); 。

然后，如果你直接复制了我的代码，保存并去别的网页测试自动刷新的时候，如果那个网页已经在油猴加载前就打开了，那么需要先刷新下网页。刷新网页的时候，或者新进入一个网页的时候，你会发现它默认就会有一个提示，提示的内容是：“未开启自动刷新网页！”，我留着这个提示主要的目的就是让你们在第一次运行的时候知道这个脚本已经成功运行了。你可以在代码中找到这行代码，删掉它或者注释掉即可去掉这个提示：showToast('未开启自动刷新网页！'); 。

如果需要将这个脚本设置为固定时间自动刷新的话，那么你只需要跟着代码中的中文注释部分的内容来自行修改即可，其实就是对 refreshTime 这个变量的赋值操作而已。

想要修改提示信息的样式，直接找到 showToast 这个 function 的定义位置，按照自己的审美修改即可。另外，我没有给这脚本添加图标，要是有这方面的需求，就使用 // @icon 自行添加吧。

哦，还有一个，如果你给一个网页开启了自动刷新，但后面又切换到别的标签页去了，如果不需要再自动刷新网页了，记得要再在那个网页上执行一次快捷键，关闭自动刷新，否则它还会在后台一直刷新下去。