如何在空白HTML中按指定按键切换背景色并支持浏览器失焦触发

核心功能实现（页面获焦时） #

以下代码可实现按下字母A在红色/绿色背景间切换，且刷新页面后颜色状态保持不变：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按键切换背景色</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            transition: background-color 0.3s ease;
        }
    </style>
</head>
<body>
    <script>
        // 从本地存储读取当前颜色，默认红色
        let currentColor = localStorage.getItem('bgColor') || 'red';
        document.body.style.backgroundColor = currentColor;

        // 监听键盘按下事件
        window.addEventListener('keydown', (e) => {
            // 匹配字母A（大小写都触发）
            if (e.key.toLowerCase() === 'a') {
                // 切换颜色
                currentColor = currentColor === 'red' ? 'green' : 'red';
                document.body.style.backgroundColor = currentColor;
                // 保存到本地存储
                localStorage.setItem('bgColor', currentColor);
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• 颜色持久化：用localStorage存储当前背景色，页面刷新或重新打开时自动加载上次状态
• 按键兼容：通过e.key.toLowerCase()确保大小写A都能触发切换
• 平滑过渡：CSS添加transition属性让颜色切换更自然

失焦场景的实现限制与解决方案 #

标准浏览器出于安全策略，网页在未获得焦点时无法监听全局键盘事件（防止恶意网站窃取用户输入）。若需在浏览器窗口失焦（如切换到其他应用）时也能触发功能，只能通过浏览器扩展实现：

1. 开发浏览器扩展（以Chrome为例），用chrome.commands API注册全局快捷键（如字母A）
2. 扩展后台监听快捷键触发事件，通过chrome.tabs.sendMessage向目标页面发送消息
3. 页面添加扩展消息监听，收到消息后执行颜色切换逻辑

示例扩展核心代码：

• manifest.json（需声明权限）：

{
    "manifest_version": 3,
    "name": "背景色切换快捷键",
    "version": "1.0",
    "permissions": ["tabs"],
    "commands": {
        "toggle-bg-color": {
            "suggested_key": {
                "default": "A"
            },
            "description": "切换背景色"
        }
    },
    "background": {
        "service_worker": "background.js"
    }
}

• background.js：

chrome.commands.onCommand.addListener((command) => {
    if (command === 'toggle-bg-color') {
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
            chrome.tabs.sendMessage(tabs[0].id, {action: 'toggleColor'});
        });
    }
});

• 页面新增消息监听（插入原有JS代码中）：

chrome.runtime.onMessage.addListener((request) => {
    if (request.action === 'toggleColor') {
        currentColor = currentColor === 'red' ? 'green' : 'red';
        document.body.style.backgroundColor = currentColor;
        localStorage.setItem('bgColor', currentColor);
    }
});

注意：扩展需用户手动安装授权，且全局快捷键不能与系统或其他应用快捷键冲突。

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