如何用Tampermonkey为指定按钮添加accesskey快捷键？

完整Tampermonkey脚本 #

直接使用下面的脚本，根据目标网站调整匹配规则即可：

// ==UserScript==
// @name         给Spectate按钮加Alt+K快捷键
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  为id=spectate的按钮设置accesskey="k"，支持快捷键触发点击
// @author       自定义作者名
// @match        *://your-target-site.com/*  // 替换成目标网站的完整URL规则
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 优先尝试直接获取按钮
    let spectateBtn = document.getElementById('spectate');
    if (spectateBtn) {
        spectateBtn.accessKey = 'k';
        console.log("已为Spectate按钮绑定accesskey='k'");
        return;
    }

    // 如果按钮是动态生成的，用MutationObserver监听
    const observer = new MutationObserver((mutations) => {
        spectateBtn = document.getElementById('spectate');
        if (spectateBtn) {
            spectateBtn.accessKey = 'k';
            observer.disconnect();
            console.log("动态元素已找到，绑定accesskey='k'完成");
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

关键说明 #

1. 调整匹配规则：把@match后的*://your-target-site.com/*替换成你要操作的网站URL，比如目标网站是https://game.example.com/lobby，就写成https://game.example.com/lobby*，确保脚本只在目标页面运行。
2. 两种适配场景：
   • 脚本先尝试直接查找按钮，适合页面静态加载按钮的场景
   • 如果按钮是异步加载（比如通过AJAX生成），会自动启用MutationObserver监听，找到元素后立即绑定并停止监听
3. 浏览器快捷键差异：不同浏览器的accesskey触发组合键不同，别踩坑：
   • Windows/Linux：
     • Chrome/Edge：Alt + Shift + K
     • Firefox：Alt + K
   • Mac：
     • Chrome/Edge/Safari：Ctrl + Alt + K
     • Firefox：Ctrl + Option + K

为什么原代码可能不生效？ #

你原来的DOMContentLoaded事件监听在Tampermonkey环境中可能时机不对——脚本可能在DOMContentLoaded触发后才开始运行，导致代码执行时按钮还没被找到。用@run-at document-idle可以确保脚本在页面大部分资源加载完成后执行，配合动态监听能覆盖绝大多数场景。

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