经过 React Dev Tool 的 Hook，能够拿到 React 组件的内部状况，然后拿到 ChatGPT 网页中的原始 Markdown 格局

See all postsPublished on October 29, 2023

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

ChatGPT 在输出音讯时，会将 Markdown 格局解析成 HTML，尽管能够点击仿制按钮去仿制原始的 Markdown，可是用代码操作时，却无法经过模仿点击去仿制 Markdown。

如何用代码从 ChatGPT 网页中获取原始 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 网页中获取原始 Markdown 格局？

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

__REACT_DEVTOOLS_GLOBAL_HOOK__

”，那么就能拿到一切组件的内部状况，然后找到有音讯原始 Markdown 内容的组件，就能够得到原始的 Markdown 信息。

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

但这种办法有两个缺陷，一个便是 ChatGPT 的前端换属性名称或许 state 名称了，或许就拿不到了；另外便是这种办法默认只支撑 console，或许直接页面执行，在外部浏览器插件的话，拿不到

__REACT_DEVTOOLS_GLOBAL_HOOK__

变量，必须经过 RegisteredContentScript 的办法去执行一段脚本，再去做一些内部通信，才能间接获取到，当然理论上仍是能够拿到的。

参阅代码如下：

[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