如何用代码从 ChatGPT 网页中获取原始 Markdown 格式?

通过 React Dev Tool 的 Hook,可以拿到 React 组件的内部状态,从而拿到 ChatGPT 网页中的原始 Markdown 格式

See all postsPublished on October 29, 2023

如何用代码从 ChatGPT 网页中获取原始 Markdown 格式?

ChatGPT 在输出消息时,会将 Markdown 格式解析成 HTML,虽然可以点击复制按钮去复制原始的 Markdown,但是用代码操作时,却无法通过模拟点击去复制 Markdown。

那么有没有办法通过代码获取到消息的原始 Markdown 呢?

两种方法,使用场景各有不同:

  1. 借助 Turndown 这样的库将 HTML 转成 Markdown,缺点就是转换后可能和原始 Markdown 有出入,尤其是 Turndown 默认不支持表格的转换

方法 1 还有一个衍生版本,就是要求 ChatGPT 在输出内容时,将要输出的所有内容都放在 对中,这样它就不会解析里面的 Markdown,当成代码块来输出原始格式。这种方法大部分场景是适用的,就是有一个小问题,如果要输出的内容中正好有 ,就会有多个代码块,格式会乱掉,一部分在代码块,一部分在外面,结果还是要解析 完整的 HTML。

  1. 借助 React Dev Tool 的 Hook

这种方法可能绝大多数人都没听说过。React 为了支持 React Dev Tool,暴露了一个 Hook,是个全局变量,名称是 "

复制代码
__REACT_DEVTOOLS_GLOBAL_HOOK__

",通过它可以注入到 React 组件内部,拿到组件内部的状态。这就是为什么通过 React Dev Tool 能看到每一个组件的属性和状态。

ChatGPT 的网页是 Nextjs 和 React 开发的,默认是支持 React Dev Tools 的,所以只要写代码去遍历 "

复制代码
__REACT_DEVTOOLS_GLOBAL_HOOK__

",那么就能拿到所有组件的内部状态,然后找到有消息原始 Markdown 内容的组件,就可以得到原始的 Markdown 信息。

但这种方法有两个缺点,一个就是 ChatGPT 的前端换属性名称或者 state 名称了,可能就拿不到了;另外就是这种方法默认只支持 console,或者直接页面执行,在外部浏览器插件的话,拿不到

复制代码
__REACT_DEVTOOLS_GLOBAL_HOOK__

变量,必须通过 RegisteredContentScript 的方法去执行一段脚本,再去做一些内部通信,才能间接获取到,当然理论上还是可以拿到的。

参考代码如下:

css 复制代码
[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object]

See all posts

相关推荐
灰灰勇闯IT几秒前
领域制胜——CANN 领域加速库(ascend-transformer-boost)的场景化优化
人工智能·深度学习·transformer
灰灰勇闯IT2 分钟前
从零到一——CANN 社区与 cann-recipes-infer 实践样例的启示
人工智能
小白狮ww5 分钟前
要给 OCR 装个脑子吗?DeepSeek-OCR 2 让文档不再只是扫描
人工智能·深度学习·机器学习·ocr·cpu·gpu·deepseek
lili-felicity7 分钟前
CANN优化LLaMA大语言模型推理:KV-Cache与FlashAttention深度实践
人工智能·语言模型·llama
程序猿追9 分钟前
深度解码昇腾 AI 算力引擎:CANN Runtime 核心架构与技术演进
人工智能·架构
金融RPA机器人丨实在智能9 分钟前
Android Studio开发App项目进入AI深水区:实在智能Agent引领无代码交互革命
android·人工智能·ai·android studio
Token_w13 分钟前
CANN算子量化——AIGC轻量化部署的低精度算子适配方案
aigc
lili-felicity13 分钟前
CANN异步推理实战:从Stream管理到流水线优化
大数据·人工智能
那个村的李富贵13 分钟前
CANN驱动下的AIGC“智能抠图”:基于Mask2Former的高性能图像分割实战
aigc·cann
做人不要太理性13 分钟前
CANN Runtime 运行时组件深度解析:任务下沉执行、异构内存规划与全栈维测诊断机制
人工智能·神经网络·魔珐星云