Chrome扩展：使用document.execCommand('paste')后insertTextAtCursor报错求助

问题分析 #

你遇到的错误核心原因有两点：

1. doc.selection是IE专属的过时API，现代Chrome等浏览器已不再支持，因此会抛出Cannot read properties of undefined的错误。
2. 直接使用document.execCommand('paste')时，若操作对象是目标搜索框，会改变其内容和光标状态，导致后续插入文本时无法定位正确的光标位置。

修复方案 #

1. 替换insertTextAtCursor函数（兼容现代浏览器） #

改用标准的Selection/Range API，同时适配<input>/<textarea>和contenteditable类型的搜索框：

function insertTextAtCursor(text) {
  const activeEl = document.activeElement;
  // 处理input/textarea类搜索框
  if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {
    const startPos = activeEl.selectionStart;
    const endPos = activeEl.selectionEnd;
    const originalValue = activeEl.value;
    // 插入处理后的文本
    activeEl.value = originalValue.substring(0, startPos) + text + originalValue.substring(endPos);
    // 恢复光标到插入文本的末尾
    activeEl.selectionStart = activeEl.selectionEnd = startPos + text.length;
  } 
  // 处理contenteditable类型的搜索框
  else if (activeEl.isContentEditable) {
    const sel = window.getSelection();
    if (sel.rangeCount > 0) {
      const range = sel.getRangeAt(0);
      range.deleteContents();
      const textNode = document.createTextNode(text);
      range.insertNode(textNode);
      // 移动光标到文本末尾
      range.setStartAfter(textNode);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
}

2. 正确实现基于document.execCommand('paste')的剪贴板读取 #

创建临时隐藏的可编辑元素，避免干扰目标搜索框的焦点和光标状态：

function readClipboardViaExecCommand() {
  return new Promise((resolve) => {
    // 创建临时textarea用于接收粘贴内容
    const tempTextarea = document.createElement('textarea');
    tempTextarea.style.position = 'fixed';
    tempTextarea.style.opacity = '0';
    tempTextarea.style.left = '-9999px';
    document.body.appendChild(tempTextarea);

    // 聚焦临时元素并执行粘贴操作
    tempTextarea.focus();
    document.execCommand('paste');
    const clipboardContent = tempTextarea.value;

    // 清理临时元素
    document.body.removeChild(tempTextarea);
    resolve(clipboardContent);
  });
}

3. 调整右键菜单触发逻辑 #

确保处理过程中目标搜索框始终保持焦点和光标位置：

// 右键菜单点击事件处理
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === '你的正则处理菜单项ID') {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: async () => {
        const searchInput = document.activeElement;
        if (!searchInput) return;

        // 读取剪贴板内容
        const rawText = await readClipboardViaExecCommand();
        // 应用正则处理（示例：替换非数字字符）
        const processedText = rawText.replace(/\D/g, '');
        // 插入到搜索框光标位置
        insertTextAtCursor(processedText);
      }
    });
  }
});

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