Tampermonkey脚本在浏览器后退时失效的解决方案

问题现象分析

在使用Tampermonkey浏览器扩展时，用户可能会遇到一个常见问题：当通过浏览器后退按钮返回之前访问过的页面时，原本应该在该页面上运行的Tampermonkey脚本不再生效。这种现象通常发生在单页应用(SPA)或使用软导航(soft navigation)的网站上，比如Twitter/X等现代Web应用。

技术原理剖析

这种现象的根本原因在于现代Web应用的导航机制与传统网站不同：

1. 硬导航 vs 软导航：传统网站使用硬导航(hard navigation)，即每次页面跳转都会触发完整的页面加载；而现代Web应用多采用软导航(programmatic navigation)，通过JavaScript动态更新页面内容而不重新加载整个页面。

2. Tampermonkey脚本加载机制：Tampermonkey脚本只在硬导航时才会加载执行。当用户通过后退按钮返回页面时，如果网站使用的是软导航机制，Tampermonkey脚本不会被重新加载。

解决方案

方法一：扩大匹配范围并添加路径检查

// 修改前
// @match https://x.com/yugiohmemories

// 修改后
// @match https://x.com/*

setInterval(function(){
  if (window.location.pathname !== "/yugiohmemories") return;
  window.location.href = window.location.href;
}, 30*1000);

这种方法通过扩大脚本的匹配范围，使其在整个域名下都生效，然后通过代码检查当前路径是否为需要自动刷新的特定页面。

方法二：添加手动刷新按钮

function addButton() {
    const btn = document.createElement("button");
    btn.textContent = "Init reloading";
    btn.style = `
        position: fixed;
        top: 10px;
        left: calc(50vw - 500px);
        z-index: 1000;
    `;
    btn.onclick = () => {
        btn.remove();
        startReloading();
    };
    document.body.append(btn);
}

function startReloading() {
    sessionStorage.reloadUrl = window.location.href;
    setTimeout(() => {
        if (sessionStorage.reloadUrl === window.location.href) {
            window.location.reload();
        } else {
            addButton();
        }
    }, 30_000);
}

这种方法提供了更好的用户体验，允许用户在需要时手动启动自动刷新功能。

方法三：通用自动刷新解决方案

const reloadPages = {
    "https://x.com/buitengebieden": 5,
    "https://example.com/exact-url$": 5
};

const regExps = Object.entries(reloadPages).map(([reg, time]) => [new RegExp(reg, "i"), time*1000]);

let timer;
function check() {
    clearTimeout(timer);
    for (const [reg, time] of regExps) {
        if (reg.test(window.location.href)) {
            timer = setTimeout(() => window.location.reload(), time);
            return;
        }
    }
}

check();
window.onurlchange = check;

这是一个更通用的解决方案，可以配置多个需要自动刷新的页面及其刷新间隔，利用window.onurlchange事件来检测URL变化。

最佳实践建议

1. 合理设置@match规则：对于现代Web应用，建议使用更宽泛的匹配模式，如https://example.com/*，然后在脚本内部进行精确的URL检查。

2. 利用浏览器API：可以使用window.onurlchange事件(需要Tampermonkey的@grant window.onurlchange权限)来检测URL变化，及时执行需要的操作。

3. 考虑用户体验：自动刷新功能可能会影响用户体验，建议提供可视化反馈或允许用户控制刷新行为。

4. 性能优化：在实现自动刷新功能时，注意清除旧的定时器，避免内存泄漏和性能问题。

通过理解Tampermonkey脚本的加载机制和现代Web应用的导航特性，开发者可以编写出更健壮的用户脚本，解决后退时脚本失效的问题。