Chrome扩展内容脚本实现文本框内容替换的跨站点兼容问题

一、换掉废弃的execCommand #

不用依赖已弃用的execCommand，用现代API就能搞定原生textarea和标准contenteditable元素：

1. 原生textarea处理 #

直接修改value属性，然后触发input事件让页面脚本感知内容变化，比execCommand更可靠：

function setTextareaContent(textarea, content) {
  textarea.value = content;
  // 必须触发input事件，否则页面自身的脚本可能检测不到内容变更
  textarea.dispatchEvent(new InputEvent('input', { bubbles: true }));
}

2. 标准contenteditable元素 #

用Selection API处理内容和光标位置，同时触发必要事件同步页面状态：

function setContenteditableContent(element, content) {
  // 清空现有内容
  element.innerHTML = '';
  // 插入内容，支持HTML或纯文本格式
  if (typeof content === 'string') {
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = content;
    while (tempContainer.firstChild) {
      element.appendChild(tempContainer.firstChild);
    }
  }
  // 将光标移至内容末尾，符合用户操作习惯
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(element);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
  // 触发input事件，确保页面状态同步更新
  element.dispatchEvent(new InputEvent('input', { bubbles: true }));
}

二、搞定Instagram这类自定义文本框 #

像Instagram、Facebook的文本框都是高度定制的，直接操作DOM不会触发内部状态更新，得模拟真实用户的输入行为：

1. 先摸清目标元素结构 #

Instagram的发帖文本框一般是带有contenteditable="true"的div，内部还会有一个占位符span（比如带placeholder类的元素），单纯删除节点没用，必须配合触发对应事件。

2. 正确的内容写入方式 #

先清空所有子元素，插入新内容后触发一系列事件，让页面内部状态同步更新：

function setInstagramTextbox(element, content) {
  // 清空所有子元素（包括占位符）
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  // Instagram文本框大多只识别纯文本节点，直接创建文本节点插入
  const textNode = document.createTextNode(content);
  element.appendChild(textNode);
  // 触发input、change、keyup事件，模拟真实输入流程
  ['input', 'change', 'keyup'].forEach(evtName => {
    element.dispatchEvent(new Event(evtName, { bubbles: true, cancelable: true }));
  });
  // 恢复光标到内容末尾
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(element);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
}

3. 通用适配逻辑 #

通过元素的特征（类名、父容器、属性）判断平台类型，调用对应处理函数：

function setTextboxContent(targetElement, content) {
  // 处理原生textarea
  if (targetElement.tagName === 'TEXTAREA') {
    setTextareaContent(targetElement, content);
  } 
  // 处理contenteditable元素
  else if (targetElement.isContentEditable) {
    // 检测Instagram文本框（可根据实际DOM结构调整判断条件）
    const isInstagram = targetElement.closest('div[role="textbox"]')?.classList.contains('_ablz');
    if (isInstagram) {
      setInstagramTextbox(targetElement, content);
    } 
    // 处理Outlook等其他标准contenteditable元素
    else {
      setContenteditableContent(targetElement, content);
    }
  }
}

三、关键注意事项 #

• 必须触发事件：所有自定义文本框都需要触发对应事件，否则页面内部状态不会更新，导致内容显示异常
• 避免硬编码DOM结构：不同平台的文本框类名可能变动，尽量用通用特征（如role="textbox"、contenteditable）判断，或动态分析DOM结构
• 权限无需额外申请：Chrome扩展的content script默认拥有操作页面DOM的权限，不用额外配置

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