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:

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.