Chrome扩展热键问题：切换标签/窗口时未移除body类的解决方法

你当前的代码存在两个关键问题：

1. 类名不匹配：按下Alt键时添加的是key-pressed类，但释放时尝试移除的是op-key-pressed类，正常场景下都无法正确移除样式。
2. 未处理页面失焦场景：切换标签、窗口或点击开发者工具时，当前页面不会触发keyup事件，导致类名残留。

修复方案 #

通过监听页面可见性变化和窗口失焦事件，结合统一的状态重置逻辑，确保任何场景下都能及时移除目标类：

let showing = false;

function keydown(evt) {
    if (evt.altKey && !showing) {
        document.body.classList.add('key-pressed');
        showing = true;
    }
}

function keyup(evt) {
    if (evt.key === 'Alt') {
        resetState();
    }
}

// 统一重置状态的函数
function resetState() {
    showing = false;
    document.body.classList.remove('key-pressed');
}

// 监听页面可见性变化（切换标签、窗口最小化等场景触发）
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        resetState();
    }
});

// 监听窗口失焦（点击开发者工具、其他应用窗口等场景触发）
window.addEventListener('blur', resetState);

// 绑定原有按键事件
document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);

关键逻辑说明 #

• visibilitychange事件：当页面从可见状态变为隐藏（如切换标签页、窗口最小化）时，强制重置状态。
• blur事件：当浏览器窗口失去焦点（如点击桌面、其他应用、开发者工具面板）时，立即执行状态重置。
• 抽离resetState函数：避免重复代码，同时保证所有场景下的状态处理逻辑一致。

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