Chrome扩展Content Script在Notion页面中粘贴事件阻止失效求助

问题背景 #

开发Chrome扩展的content script时，在Notion页面内的输入框遇到以下问题：

• 初始问题：按下退格/删除键时，输入框和Notion页面内容会同时被删除，通过在keydown事件中阻止传播解决。
• 当前问题：按下Ctrl+V/Cmd+V时，文本会被粘贴到Notion页面而非输入框内。尝试在keydown事件中阻止粘贴快捷键的传播，控制台能输出日志，但粘贴行为仍未恢复正常。

原因分析 #

Notion并非仅通过keydown事件处理粘贴操作，它还监听了paste事件来接管页面内的粘贴行为。仅在keydown中阻止事件传播，无法阻止paste事件冒泡到Notion的监听逻辑，导致文本仍被粘贴到Notion页面。

解决方案 #

需要同时处理keydown和paste两个事件，彻底隔离Notion的事件监听：

1. 在keydown事件中阻止粘贴快捷键的事件传播。
2. 监听输入框的paste事件，手动获取粘贴内容并插入到输入框，同时阻止事件传播和默认行为。

代码实现 #

export const onKeyDown = (evt: React.KeyboardEvent) => {
  // 处理退格键，阻止事件传播到Notion
  if (evt.key === 'Backspace') {
    evt.stopPropagation();
  }
  // 处理粘贴快捷键（Ctrl+V/Cmd+V）
  if ((evt.ctrlKey || evt.metaKey) && evt.key.toLowerCase() === 'v') {
    evt.stopPropagation();
  }
};

export const onPaste = (evt: React.ClipboardEvent) => {
  // 阻止事件传播，避免Notion捕获paste事件
  evt.stopPropagation();
  // 阻止默认粘贴行为，避免浏览器直接将内容粘贴到Notion
  evt.preventDefault();
  
  // 手动获取粘贴板文本内容
  const pasteText = evt.clipboardData?.getData('text') || '';
  const inputElement = evt.target as HTMLInputElement;
  
  // 将文本插入到输入框的光标位置
  const startPos = inputElement.selectionStart;
  const endPos = inputElement.selectionEnd;
  const currentValue = inputElement.value;
  
  inputElement.value = `${currentValue.substring(0, startPos)}${pasteText}${currentValue.substring(endPos)}`;
  // 调整光标到粘贴文本的末尾
  inputElement.selectionStart = inputElement.selectionEnd = startPos + pasteText.length;
};

组件绑定示例 #

在React输入框组件中同时绑定两个事件：

<input 
  type="text"
  onKeyDown={onKeyDown}
  onPaste={onPaste}
/>

额外说明 #

• 避免使用已废弃的keyCode，改用evt.key判断按键，兼容性更好。
• 手动处理粘贴内容是为了确保输入框能正确捕获文本，同时完全切断Notion对粘贴事件的干扰。

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