如何通过浏览器控制台提取ChatGPT页面CodeMirror编辑器的完整内容？

你遇到的问题完全是CodeMirror的虚拟渲染机制导致的——为了优化性能，它只会把当前视口内的代码行渲染到DOM中，超出屏幕的内容都只存在于内存里，所以直接抓取.cm-line元素自然只能拿到部分内容。

好在ChatGPT使用的CodeMirror 6实例是可以直接访问的，不用去遍历DOM节点，直接调用它的官方API就能一次性获取完整内容，下面是改进后的解决方案：

改进后的完整代码 #

(() => {
  // 优先通过CodeMirror API获取完整内容（推荐）
  const extractFullContent = () => {
    const editorElement = document.querySelector('.cm-editor');
    if (!editorElement) {
      console.warn('Editor not found.');
      return null;
    }

    // 尝试获取ChatGPT挂载的CodeMirror View实例
    const codeMirrorView = editorElement.view;
    if (!codeMirrorView || !codeMirrorView.state?.doc) {
      console.warn('Could not access CodeMirror instance, falling back to visible lines.');
      return null;
    }

    // 从CodeMirror的文档实例中提取完整内容
    const fullContent = codeMirrorView.state.doc.toString();
    console.log('✅ Extracted full editor content via CodeMirror API.');
    return fullContent;
  };

  // 降级方案：仅提取可见内容（当API不可用时使用）
  const extractVisibleContent = () => {
    const editorElement = document.querySelector('.cm-editor');
    if (!editorElement) {
      console.warn('Editor not found.');
      return null;
    }

    const lines = Array.from(editorElement.querySelectorAll('.cm-line'));
    if (!lines.length) {
      console.warn('No visible lines found.');
      return null;
    }

    const visibleContent = lines.map(line => line.textContent).join('\n');
    console.log('⚠️ Using fallback of visible lines. Content may be incomplete.');
    return visibleContent;
  };

  const onReady = () => {
    setTimeout(() => {
      // 先尝试通过API获取完整内容
      let content = extractFullContent();
      // 如果API访问失败，降级到可见内容提取
      if (content === null) {
        content = extractVisibleContent();
      }

      if (content !== null) {
        console.log('Final extracted content:\n', content);
      }
    }, 1000);
  };

  // 确保页面加载完成后执行
  if (document.readyState === "complete" || document.readyState === "interactive") {
    onReady();
  } else {
    document.addEventListener('DOMContentLoaded', onReady);
  }
})();

代码说明 #

• 优先使用CodeMirror API：ChatGPT会把CodeMirror 6的View实例直接挂载在编辑器元素（.cm-editor）的view属性上，从view.state.doc可以拿到完整的文档对象，调用toString()就能获取所有内容，完全不受虚拟渲染影响。
• 降级方案：如果未来ChatGPT调整了页面结构导致API不可用，代码会自动降级到你原来的可见内容提取逻辑，保证基本功能可用。
• 延迟执行：保留了1秒延迟，确保编辑器完全初始化完成后再执行提取操作。

效果测试 #

运行这段代码后，你会看到控制台输出✅ Extracted full editor content via CodeMirror API.，随后打印的就是完整的编辑器内容，不会再出现截断的情况。

备注：内容来源于stack exchange，提问作者celsowm