Chrome扩展开发求助：随机文本插入功能失效排查

你的代码存在几个关键问题导致无法正常工作，具体修复方案如下：

关键问题分析 #

• Tab键默认行为未阻止：按下Tab时浏览器会默认切换焦点，插入逻辑还没执行就被打断。
• 可编辑元素覆盖不全：只处理了input[type='text']，忽略了<textarea>和富文本编辑区（contenteditable="true"的元素）。
• 错误操作所有文本框：代码会给页面所有文本框插入内容，而非用户当前聚焦的编辑元素。
• 事件可能被网站拦截：部分网站的键盘事件监听优先级更高，导致你的事件无法触发。

修复后的代码 #

manifest.json（移除无用的background配置） #

{
    "manifest_version": 3,
    "name": "随机文本插入器",
    "version": "1.0",
    "description": "按下Tab键时，将随机文本插入当前编辑的文本框或富文本区域",
    "permissions": ["activeTab"],
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      }
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
}

content.js（核心逻辑修复） #

const words = ["apple", "banana", "orange", "grape", "pineapple"];

document.addEventListener("keydown", function (event) {
  // 仅处理未按住修饰键的Tab键，避免干扰正常组合键操作
  if (event.key === "Tab" && !event.ctrlKey && !event.shiftKey && !event.altKey) {
    // 阻止Tab默认切换焦点行为，拦截事件传播避免被网站覆盖
    event.preventDefault();
    event.stopPropagation();

    const activeEl = document.activeElement;
    if (!activeEl) return;

    // 判断当前元素是否为可编辑区域
    const isEditable = 
      (activeEl.tagName === "INPUT" && activeEl.type === "text") ||
      activeEl.tagName === "TEXTAREA" ||
      activeEl.isContentEditable;

    if (!isEditable) return;

    const randomWord = words[Math.floor(Math.random() * words.length)];

    // 根据元素类型插入文本到光标位置
    if (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA") {
      const start = activeEl.selectionStart;
      const end = activeEl.selectionEnd;
      const value = activeEl.value;
      activeEl.value = value.substring(0, start) + randomWord + value.substring(end);
      // 光标移动到插入文本末尾
      activeEl.selectionStart = activeEl.selectionEnd = start + randomWord.length;
    } else if (activeEl.isContentEditable) {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        const textNode = document.createTextNode(randomWord);
        range.insertNode(textNode);
        // 光标移动到插入文本末尾
        range.setStartAfter(textNode);
        range.setEndAfter(textNode);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  }
});

额外说明 #

• 加入修饰键判断，避免干扰用户正常的Tab组合键操作（如Shift+Tab切换焦点）。
• 支持在光标位置插入文本，而非直接追加到末尾，更符合编辑习惯。
• 覆盖了富文本编辑区的插入逻辑，适配更多场景。
• 通过stopPropagation()降低事件被网站拦截的概率。

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