Git Product home page Git Product logo

claude-export's Introduction

Export/Download Claude Conversations (claude-export)

GitHub license

Working as of March 20, 2024

This browser script formats and downloads Anthropic Claude conversations to markdown, JSON, and PNG for sharing and exporting chat logs.

You can export the active Claude chat log directly from the browser console, entirely locally. No data is sent to any server.

Supports the latest Claude web UI as of March 20, 2024.

Usage

  1. Navigate to claude.ai.
  2. Open the chat thread you'd like to export.
  3. Open the browser console (how to open console: Chrome, Firefox, Safari)
  4. Follow the below steps depending on which output type you'd like.

Important

Always be careful when pasting code into the console. Only paste code from trusted sources, as it can be used to execute malicious code. You can explore this repository and verify the code before pasting it into the console, or clone and build the code yourself.

JSON

  1. Copy contents of /dist/json.min.js
  2. Paste into browser console

Example output (JSON):

{
    "meta": {
        "exported_at": "2024-03-19 16:03:09",
        "title": "Sending Javascript Requests"
    },
    "chats": [
        {
            "index": 0,
            "type": "prompt",
            "message": [
                {
                    "type": "p",
                    "data": "How can I send a request in Javascript?"
                }
            ]
        },
        {
            "index": 1,
            "type": "response",
            "message": [
                {
                    "type": "p",
                    "data": "In JavaScript, you can send a request using the built-in fetch function or the XMLHttpRequest object. Here's an example using fetch:"
                },
                {
                    "type": "pre",
                    "language": "javascript",
                    "data": "fetch('https://api.example.com/data')\n  .then(response => response.json())\n  .then(data => {\n    // Handle the response data\n    console.log(data);\n  })\n  .catch(error => {\n    // Handle any errors\n    console.error('Error:', error);\n  });"
                },
                {
                    "type": "p",
                    "data": "In this example, fetch sends a GET request to the specified URL (https://api.example.com/data). The then block is used to handle the response. The first then converts the response to JSON format using response.json(), and the second then receives the parsed JSON data, which you can then process as needed."
                },
            ]
        },
    ]
}

Markdown

  1. Copy contents of /dist/md.min.js
  2. Paste into browser console

Example output (Markdown):

# Sending Javascript Requests
`2024-03-19 16:04:20`

_Prompt_:
How can I send a request in Javascript?

_Claude_:
In JavaScript, you can send a request using the built-in fetch function or the XMLHttpRequest object. Here's an example using fetch:

```javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
    // Handle the response data
    console.log(data);
})
.catch(error => {
    // Handle any errors
    console.error('Error:', error);
});
```

In this example, fetch sends a GET request to the specified URL (https://api.example.com/data). The then block is used to handle the response. The first then converts the response to JSON format using response.json(), and the second then receives the parsed JSON data, which you can then process as needed.

Image (.PNG)

  1. Copy contents of /dist/image.min.js
  2. Paste into browser console

Note

Downloading as an image uses the html2canvas library to take a screenshot of the chat log. This may take a few seconds to process.

Example output (Image Export):

alt text

Limitations

This is a trivial implementation as Claude currently does not support sharing or exporting conversations. It may break with future changes.

It currently supports:

  • Paragraphs / Text
  • Lists
  • Code blocks
  • Tables

Acknowledgements

  • html2canvas - Used to take a screenshot of the chat log and export as a PNG.

You May Also Like

chatgpt-export - Export OpenAI ChatGPT conversations to markdown, JSON, and PNG for sharing and exporting chat logs.

Future Development

  • Nested code blocks (within lists)
  • Nested lists
  • Fix syntax highlighting
  • Trim whitespace on exported images

claude-export's People

Contributors

ryanschiang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

claude-export's Issues

`BLOCKQUOTE` support

blockquote disappears. Here is a simple implementation.

// Quotes
if (tag === "BLOCKQUOTE") {
  for (const line of text.trim().split("\n")) {
    markdown += `> ${line}\n`;
  }
}

`chatContainer` is `null`

The class of the chat container seems to have changed and chatContainer is null.

<div class="flex-1  flex  flex-col  gap-3  px-4  max-w-3xl  mx-auto  w-full pt-12 md:pt-16">

It may change again, so I cut it and it works.

--- a/src/util/getContents.js
+++ b/src/util/getContents.js
@@ -1,7 +1,7 @@
 module.exports = function () {
     // Get parent chat container
     const chatContainer = document.querySelector(
-        "div.flex-1.flex.flex-col.gap-3.px-4.pt-16"
+        "div.flex-1.flex.flex-col.gap-3.px-4"
     );

     // Get chat title (if exists)

Changing `DIV` hierarchy

The div has been added to the chat body and firstChild cannot be retrieved properly.

I can get the content by going down one level.

--- a/src/exportMarkdown.js
+++ b/src/exportMarkdown.js
@@ -17,6 +17,10 @@ const getContents = require("./util/getContents");
     // Get first child
     var firstChild = ele.firstChild;
     if (!firstChild) continue;
+    if (firstChild.firstChild?.tagName === "DIV") {
+      firstChild = firstChild.firstChild;
+    }
+    if (!firstChild) continue;

     // Element child
     if (firstChild.nodeType === Node.ELEMENT_NODE) {

Get Markdown from Copy button

To get Markdown, it is reliable to hook the text sent to the clipboard from the Copy button.

I implemented this in a simple way. It requires exportMarkdown to be async. Since the clipboard cannot be manipulated without user interaction, the original method is not called.

if (ele.classList.contains("font-claude-message")) {
  markdown += `_Claude_:\n`;
  var clip = navigator.clipboard;
  if (!clip._writeText) clip._writeText = navigator.clipboard.writeText;
  for (var copy of Array.from(ele.nextSibling.getElementsByTagName("button")).filter(b => b.innerText == "Copy")) {
    await new Promise((resolve, reject) => {
      navigator.clipboard.writeText = async arg => {
        markdown += arg.trimEnd() + "\n";
        resolve();
      };
      try {
        copy.click();
      } catch (e) {
        reject(e);
      }
    });
  }
  navigator.clipboard.writeText = navigator.clipboard._writeText;
} else {

Getting prompts still require the existing converter.

`OL` is not numbered correctly

Nodes other than li are enumerated, so ol is not numbered correctly.

It can be worked around by counting the numbers.

--- a/src/exportMarkdown.js
+++ b/src/exportMarkdown.js
@@ -43,12 +47,13 @@ const getContents = require("./util/getContents");

           // Get list items
           if (tag === "OL") {
-            childNode.childNodes.forEach((listItemNode, index) => {
+            var index = 0;
+            childNode.childNodes.forEach((listItemNode) => {
               if (
                 listItemNode.nodeType === Node.ELEMENT_NODE &&
                 listItemNode.tagName === "LI"
               ) {
-                markdown += `${index + 1}. ${
+                markdown += `${++index}. ${
                   listItemNode.textContent
                 }\n`;
               }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.