我已经开始从OpenAI玩chatGPT，并想保存对话。我的第一个尝试是使用GoFullScreen浏览器扩展程序，但输出文件看起来不好。因此，我已经确定我创建了一些代码，该代码将以HTML格式下载文件。
tl; dr末端有您可以复制的bookmarklet。
所以我们首先需要用线抓取div。很高兴与样式组件进行ReactJS，因此组件的开始是不错的类名称与组件名称相同。
这是HTML：
您可以看到类以"ThreadLayout__NodeWrapper"开头，因此要选择该元素，您需要此代码：
const html = document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML;
是匹配文本的属性选择器。
接下来是抓住该元素的HTML并将其转换为斑点。由于我永远不会记得如何将字符串转换为斑点（如果您不经常这样做，则不必记住这些事情）。我进行了Google搜索，发现javascript.info article about blob看起来像这样：
const blob = new Blob([html], {type: 'text/html'});
如果您问为什么我们需要blob对象，那是因为我们要将其转换为URL，我们可以使用Data URI，但是内容可能太大了，对于URL而言。因此，我们需要创建所谓的对象URL。与Blob一样，我不记得什么是API，所以我搜索了“ blob to url javaScript”，第一个结果是mdn和createObjectURL。所以我们需要做：
const url = URL.createObjectURL(blob);
所以现在，如果我们检查URL，您会看到这样的东西：
blob:https://chat.openai.com/8d0a27ec-d8c6-4a76-9aad-4a0e52b0f9d0
它是从内存中创建的对象，如果您使用此浏览器，它将使用它作为我们创建的HTML内容的引用。
要下载文件，我一直在使用此技巧，如果您知道更好的方法让我知道。
function download(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename;
// we need add link to body since some browsers
// will ignore the download otherwise
document.body.appendChild(a);
a.click();
// you can also use a.remove(); but I prefer older API
document.body.removeChild(a);
}
我们可以使用Blob URL和文件名来调用此功能：
download(url, 'chatGPT.html');
这将创建假链接并下载文件。
上一次认为您想做的是清理自己并删除Blob URL，因为下载后不再需要它。
URL.revokeObjectURL(url);
作为终点，我保证了整个代码为bookmarklet：
javascript:(function() { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML], {type: 'text/html'})); a.download = 'chatGPT.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href); })()
您需要将其作为URL保存到书签中，您可以单击并调用该代码。如果要复制/粘贴到控制台中，而不是在开始时删除javascript:，它是特殊协议，告诉浏览器运行此代码。
作为一个有趣的练习，我试图让chatgpt为我创建此代码。 Here is the result解决方案几乎相同。他只在CSS选择器中犯了错误，但指出了这一点，并修复了代码。上面的文件使用最后一个片段的复制糊下载。