Chrome扩展：document.onkeyup在动态添加元素上无法触发的问题

我正在开发一款可作用于任意网站的小型Chrome扩展，需求是捕获页面任意位置的按键事件（无需监听textarea或input内操作），但遇到了问题：当用户选中动态创建的元素时，onkeyup事件无法触发。

例如在Gmail中，点击“撰写”弹出新邮件编辑器后，编辑器内的按键操作无法被记录，但页面其他区域的按键监听正常。

我的基础代码如下：

// Wait until everything is loaded
window.addEventListener('load', function () {
    // listen for any key presses on the body
    document.body.onkeyup = function (e) {
        console.log(e);
    };
});

我需要一种能适配任意网站的方案，无需知晓元素添加的时机和方式，确保按键监听对所有动态元素生效。

解决方法 #

问题的核心在于直接给document.body绑定onkeyup的方式存在两个缺陷：一是部分动态元素会阻止事件冒泡到body，二是直接赋值onkeyup容易被页面脚本覆盖。

正确的实现方式：

1. 将事件绑定到**document**（所有元素的根节点），确保事件冒泡最终能被捕获
2. 使用addEventListener而非直接赋值事件处理函数，避免被覆盖
3. 增加逻辑排除textarea和input的按键事件

修改后的代码：

// 直接绑定到document，无需等待window.load
document.addEventListener('keyup', function(e) {
    // 排除INPUT和TEXTAREA标签内的按键操作
    const excludedTags = ['INPUT', 'TEXTAREA'];
    if (!excludedTags.includes(e.target.tagName)) {
        console.log(e);
    }
});

原理：利用DOM事件冒泡机制，即使是动态创建的元素，只要没有完全阻断事件冒泡，按键事件最终会传递到document层面，从而实现全局监听的效果。

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