我已经开始玩OpenAI的chatGPT，并想保存对话内容。我的第一次尝试是使用GoFullScreen浏览器扩展，但输出的文件看起来并不好看。所以我想出了一个办法，就是创建一些代码，将文件下载成HTML格式。
所以，我们首先需要的是抓住带有线程的div。很好，这是ReactJS的风格化组件，所以组件的开头是很好的类名，与组件名相同。
这就是HTML：
注意：这是在谷歌开发工具中的DOM视图（要想打开，在页面的任何地方点击右键，在上下文菜单中选择 "检查元素"）。
如你所见，该类以"ThreadLayout__NodeWrapper" 开始，所以要选择该元素，你需要这样的代码：
const html = document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML;
进入全屏模式 退出全屏模式
这是匹配文本开头的属性选择器。
接下来是抓取该元素的HTML并将其转换为blob。由于我一直不记得如何将String转换为blob（如果你不经常做这些事情，就不必记住这些东西）。我在谷歌上搜索了一下，发现javascript.info上有一篇关于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
这是一个从内存中的blob创建的对象，如果你使用这个对象，浏览器会把它作为我们创建的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);
最后，我承诺将整个代码作为书签 （注意： 选择器不再工作，但我已经在GitHub上创建了仓库，如果你有兴趣，我将跟踪书签的工作版本）。
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为我创建这段代码。这就是结果，解决方案几乎是一样的。他只是在CSS选择器中犯了错误，但在指出这一点后，他修正了代码。上面的文件是用最后一个片段的复制粘贴下载的。
