Chrome扩展开发：如何避免网站抢占输入框快捷键事件

以下是几种可行的解决方案，按实现复杂度和有效性排序：

• 利用事件捕获阶段优先拦截
  浏览器事件流分为捕获、目标、冒泡三个阶段，网站的快捷键监听通常在冒泡阶段触发。我们可以在捕获阶段给模态框或输入框绑定事件，提前拦截并阻止事件传播到网站的监听函数。

  // 给模态框容器添加捕获阶段的按键监听
  const modalContainer = document.getElementById('your-modal-container');
  modalContainer.addEventListener('keydown', (e) => {
    const activeEl = document.activeElement;
    // 判断当前焦点是否在可输入元素内
    const isInputElement = ['INPUT', 'TEXTAREA'].includes(activeEl.tagName) || activeEl.isContentEditable;
    if (isInputElement) {
      e.stopPropagation(); // 阻止事件继续向上传播
    }
  }, true); // 第三个参数true开启捕获阶段触发
  

• 直接给输入框绑定事件阻止冒泡
  如果只需要针对特定输入框，直接给输入框绑定keydown事件，阻止事件冒泡到上层元素，避免网站的全局监听器捕获到事件。

  const inputField = document.getElementById('your-input-field');
  inputField.addEventListener('keydown', (e) => {
    e.stopPropagation();
  });
  

• 模态框显示时全局拦截网站快捷键
  当模态框处于显示状态时，在document层面的捕获阶段拦截所有按键事件，仅允许输入框相关的事件正常处理：

  let isModalOpen = false;
  const modal = document.getElementById('your-modal');
  
  // 监听模态框的显示/隐藏状态
  modal.addEventListener('show', () => isModalOpen = true);
  modal.addEventListener('hide', () => isModalOpen = false);
  
  // 全局捕获按键事件
  document.addEventListener('keydown', (e) => {
    if (isModalOpen) {
      const activeEl = document.activeElement;
      const isInputElement = ['INPUT', 'TEXTAREA'].includes(activeEl.tagName) || activeEl.isContentEditable;
      if (isInputElement) {
        e.stopPropagation();
        // 若网站有通过默认行为实现的快捷键，可按需添加e.preventDefault()
      }
    }
  }, true);
  

• 使用stopImmediatePropagation阻止同元素后续监听器
  如果网站在同一元素上绑定了多个事件监听器，stopImmediatePropagation()可以阻止当前元素上后续注册的监听器触发。需要确保你的扩展监听器是第一个被注册的：

  document.addEventListener('keydown', (e) => {
    const activeEl = document.activeElement;
    if (['INPUT', 'TEXTAREA'].includes(activeEl.tagName) || activeEl.isContentEditable) {
      e.stopImmediatePropagation();
    }
  }, true);
  

注意事项 #

• 确保扩展的内容脚本注入时机正确，建议使用document_end或document_idle，保证模态框元素已存在后再绑定事件。
• 针对不同网站可能需要微调判断逻辑，比如某些网站的可编辑区域可能用了自定义标签，需要补充判断条件。

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