如何在不同网站结构下复用UserScript用户脚本代码？

问题 #

我想给带分页功能的网站加个快捷键：按左方向键跳上一页，右方向键跳下一页。目前已经给单个网站实现了功能，但每个网站HTML结构不一样，复制脚本改@match和选择器的方式完全违反DRY原则。试过通过文本匹配"Next"/"Prev"这类链接，但有些网站用"Previous"或"Back"甚至中文表述，通用性不够。想知道火狐Tampermonkey里解决这个问题的惯用方案。

惯用解决方案 #

1. 站点映射表方案（最常用） #

写一个全局匹配的脚本，内置站点选择器映射表，根据当前域名自动匹配对应的上/下页选择器，核心思路如下：

• 脚本@match设为*://*/*，覆盖所有网站
• 定义一个映射对象，键是域名（比如example.com），值是包含prevSelector和nextSelector的配置项
• 运行时获取当前域名，匹配到对应配置就绑定键盘事件

示例代码：

// ==UserScript==
// @name         全局分页快捷键
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  方向键跳转上/下页，支持多站点配置
// @author       You
// @match        *://*/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

// 站点配置映射表：域名 -> 选择器配置
const siteConfigs = {
    "example.com": {
        prevSelector: ".pagination.prev",
        nextSelector: ".pagination.next"
    },
    "another-site.org": {
        prevSelector: "#prev-page",
        nextSelector: "#next-page"
    },
    // 可继续添加更多站点
};

// 获取当前域名
const currentDomain = window.location.hostname;
const config = siteConfigs[currentDomain];

if (config) {
    document.addEventListener("keydown", (e) => {
        // 左箭头：上一页
        if (e.key === "ArrowLeft") {
            const prevBtn = document.querySelector(config.prevSelector);
            prevBtn?.click();
        }
        // 右箭头：下一页
        if (e.key === "ArrowRight") {
            const nextBtn = document.querySelector(config.nextSelector);
            nextBtn?.click();
        }
    });
}

2. 增强版文本匹配方案 #

针对没配置的站点，补充文本匹配逻辑，覆盖常见的上/下页文本（Prev/Previous/Back/Next/上一页/前一页等），作为兜底方案，能兼容大部分无特殊结构的分页：

示例代码（可和映射表方案结合）：

// 兜底的文本匹配逻辑
function findPaginationButtons() {
    const prevTexts = ["prev", "previous", "back", "上一页", "前一页"];
    const nextTexts = ["next", "下一页", "后一页"];
    
    let prevBtn = null;
    let nextBtn = null;

    // 遍历所有链接和按钮
    document.querySelectorAll("a, button").forEach(el => {
        const text = el.textContent.trim().toLowerCase();
        if (!prevBtn && prevTexts.some(t => text.includes(t))) {
            prevBtn = el;
        }
        if (!nextBtn && nextTexts.some(t => text.includes(t))) {
            nextBtn = el;
        }
    });

    return { prevBtn, nextBtn };
}

// 映射表没匹配到就启用兜底逻辑
if (!config) {
    const { prevBtn, nextBtn } = findPaginationButtons();
    if (prevBtn || nextBtn) {
        document.addEventListener("keydown", (e) => {
            if (e.key === "ArrowLeft") prevBtn?.click();
            if (e.key === "ArrowRight") nextBtn?.click();
        });
    }
}

3. Tampermonkey用户配置（进阶可选） #

如果不想硬编码映射表，可利用Tampermonkey的GM_getValue和GM_setValue存储站点配置，甚至加个简单界面让用户手动添加站点选择器，不过这种方式复杂度较高，适合有进阶需求的场景。

内容的提问来源于stack exchange，提问作者Daniel Kaplan