Chrome扩展keydown事件问题：退格键捕获异常

核心问题修复 #

你遇到的问题是因为keydown事件触发后，浏览器会立即执行退格的默认行为（删除字符），导致你后续获取innerText时已经是修改后的内容。要在删除前拿到原始文本，需要先阻止默认行为，再手动处理内容：

function keyDown(event) {
  // 只在可编辑元素上触发（input/textarea/contenteditable）
  const target = event.srcElement;
  if (!['INPUT', 'TEXTAREA'].includes(target.tagName) && !target.isContentEditable) {
    return;
  }

  if (event.key === "Backspace") {
    // 1. 先获取删除前的原始文本
    const originalText = target.innerText;
    // 2. 阻止浏览器默认退格行为
    event.preventDefault();

    // 3. 这里执行你的自定义逻辑（比如切换用户输入内容）
    // 示例：模拟退格删除最后一个字符（替换成你的业务逻辑）
    const modifiedText = originalText.slice(0, -1);
    target.innerText = modifiedText;

    // 4. 修复光标位置（手动修改文本后光标会跑到开头）
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(target);
    range.collapse(false); // 光标移到文本末尾
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

document.addEventListener("keydown", keyDown);

代码里的其他优化建议 #

1. 移除无用监听避免内存泄漏：扩展卸载或页面关闭时，记得移除事件监听：

// 在页面卸载时清除监听
window.addEventListener('beforeunload', () => {
  document.removeEventListener("keydown", keyDown);
});

2. 缓存存储数据减少性能损耗：你现在每次按键都调用chrome.storage.sync.get，可以初始化时缓存一次，再监听存储变化更新缓存：

let emojiMap = {};

// 初始化获取存储数据
chrome.storage.sync.get('emojiMap', (result) => {
  emojiMap = result.emojiMap || {};
});

// 监听存储变化自动更新缓存
chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'sync' && changes.emojiMap) {
    emojiMap = changes.emojiMap.newValue;
  }
});

3. 完善可编辑元素判断：当前代码没有区分可编辑元素，会在按钮、普通div等不可编辑元素上触发事件，浪费性能，上面的核心修复代码已经加了判断，可以直接复用。

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