ChatGPT LaTeX 公式复制工具开发指南：从原理到实现

1次阅读

共计 2529 个字符，预计需要花费 7 分钟才能阅读完成。

在学术写作或技术文档编写过程中，LaTeX 公式是不可或缺的一部分。许多用户习惯使用 ChatGPT 来生成或转换 LaTeX 公式，但在复制这些公式时经常会遇到格式混乱的问题。例如，ChatGPT 返回的公式可能包含多余的换行符、HTML 标签或其他非 LaTeX 字符，导致粘贴到 LaTeX 编辑器时需要手动清理，极大降低了工作效率。

针对这个问题，我们可以考虑几种不同的实现方式：

浏览器扩展 ：功能强大，可以深度集成到浏览器中，但需要用户安装，跨浏览器兼容性较差。
书签工具 ：轻量级，无需安装，但功能受限，无法使用高级 API。
用户脚本（如 Tampermonkey）：介于前两者之间，灵活但依赖脚本管理器。

考虑到易用性和功能需求的平衡，本文选择浏览器扩展作为实现方案，因为它能提供最完整的 API 支持和最佳的用户体验。

首先，我们需要监听 ChatGPT 页面的变化，以便在用户请求公式时及时捕获内容。可以使用 MutationObserver API 来实现：

const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.addedNodes.length) {checkForNewLatex(mutation.addedNodes);
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

ChatGPT 中的 LaTeX 公式通常被包裹在特定的标记中。我们可以使用正则表达式来识别并提取这些公式：

function extractLatexFromNode(node) {const latexRegex = /\\\[(.*?)\\\]|\\\\(.*?\\\\)/gs;
  const matches = node.textContent.matchAll(latexRegex);

  const formulas = [];
  for (const match of matches) {
    // 处理显示公式和行内公式
    const formula = match[1] || match[2];
    if (formula) {
      formulas.push({original: match[0],
        cleaned: formula
      });
    }
  }

  return formulas;
}

对于每个识别到的 LaTeX 块，我们需要添加一个复制按钮：

function addCopyButton(latexContainer, formula) {const button = document.createElement('button');
  button.textContent = 'Copy LaTeX';
  button.className = 'latex-copy-btn';

  button.addEventListener('click', () => {navigator.clipboard.writeText(formula.cleaned)
      .then(() => {
        button.textContent = 'Copied!';
        setTimeout(() => {button.textContent = 'Copy LaTeX';}, 2000);
      })
      .catch(err => {console.error('Failed to copy:', err);
      });
  });

  latexContainer.appendChild(button);
}

不同浏览器对 Clipboard API 的实现略有不同。我们需要添加适当的特性检测和回退方案：

function copyToClipboard(text) {if (navigator.clipboard) {return navigator.clipboard.writeText(text);
  } else {
    // 回退方案：使用 document.execCommand
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    const result = document.execCommand('copy');
    document.body.removeChild(textarea);
    return result ? Promise.resolve() : Promise.reject();
  }
}

ChatGPT 的 UI 可能会更新，导致我们的选择器失效。解决方案是使用更健壮的选择方式：

function findChatGPTResponseContainers() {
  // 尝试多种可能的容器选择方式
  return document.querySelectorAll('[class*="response"], [class*="message"], [class*="content"') || [];}