jcubic/chat-gpt

ChatGPT conversation saving bookmark

I'm Jakub T. Jankiewicz and I'm a Web Developer from Poland, right now looking for a remote job with ReactJS/React Native and TypeScript.

About me

• I'm a JavaScript expert and currently mastering ReactJS, ReactNative, TypeScript, and GraphQL. I plan also to learn NextJS.
• Right now I'm focusing on LIPS Scheme, powerful Lisp interpreter written in JavaScript.
• I'm in the process of building SNApp in ReactJS+TypeScript with mobile version in React Native.
• I love to share my knowledge by writing technical articles and answering questions on sites like StackOverflow and on Social Media. I'm also learning how to be a good mentor.
• I would love to have the opportunity to become a mentor more formally.
• I'm preparing the next version of my intro to programming live course that I will put in an auction for Great Orchestra of Christmas Charity. The course will be using my coding platform Koduj, the MVP was used on the first edition of the course.
• The Koduj platform will also be used for my math and programming book that I've started to write. I've put it aside for a while but creating the live programming course made me create a coding platform that I was planning to create for the book.
• While I'm prepping the 2nd edition of my Intro to Programming course I plan to publish the Curriculum on Creative Commons license. Currently working on Quiz app (NodeJS, Express, TypeScript, and Prisma), it's a work in progress and I called it Quizerach.
• Another plan that I have is to rewrite my popular jQuery Terminal library into TypeScript with ES Modules and without jQuery dependency. It will be called Pure Terminal, and the market as a framework from the beginning.
• I have a Polish blog called "Głównie JavaScript" (en. Mostly JavaScript), but I'm not active there anymore. Recently I started a new personal blog created using Eleventy. I plan to be more active there. I will write programming articles but also about other topics that interest me.

Open Source

My most known Open Source library is jQuery Terminal, it has a long history and was started in about 2010. I've started working on version 3.0 recently. I've planned it to be a complete rewrite in TypeScript without dependency on jQuery. I plan to use something modern like Cash with a similar API. I also need to write better documentation and visual tests that are missing.

I'm an Active Maintainer of the popular library Isomorphic-git.

I'm also actively promoting Open Source projects using SEO to attract more users, I've even written an article that shows how to do that on your own.

How to Promote your Open Source Project with SEO

I have a list of articles that I want to write that will showcase my Open Source projects, for instance on FreeCodeCamp, where I've written only one article so far.

CSRF Protection Problem and How to Fix it

My projects and projects I'm maintainer of

Tech stack

I work with:

I also know:

Tech Talk

In 2023 I presented my Open Source project "LIPS Scheme" at FOSSDEM. Here is my Speaker profile and my presentation LIPS Scheme: Powerful introspection and extensibility.

Paid Support

As you can see in my profile I have a few Open Source projects and offer Paid Support. I can create a Web-Based Terminal for your website if you can't do that on your own. It will be based on my Open Source project jQuery Terminal, and may use my Gaiman Programming Language.

Social Links

                              

Software I use

Lists

• Top GitHub Users By Followers in Poland
• Top GitHub Users By Total Contributions in Poland
• Top GitHub Users By Public Contributions in Poland

chat-gpt's Issues

Save icons?

Would be nice if icons could be saved (possible to embed as a binary blob in html somehow?)
Or maybe just replace them with "You:", "Assistant:"/:ChatGPT:" text so it's easier to grok who's who?

Missing table formatting

When exporting threads with tables, the table borders are not rendered when exporting via the bookmarklet.

User avatar image saved not properly

Hi, i'm using your last script, but user image is saved cropped, showing just a quarter of the entire picture.
I attach here the result and the code from my chat inspection of chatgpt if could be useful:

<img
  alt="[email protected]"
  src="/_next/image?url=https%3A%2F%2Fs.gravatar.com%2Favatar%2Fmy_replaced_gravatar_code%3Fs%3D480%26r%3Dpg%26d%3Dhttps%253A%252F%252Fcdn.auth0.com%252Favatars%252Fda.png&amp;w=64&amp;q=75"
  decoding="async"
  data-nimg="intrinsic"
  class="rounded-sm"
  style="
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: medium none;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
  "
  srcset="
    /_next/image?url=https%3A%2F%2Fs.gravatar.com%2Favatar%2Fmy_replaced_gravatar_code%3Fs%3D480%26r%3Dpg%26d%3Dhttps%253A%252F%252Fcdn.auth0.com%252Favatars%252Fda.png&amp;w=32&amp;q=75 1x,
    /_next/image?url=https%3A%2F%2Fs.gravatar.com%2Favatar%2Fmy_replaced_gravatar_code%3Fs%3D480%26r%3Dpg%26d%3Dhttps%253A%252F%252Fcdn.auth0.com%252Favatars%252Fda.png&amp;w=64&amp;q=75 2x
  "
/>

KaTeX equations are not rendered properly

You can ask ChatGPT to show equations with a prompt like this.

Show math in LaTeX, using \(f(x)\) for inline math and $$f(x)$$ for display math. Now try some inline math and display math.

Those equations are poorly rendered from the saved file.

Improve code snippets style

This is how code snippets looks like in output files:

And this is how it looks like on the original website:

So the main task is to add the same box (only colors and rounded corners) that will work on light and dark mode.

How to use on Firefox + Linux

I'm having no luck getting it to work. I'm using Firefox on Linux. If I understand correctly the steps would be:

1. Create the bookmark (from the link on your web page).
2. Go to chatgpt, have a conversation with it.
3. Go to the bookmarks menu and simply click on the bookmark.

I was expecting the browser to start a download. The only thing that happened is that it scrolled the chargpt conversation to the bottom.

I also tried pasting the contents of bookmark.js into the developer tools console. The return value shows a pending promise and nothing happened.

Add Encoding

Add

<meta charset="UTF-8">

to the head for proper special chars.

dom is null

It seems the bookmarklet stopped working and is now erroring out:
dom is null
I'm using:
Firefox 114.0.1
ChatGPT August 3 Version

Including images

Would it be possible to include images contained in ChatGPT's answers in the export?
Sometimes - i.e. when using Code Interpreter, ChatGPT generates images (see example below), but these are not exported...

vs export:

Some huge stars (as icons) are appearing on the generated html file

The bookmarklet was working quite well until Chat GPT made some slight changes in their interface (I guess) on May 12 version. I am not sure whether that is leading to some bigger stars as the icons appearing in the beginning of the generated html or the developer made some changes. I am not sure whether others are also having the similar issue. Now the html viewing experience is not as good as before due to this issue. Here how it looks for ChatGPT 4 (with light version):

And this is how it looks for ChatGPT 3 (with dark version):

GPT4 Model support

By investigating the output of the bookmark for model GTP4 (from #17) it seems that it uses a different DOM structure. But I don't have access to chatGPT Plus so I can't update for different models.

If you want to contribute the task is to go to chatGPT change the model to GPT4, investigate the DOM output, and update the code so it still works like for normal chatGPT.

Make it easy to identify most recent folder.

Thanks for your work!

Suggestion:

Use big endian date notation (most significant element first) to ensure date-based folders are sorted and presented by GitHub in a sensible way: 2023-04, not 04-2023

No avatar for chatGPT anymore

The structure changed and there are no avatars for chatGPT anymore.

Access to image at 'https://s.gravatar ...' has been blocked by CORS policy

Unable to download.
When clicking on the bookmarklet, nothing appears.

log in chrome dev (image):

log in chrome dev (txt):

Access to image at 'https://s.gravatar.com/avatar/68cec88a58ee58f59e697293ced450e9?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fpe.png' from origin 'https://chat.openai.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
68cec88a58ee58f59e697293ced450e9:1          GET https://s.gravatar.com/avatar/68cec88a58ee58f59e697293ced450e9?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fpe.png net::ERR_FAILED 302

Bookmark doesn't work in Firefox

Variant that saves to a github gist, then opens preview...

I've been using this with great success (or at least personal enjoyment), coupled with my fork of the htmlpreview tool:
so far my workflow has basically been:

1. Chat
2. Click save chat bookmarklet
3. Open gist.github.com
4. Drag and drop the downloaded file
5. Hit Create secret gist
6. Copy the gist id
7. Using that for my htmlpreview fork (e.g. https://austegard.com/pv?139656f21cc3ecf71ee76820438b4185)

...but that takes like, seconds.

Many many iterations of the above later I got fed up and asked Chat to tweak it. It did great right off the bat; I further tweaked it just a bit as follows

javascript:(function() {
  const githubAccessToken = 'YOUR_GITHUB_PAT_HERE';
  const dom = document.querySelector('main > .flex-1 > .h-full .flex:has(> .w-full)');
  const template = document.createElement('template');
  template.innerHTML = dom.innerHTML;
  ['.items-end', 'img', 'svg', 'button', ':empty'].forEach(selector => {
    template.content.querySelectorAll(selector).forEach(node => {
      node.remove();
    });
  });

  const title = document.title.replace(/[^a-z0-9]/gi, '_');
  const content = `<!DOCTYPE html>
<html lang="en">
<head>
  <title>Chat GPT: ${title}</title>
  <meta name="generator" content="chatGPT Saving Bookmark"/>
  <style>
    body {
      background-color: rgb(32,33,35);
      color: rgb(236,236,241);
      font-size: 20px;
      font-family: Calibri,Arial, sans-serif;
      margin: -10px;
    }
    body > .w-full {
      padding: 40px;
    }
    /* prompt */
    body > .w-full:nth-child(2n+1) {
      background: rgb(52,53,65);
    }
    /* response */
    body > .w-full:nth-child(2n+2) {
      background: rgb(68,70,84);
    }
    .whitespace-pre-wrap {
      white-space: pre-wrap;
    }
    .flex-col {
      max-width: 1000px;
      margin: 0px auto;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"/>
</head>
<body>${template.innerHTML}</body>
</html>`;

  const gistDescription = `Chat GPT transcript: ${title}`;
  const gistFilename = `${title}.html`;
  const gistContent = {};
  gistContent[gistFilename] = { content };

  const data = {
    description: gistDescription,
    public: false,
    files: gistContent,
  };

  fetch('https://api.github.com/gists', {
    method: 'POST',
    headers: {
      'Authorization': `token ${githubAccessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(gist => {
    const gistId = gist.id;
    const previewUrl = `https://austegard.com/pv?${gistId}`;
    navigator.clipboard.writeText(previewUrl).then(() => {
      console.log('Preview url copied to clipboard:', previewUrl);
    }).catch(error => {
      console.error('Failed to copy preview url to clipboard:', error);
    });
    window.open(previewUrl);
  })
  .catch(error => {
    console.error(error);
    alert('An error occurred while creating the Gist.');
  });
})();

et voila!

single click from chat to self-hosted copy of the chat

Dump alternative branches

As I usually update my messages to ChatGPT iteratively to improve replies or to create a part of the message with AI help, I'd like to be able to optionally dump every conversation branch as a separate conversation (in the same html).

Could you please add a version of the bookmarklet that does that?

P.S. Many thanks for this very useful tool!

Configuring commit squashing for pull requests

I have a PR but it's messy - 12 commits of iterative tweaks and having difficulties squashing them on my end -- could you allow commit squashing? https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/configuring-pull-request-merges/configuring-commit-squashing-for-pull-requests

Add different saving strategies

Just had an idea while reading old issue #13 to create saving strategies, old bookmark file will still be the same but the GitHub pages app will have a way to pick different saving methods:

Strategies

• download file
• Save to gist
• Save into file in GitHub repo (investigate how)

If you have any other ideas for a different saving strategy, add a comment

Test the last feature to add conversation to this repo, it will require to have a configuration like a directory pattern. It may require using isomorphic-git

I get a error now with this bookmark trick.

when i found this i get really happy. Doing so well to get format out from GPT.

But now seams it broken.

i get a error Saying this

Cannot read properties of null (reading 'src')

ChatGPT Bookmarklet using Light Theme

Thank you so much for the Save chatGPT Bookmarklet. Would it be possible to save the history using the chatgpt light theme? It seems that the saved bookmarklet only shows the conversations using the dark theme. Thanks.

Let me configure where it saves the file

I have a utility that automatically uploads files to a public S3 location.

I'd like to be able to use this excellent utility to save it to a calendar-structured sub-folder of that public folder.

I am a programmer and have written bookmarklets. I looked at the code but didn't see clearly enough how to make this kind of change, and i don't want to get out of sync with your changes anyway.

Formatting, HTML Theme and Printing

Is it possible to optionally keep the dark theme of ChatGPT in the output html?

As a quick test I did try just dropping the chat.openai.com's CSS in there and it got code-blocks right, but everything else was grayed out.

Also, when printing (mainly to PDF for sharing), code blocks and conversation overlap, not sure if that can be avoided easily...

Missing Code Block Black Background Can Make Code Unreadable

The text in code blocks is somewhat unreadable, since the black background is missing:

Original view:

Saved View

Bookmarklet silently crashes on Firefox

Error message from the console:

Uncaught DOMException: Document.querySelector: 'main > .flex-1 > .h-full .flex:has(> .w-full)' is not a valid selector

It would be nice to have an alert or something.

Also, please tell me if I can provide additional diagnostics for the bug itself.

Add support for exporting saved chats (HTML elements differ)

With the addition of multiple chat/history support on ChatGPT, this script seems to break if you want to export a previous chat that is saved instead of a fresh new/live chat.

This seems to be an issue with the HTML classes in use which differ between a live chat session and a non-live session.

The script is looking for classes starting with react-scroll-to-bottom but this class apparently isn't used with the new multiple chat feature.

I'm not sure the proper elements to use or the best way to select them, but here is a hacky way I've used which at least demonstrates the difference in classes/elements/structure. Clearly I'm not super experienced with proper CSS markup. 😅

Query Selector

document.querySelector('main > .flex-1 > .h-full').innerHTML

Styles

(dropped react-scroll-to-bottom and added .text-base)

.flex > div:nth-child(2n+1) .text-base {
    background: lightgray;
}
.flex > div:nth-child(2n+2) .text-base{
    background: darkgray;
}
.flex > div:not(:last-child) .text-base{
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
.items-end {
  display: none !important;
}

how does it work

i was wondering how it works , just curious

Add cache busting to webiste

There is a need to always fetch the latest bookmark.

I would use fetch commit using API like in LIPS bookmark L43-L53.

saving the python generated code in a 'code interpreter session'.

Hi,
Congrats on the code!
Would it be possible to save both the python generated code and the results of its running together in the chat history?

Regards,