I've started to play with chatGPT from OpenAI and wanted to save the conversation. My first attempt was using GoFullScreen browser extension but the output file didn't look good. So I've figure out that I create some code that will download the file in HTML format.
TL;DR at the end there is bookmarklet that you can copy.
So first we need is to grab div with the thread. It's nice that it's ReactJS with styled components so beginning of the component is nice class name the same as component name.
This is the HTML:
NOTE: this is a view of the DOM in Google Dev Tools (to open right click anywhere on the page and in context menu pick "inspect element").
as you can see the class starts with "ThreadLayout__NodeWrapper" so to select that element you need this code:
const html = document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML;
It's attribute selector that match beginning of the text.
Next is grabbing the HTML of that element and converting it to blob. As I never remember how to convert String to blob (you don't have to remember this stuff if you don't do them often). I did a Google Search and found javascript.info article about blob it looks like this:
const blob = new Blob([html], {type: 'text/html'});
If you ask why we need blob object, it's because we want to convert that to URL, we could use Data URI, but the content may be too big for a URL. So we need to create what so called Object URL. As with Blob I didn't remembered what was the API, so I've searched "Blob to URL JavaScript" and first result was MDN and createObjectURL. So we need to do:
const url = URL.createObjectURL(blob);
So now if we inspect the url you will see something like this:
blob:https://chat.openai.com/8d0a27ec-d8c6-4a76-9aad-4a0e52b0f9d0
It's object created from blob in memory and if you use this browser will use it as reference to HTML content we created.
To download the file there is this trick that I keep using, if you know better way let me know.
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);
}
and we can call this function with blob URL and filename:
download(url, 'chatGPT.html');
This will create fake link and download the file.
Last think that you want to do is to clean after yourself and remove blob URL, since after download you don't need it anymore.
URL.revokeObjectURL(url);
As the end as I promise whole code as Bookmarklet (NOTE: the selector doesn't work anymore, but I've created repository on GitHub where I will track working version of the bookmark if you're interested).
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);
})()
You need to save this as URL into your bookmarks that you will be able to click and invoke that code. If you want to copy/paste into console, than just remove the javascript: at the beginning, it's special protocol that tell the browser to run this code.
As a fun exercise I've tried to make chatGPT create this code for me. Here is the result the solution is almost the same. He only made mistake in CSS selector, but pointing that out and he fixed the code. Above file was download using copy paste of the last snippet.
EDIT: look at my comment where you can find a bookmark that make the conversation with chatGPT look better.
EDIT 2: I just found that they changed the classes on ChatGPT output, so this doesn't work anymore, I wanted to update the code in the article but it will probably change multiple times in the future, so I've created a repository for the boomark:
chatGPT Bookmark
ChatGPT conversation saving bookmark.
It's started as DEV.to article But I've decided that It would be better to track it on GitHub and update so it will still work when OpenAI change their web application.
What is Bookmarklet?
Bookmarklet is a JavaScript code that run as URL from your bookmarks. To run the code you need to create new Bookmark and copy the code from the bookmark.js JavaScript file. If you don't know how you can open the website and drag & drop the look to your bookmarks.
You can read more about Bookmarklets on Wikipedia.
Interesting projects
The main reason for this project is to allow saving the chatGPT conversation as files on the disk. Here is interesting usage of the bookmark that people made:
Contribution
If you want to add something to the bookmark, please do…
When they will change the ReactJS application I will try to update the bookmark. So if the bookmark doesn't work please create an issue on GitHub.
And that's it. If you like this post, you can follow me on twitter at @jcubic and check my home page.
Latest comments (41)
Thanks a bunch, Sarah! Your comprehensive guide really hit the mark for what I was looking for archive. I appreciate the effort you put into making it so user-friendly. Great job!
I found a super useful guide on how any can save chatgpt threads data easily and free. here are some methods.
How did you found it if it's written by you? This looks like SEO spam.
You can also just simply right click and click on 'Save Page As'. A download prompt should appear asking you to name the file:
You can't save conversation with "save as.." becase the conversation is not written in HTML. And save as save the HTML file not the thing you see on the screeen. Please open the file and look what you will get.
Thank you for this, Jakub. Your github repo is exactly what I needed and in a format that is perfect for me. Nice work.
Thank for sharing. I just found out about GPT and it's been helping me a lot in my work and learning. I also just discovered an extension for search engines. It's very convenient, everyone should try installing it and see how it goes. You need to log in to the main OpenAI page and use it on search engines. https://chrome.google.com/webstore/detail/chatgpt-for-search-engine/feeonheemodpkdckaljcjogdncpiiban/related?hl=en-GB&authuser=0
The chatGPT Chrome extension makes it possible to get the answer to your Google search without leaving the page – just install it and try it out.
https://chrome.google.com/webstore/detail/chatgpt-for-search-engine/feeonheemodpkdckaljcjogdncpiiban/related?hl=en-GB&authuser=0
I was testing the extension (or similar one) and I don't like it.
What do you not like about it?
It's useless to me, I don't see the point of having something like when searching. But it may be useful to others, for me it's not. I've installed it and deleted after first search.
If you want to promote this project, why don't you write an article about it instead of adding comments to my post?
It just stopped working doe me :(
You need to use bookmark from GitHub the link at the bottom of the page. If it doesn't work please create an issue on GitHub.
EDIT: I've just checked GitHub version and it works.
How many languages ​​can chatbots understand?
Sorry, I'm not chatGPT expert. Try asking chatGPT himself.
What initials, what nickname? Can you elaborate?
They probably changed the application it have nothing to do with my bookmark. It don't write anything, especially when you refresh the page. You can't modify a website permanently with a boomkark.
I asked this application to write down the same code and it's crazy. It is also updated with latest information. Later on figured out - it's connected with Search engines. Crazy application - accintia.com
It's not connected to Search Engines it was trained in 2021 and only those information are save in the model. I also asked chatGPT to write same code after I've had my solution. With this I could ask for corrections when something was wrong. His first code showed
document.querySelector('.ThreadLayout__NodeWrapper')and I've needed to ask him to correct it, he corrected it and in next prompt I've asked to write full code with correction and I've had exact same code.