-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.htm
133 lines (107 loc) · 8.54 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Pager - A Bookmarklet for exporting a whole ChatGPT chat - Install here</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.classless.min.css"
/>
<style>
#target {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
#target:hover {
background-color: #0056b3;
}
.explain{font-size: small;}
.container_head {
display: flex;
align-items: center;
gap: 20px;
}
.container_head img {
max-width: 150px;
height: auto;
}
summary {color: #0056b3;}
</style>
</head>
<body>
<header>
<a style="float:right;" href="https://github.com/ulrischa/chat_pager"><img decoding="async" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png" class="attachment-full size-full" alt="Fork me on GitHub" loading="lazy"></a>
<div class="container_head">
<img src="exporter.webp" />
<h1>Install 'Chat Pager' -<br />the Bookmarklet to export a ChatGPT Chat</h1>
</div>
</header>
<main>
<p>This bookmarklet exports the whole current chat from ChatGPT (not only the last answer) including your prompts in html contents. When you run the bookmarklet, the html contents is stored in the clipboard. You then save it, send it, <a href="https://github.com/ulrischa/mail2github">archive</a> it or paste it where you want. It is a full styled html file - not only a snippet.</p>
<strong><a id="target" href="javascript:(()=>{try{var e=document.querySelectorAll("article"),t=(new Date).toLocaleString(),r=` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Chat Export</title> <link rel="stylesheet" href="https://unpkg.com/mvp.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"> <link rel="stylesheet" href="https://ulrischa.github.io/chat_pager/chat_pager_style.css"> </head> <body> <h1><a href="${window.location.href}" target="_blank">${window.location.href}</a></h1> <div class="timestamp">Exported on: ${t}</div> <div class="chat-container"> `,a=(e.forEach(function(e,t){var a=e.querySelector(".whitespace-pre-wrap, .markdown"),l="";a&&(e.querySelectorAll("img[width][height]").forEach(function(e){l+=e.outerHTML}),r+=` <div class="chat-message ${t%2==0?"right":"left"}"> <div class="chat-bubble ${t%2==0?"right":"left"}"> ${l}${a.innerHTML} </div> </div> `)}),r+=` </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script> hljs.highlightAll(); document.querySelectorAll("button.flex.gap-1.items-center.select-none.py-1").forEach(btn => { btn.addEventListener("click", function () { var pre = btn.closest("pre"); if (pre) { var code = pre.querySelector("code"); if (code) { var textarea = document.createElement("textarea"); textarea.value = code.innerText; document.body.appendChild(textarea); textarea.select(); try { document.execCommand("copy"); alert("Code copied to clipboard."); } catch (e) { alert("Failed to copy code."); } document.body.removeChild(textarea); } } }); }); </script> </body> </html> `,document.createElement("textarea")),l=(a.value=r,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a),a.select(),document.execCommand("copy"));document.body.removeChild(a),l?alert("Complete HTML file with syntax highlighting and timestamp copied to clipboard."):alert("Failed to copy the content.")}catch(e){alert("Error: "+e)}})();">Chat Pager</a></strong>
<br />
<br />
<details>
<summary>How to install a bookmarklet</summary>
<div class="explain">
<h2>How to Install a Bookmarklet</h2>
<p>If you want to install the bookmarklet from this page, follow the steps below for your device and browser:</p>
<h3>On Desktop</h3>
<h4>Google Chrome</h4>
<ol>
<li>Make sure the bookmarks bar is visible. Go to <strong>Menu (⋮)</strong> → <strong>Bookmarks</strong> → <strong>Show Bookmarks Bar</strong>.</li>
<li>Click and drag the bookmarklet link to the bookmarks bar.</li>
<li>Done! You can now click the bookmarklet to use it.</li>
</ol>
<h4>Mozilla Firefox</h4>
<ol>
<li>Ensure the bookmarks toolbar is visible. Go to <strong>Menu (≡)</strong> → <strong>Bookmarks</strong> → <strong>Bookmarks Toolbar</strong> → <strong>Always Show</strong>.</li>
<li>Click and drag the bookmarklet link to the bookmarks toolbar.</li>
<li>Done! You can now click the bookmarklet to use it.</li>
</ol>
<h4>Microsoft Edge</h4>
<ol>
<li>Make sure the favorites bar is visible. Go to <strong>Menu (⋯)</strong> → <strong>Settings</strong> → <strong>Appearance</strong> → <strong>Show Favorites Bar</strong>.</li>
<li>Click and drag the bookmarklet link to the favorites bar.</li>
<li>Done! You can now click the bookmarklet to use it.</li>
</ol>
<h4>Safari (macOS)</h4>
<ol>
<li>Enable the favorites bar by going to <strong>View</strong> → <strong>Show Favorites Bar</strong>.</li>
<li>Click and drag the bookmarklet link to the favorites bar.</li>
<li>Done! You can now click the bookmarklet to use it.</li>
</ol>
<h3>On Mobile</h3>
<h4>Google Chrome (Android/iOS)</h4>
<ol>
<li>Long-press the bookmarklet link and choose <strong>Copy Link Address</strong>.</li>
<li>Bookmark any webpage by tapping <strong>Menu (⋮)</strong> → <strong>Bookmark</strong>.</li>
<li>Go to <strong>Menu (⋮)</strong> → <strong>Bookmarks</strong>, find the newly created bookmark, and tap the <strong>Edit</strong> button (pencil icon).</li>
<li>Replace the URL with the copied bookmarklet code and save.</li>
<li>Done! You can now tap the bookmarklet to use it.</li>
</ol>
<h4>Safari (iOS)</h4>
<ol>
<li>Long-press the bookmarklet link and choose <strong>Copy</strong>.</li>
<li>Bookmark any webpage by tapping the <strong>Share</strong> icon (square with arrow) → <strong>Add Bookmark</strong>.</li>
<li>Go to <strong>Bookmarks</strong>, tap <strong>Edit</strong>, and select the bookmark you just created.</li>
<li>Replace the URL with the copied bookmarklet code and save.</li>
<li>Done! You can now tap the bookmarklet to use it.</li>
</ol>
<h4>Mozilla Firefox (Android/iOS)</h4>
<ol>
<li>Long-press the bookmarklet link and choose <strong>Copy Link</strong>.</li>
<li>Bookmark any webpage by tapping <strong>Menu (≡)</strong> → <strong>Add to Bookmarks</strong>.</li>
<li>Go to <strong>Menu (≡)</strong> → <strong>Bookmarks</strong>, find the newly created bookmark, and tap <strong>Edit</strong>.</li>
<li>Replace the URL with the copied bookmarklet code and save.</li>
<li>Done! You can now tap the bookmarklet to use it.</li>
</ol>
<p><strong>Note:</strong> Always start by opening a webpage before using a bookmarklet, as they often work on the currently loaded page.</p>
</div>
</details>
</main>
</html>