Chrome扩展开发：如何实时获取Google Docs编辑内容？

针对Google Docs基于Canvas渲染导致常规input/div监听方案失效的问题，可通过以下几种思路实现内容获取：

• 监听选区变化事件
  Google Docs会同步维护文本选区状态，通过监听selectionchange事件可实时获取用户选中的内容，适合实时追踪编辑片段：

  document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const currentText = selection.toString();
      // 这里处理获取到的文本内容
      console.log(currentText);
    }
  });
  

• 直接提取文档全文本
  尽管Google Docs用Canvas渲染视觉内容，但页面的innerText仍会同步包含完整的文档文本，可直接读取：

  const fullDocContent = document.body.innerText;
  console.log(fullDocContent);
  

• 利用MutationObserver追踪文档更新
  Google Docs在用户编辑时，会更新页面内的隐藏DOM节点（如文本缓存层），可通过MutationObserver监听这些节点的变化，触发内容获取：

  const targetNode = document.querySelector('.kix-page-content-wrapper');
  const config = { childList: true, subtree: true };
  
  const observer = new MutationObserver((mutations) => {
    // 每次DOM变化时重新获取文档内容
    const updatedContent = document.body.innerText;
    console.log(updatedContent);
  });
  
  observer.observe(targetNode, config);
  

• 模拟复制操作（需用户授权）
  若需要精准获取当前编辑区域的内容，可触发系统复制命令后读取剪贴板内容，但需提前向用户申请clipboardRead权限：

  // 触发复制
  document.execCommand('copy');
  // 读取剪贴板
  navigator.clipboard.readText().then(text => {
    console.log(text);
  });
  

注意：Google Docs的DOM结构可能会随版本更新变化，使用时需测试目标节点的稳定性。

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