DEV Community

Cover image for Save chatGPT conversation as HTML file
Jakub T. Jankiewicz
Jakub T. Jankiewicz

Posted on • Updated on

Save chatGPT conversation as HTML file

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:

DOM Tree of the ReactJS OpenAI website

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;


Enter fullscreen mode Exit fullscreen mode

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'});


Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

So now if we inspect the url you will see something like this:



blob:https://chat.openai.com/8d0a27ec-d8c6-4a76-9aad-4a0e52b0f9d0


Enter fullscreen mode Exit fullscreen mode

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);
}


Enter fullscreen mode Exit fullscreen mode

and we can call this function with blob URL and filename:



download(url, 'chatGPT.html');


Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

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);
})()


Enter fullscreen mode Exit fullscreen mode

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:

GitHub logo jcubic / chat-gpt

ChatGPT conversation saving bookmark

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.

Top comments (41)

Collapse
 
jgusta profile image
jgusta

Thank you for this, Jakub. Your github repo is exactly what I needed and in a format that is perfect for me. Nice work.

Collapse
 
enzi_15 profile image
Enzi • Edited

Update: 12/11/22 Check out github.com/jcubic/chat-gpt
Can check out my fork for Fancy CSS - V1 on github.com/EnziTheViking/chat-gpt-...

"Thank you, Jakub T. Jankiewicz, for sharing this valuable information in your article. Their post was incredibly helpful, and I made some modifications to the code with the help of ChatGPT.

I hope that you find this slight CSS change to be useful. It is worth keeping in mind that there may be some unique identifiers in the classes, so it may be necessary to do some research, such as with the classes Avatar__Wrapper-sc-1yo2jqv-3 hQqhqY and hljs.

EDIT: Looks like they have changed how the CSS Classes are named, so this code below wont work. (Check out OP github)

javascript: (function () {
  const a = document.createElement("a");
  a.href = URL.createObjectURL(
    new Blob(
      [
        `<!DOCTYPE html><html><head><style>
[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+1) {
    background: lightgray;
}
[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+2) {
    background: darkgray;
}
[class^="ConversationItem__ConversationItemWrapper-sc"] {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
[class^="CodeSnippet__CodeContainer-sc"] {
    background: #0D0D0D;
    padding: 10px;
    border-radius: 5px;
}
[class^="hljs"] {
    font-weight: !important;
}
[class^="hljs-comment"] {
    color: #DAD9D8 !important;
}
[class^="hljs-keyword"] {
    color: #4CA3D8 !important;
}
[class^="hljs-params"] {
    color: #ff6c87 !important;
}
[class^="hljs-variable language_"] {
    color: #E24B8A !important;
}
[class^="hljs-title function_"] {
    color: #F24554 !important;
}
[class^="hljs-string"] {
    color: #56FEC1 !important;
}
[class^="hljs-property"] {
    color: #FFFFFF !important;
}
[class^="hljs-built_in"] {
    color: #F3AC35 !important;
}
[class^="hljs-attribute"] {
    color: #60FED7 !important;
}
[class^="hljs-attr"] {
    color: #E24B8A !important;
}
[class^="hljs-regexp"] {
    color: #dad9d8 !important;
}
[class^="hljs-selector-attr"] {
    color: #E24B8A !important;
}
[class^="hljs-selector-pseudo"] {
    color: #E24B8A !important;
}
[class^="hljs-number"] {
    color: #dad9d8 !important;
}
[class^="Avatar-sc"] {
    background-color: darkgray !important;
    margin: 2px !important;
    padding: 2px !important;
    border-radius: 5px !important;
}
[class^="h3"]{
    margin: 2px !important;
    padding: 2px !important;
    border-radius: 5px !important;
    color: #cc1a58;
}
.h3 {
    text-align: left;
}
[class^="h3svg"]{
    margin: 2px !important;
    padding: 2px !important;
    border-radius: 5px !important;
    color: #19886D;
}
</style>
<body>` +
          document
            .querySelector('[class^="ThreadLayout__NodeWrapper"]')
            .innerHTML.replace(
              /<div class="Avatar__Wrapper-sc-1yo2jqv-3 hQqhqY">(.*?)<\/div>/g,
              '<h3 class="h3">You</h3>'
            )

            .replace(/<button[^>]*>.*?<\/button>/g, "")
            .replace(/<svg[^>]*>.*?<\/svg>/g, '<h3 class="h3svg">Bot</h3>') +
          "</body></html>",
      ],
      { type: "text/html" }
    )
  );
  const date = new Date();
  const dateString =
    date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
  a.download = "chatGPT Save Chat -" + dateString + ".html";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
})();
Enter fullscreen mode Exit fullscreen mode

Random quick example for an image
Image description

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

Hey, I've created a repository for the bookmark. It seems they changed how they structure the conversation. So your code will probably not work anymore. But if you want to contribute your changes you're welcome to do that. We can make it work like YouTube-DL or uBlock that updates they code when YouTube changes the application.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Looks nice.

Collapse
 
falazar profile image
James Ratcliff

can we merge in Enzi changes? Need the better css for our projects, his seems to work great!

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz

@falazar he didn't created a fork and a PR. So there is nothing to merge. if he decide to create a PR to my project, I will be happy to merge.

Collapse
 
enzi_15 profile image
Enzi

Fancy CSS - V1 on github.com/EnziTheViking/chat-gpt-...

javascript:(function() {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([
        `<!DOCTYPE html><html><head>
        <style>
    [class^="react-scroll-to-bottom"] > .flex > div:nth-child(2n+1) {
        background: #3B3F41;
        white-space: pre-wrap;
    }
    [class^="react-scroll-to-bottom"] > .flex > div:nth-child(2n+2) {
        background: #52575A;
        white-space: pre-wrap;
    }
    [class^="react-scroll-to-bottom"] > .flex > div:not(:last-child) {
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
    }
    [class^="react-scroll-to-bottom"] > .flex > div .relative.flex [style*="inline-block"] {
        display: none !important;
    }
    p:first-child {
        margin-top: 0;
    }
    p:last-child {
        margin-bottom: 0;
    }
    body {
        color: #D8D7D4 !important;
        background: #232526;
        font-family: Arial, sans-serif !important;
    }
    [class^="p"] {
        font-weight: !important;
        background: #161717 !important;
        padding: 5px;
        border-radius: 5px;
    }
    [class^="hljs"] {
        font-weight: bold !important;
    }
    [class^="hljs-comment"], [class^="hljs-regexp"] {
        color: #DAD9D8 !important;
    }
    [class^="hljs-keyword"] {
        color: #4CA3D8 !important;
    }
    [class^="hljs-params"] {
        color: #ff6c87 !important;
    }
    [class^="hljs-variable language_"] {
        color: #E24B8A !important;
    }
    [class^="hljs-title function_"] {
        color: #F24554 !important;
    }
    [class^="hljs-string"] {
        color: #56FEC1 !important;
    }
    [class^="hljs-property"] {
        color: #FFFFFF !important;
    }
    [class^="hljs-built_in"] {
        color: #F3AC35 !important;
    }
    [class^="hljs-attribute"] {
        color: #60FED7 !important;
    }
    [class^="hljs-attr"], [class^="hljs-selector-attr"], [class^="hljs-selector-pseudo"] {
        color: #E24B8A !important;
    }
    [class^="hljs-number"] {
        color: #dad9d8 !important;
    }
    [class^="bot"]{
        color: #10A37F;
        background-color: #52575A !important;
    }
    [class^="you"]{
        color: #cc1a58;
    }
  </style>
  </head>
  <body>`+ document.querySelector('[class^="react-scroll-to-bottom"]').innerHTML
    .replace(/<img[^>]*>/g, '')

    .replace(
        /<div class="relative flex">(.*?)<\/div>/g,
        '<h3 class="you">You</you>'
      )
    .replace(/<button[^>]*>.*?<\/button>/g, '')
    .replace(/<svg[^>]*>.*?<\/svg>/g, '<h3 class="bot">Bot</h3>') + '</body></html>'], {type: 'text/html'}));
    a.download = 'chatGPT.html';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href);
  })()
Enter fullscreen mode Exit fullscreen mode

Image description

Collapse
 
aggermor profile image
Aggermor • Edited

Once again I can barely even read how this works, let alone understand it. I just did a simple google search to find my way into this world of you smart guys. This looks impressive however, it's not working for me. Maybe it's the unique identifiers in the classes you mentioned... I have no clue what that is anyway. When I put it in my bookmark bar like the original post it doesn't work. Could you help me understand how to fix it?

Edit: Actually now the original post isn't working for me either.. any suggestions?

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

The update code works look at this website: jcubic.github.io/chat-gpt/ just drag & drop the link to your bookmarks.

Collapse
 
lorenz1989 profile image
lorenz1989

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

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

I was testing the extension (or similar one) and I don't like it.

Collapse
 
lorenz1989 profile image
lorenz1989

What do you not like about it?

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz

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.

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz

If you want to promote this project, why don't you write an article about it instead of adding comments to my post?

Collapse
 
pionxzh profile image
Pionxzh • Edited

I just create a userscript to export the conversation.
Support pure text and html and Screenshot.
github.com/pionxzh/chatgpt-exporter

Image description

Collapse
 
aggermor profile image
Aggermor

This looks awesome. You guys are so smart! Again, I stumbled upon this thread just looking for ways to save my cGPT conversations. I'm not skilled enough to even read how this works but I wish I could. So no offense to @pionxzh but I feel I shouldn't run random code I can't read, does anyone vouch for this script?

Collapse
 
pionxzh profile image
Pionxzh • Edited

You shouldn't. That's why all of the code are open sourced on GitHub pionxzh/chatgpt-expoter and the script was built by CI automatically to make sure that I don't have any chance to put something in.

Collapse
 
jordiup profile image
Jordi Hermoso

Cheers for the article!
This version removes: svg, img and button tags, cleaning up the output a bit more :)

javascript:(function() { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML.replace(/<img[^>]*>/g, '').replace(/<button[^>]*>.*?<\/button>/g, '').replace(/<svg[^>]*>.*?<\/svg>/g, '')], {type: 'text/html'})); a.download = 'chatGPT.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href); })()
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

Thanks for the follow up. I actually didn't care and only wanted to save the conversation for later. Something that could be processed when needed. Like cleaning up, adding HTML structure, and adding CSS so it looks good.

Collapse
 
aggermor profile image
Aggermor • Edited

New to this website just for this post. I do not understand how this works in the slightest but I enjoy being able to save my chatGPT now. Is it possible to make my messages a different color to the chatbot? for example making my input text blue... and the AI's response black text. also idk if it's too hard to add the code box instead of just plain text. so it can show formatting. thanks, this is awesome.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

TL;DR at the end you have the full code

You need a little bit of CSS knowledge if you want to make it looks good. But if you want quick tip add this CSS:

[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+1) {
    background: lightgray;
}
[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+2) {
    background: darkgray;
}
Enter fullscreen mode Exit fullscreen mode

and if you want to make little bit nicer you can add

[class^="ConversationItem__ConversationItemWrapper-sc"] {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

it will make prompts light gray and bot reply dark gray and add some spacing. You can customize it bit frther if you spend some time learning basic of CSS.

To update the bookmark you need to put that inside <style>...</style>.

Another tip if you ask for source code, you add this line:

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css"/> 
Enter fullscreen mode Exit fullscreen mode

To make the source code looks nicer.

Here is whole bookmark including @jordiup updates (I've also added HTML structure so it's valid HTML document).

javascript:(function() {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([`<!DOCTYPE html><html><head><style>
[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+1) {
    background: lightgray;
}
[class^="ConversationItem__ConversationItemWrapper-sc"]:nth-child(2n+2) {
    background: darkgray;
}
[class^="ConversationItem__ConversationItemWrapper-sc"] {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
</style>
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css"/>
</head>
<body>`+  document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML
  .replace(/<img[^>]*>/g, '')
  .replace(/<button[^>]*>.*?<\/button>/g, '')
  .replace(/<svg[^>]*>.*?<\/svg>/g, '') + '</body></html>'], {type: 'text/html'}));
  a.download = 'chatGPT.html';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
})()
Enter fullscreen mode Exit fullscreen mode

And if you want to give a filename you can change this line:

a.download = 'chatGPT.html';
Enter fullscreen mode Exit fullscreen mode

into:

a.download = prompt('Enter filename');
Enter fullscreen mode Exit fullscreen mode
Collapse
 
aggermor profile image
Aggermor

This is exciting and I've learned so much about CSS just working out how this code works, now you've even improved upon it. Thank you so much.

Collapse
 
pitterpacker profile image
Pitter Packer

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

Image description

Collapse
 
abdo75 profile image
gader-abdollah

You can also just simply right click and click on 'Save Page As'. A download prompt should appear asking you to name the file:

Image description

Image description

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

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.

Collapse
 
deep_3132 profile image
atmadeep Das

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

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

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.

Collapse
 
chatgptaihub profile image
chatgptaihub

I found a super useful guide on how any can save chatgpt threads data easily and free. here are some methods.

  1. - Copy and Paste: Manually copy the conversation text and paste it into a document or application.
  2. - SaveGPT Extension: Use the SaveGPT extension in Google Chrome to automatically save ChatGPT conversations.
  3. - Third-Party Applications: Utilise automation platforms like Zapier, Integromat, or Automate.io to save ChatGPT conversations programmatically.
  4. - ChatGPT API: Access and save ChatGPT conversations programmatically using the ChatGPT API.
  5. - Screenshot: Capture the ChatGPT conversation by taking a screenshot.
Collapse
 
jcubic profile image
Jakub T. Jankiewicz

How did you found it if it's written by you? This looks like SEO spam.