🐕

【ChatGPT】チャット履歴の保存サービス作った

2023/03/23に公開

JavaScript

ChatGPTで過去のチャットリストとかログとかが全部消えて見れない障害？バグ？が発生してたので、チャットのログを保存できるサービスをなんとなく作りました。

動画で見たほうが早いと思うのでどうぞ！

こんなかんじでChatGPTの画面上で今チャットしているところまでのスナップショットをとって保存しておけるものです。

ChatGPTスナップショットの使い方

使い方はざっくり以下のようなかんじ

ChromeでTampermonkeyという拡張機能をインストール
Tampermonkeyにユーザースクリプト追加
ChatGPTにアクセスする

拡張機能入れないといけないのかーって思った人はコンソールに直接貼り付けるだけでも動くので大丈夫です！
（毎回貼り付けないとだからめんどくさいけど）

Tampermonkeyをインストール

Chrome拡張機能の Tampermonkey をストアからインストールしてください。

この拡張機能は、ウェブページで任意のスクリプトを実行するためのものです。

インストールするとChromeの右上にアイコンが追加されると思うので、そこをクリックして「新規スクリプト追加」を選択

ユーザースクリプトを追加

スナップショットとるためのユーザースクリプトは以下です。

ちなみに、これそのままコンソール貼り付けても動くので拡張機能入れるのめんどくさい人はどぞ！

// ==UserScript==
// @name         ChatGPT Snapshot Generator
// @namespace    https://ex.sigr.io/chatgpt-log/
// @version      1.0
// @description  try to take over the world!
// @author       LostMyCode
// @match        https://chat.openai.com/chat
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @github       https://github.com/LostMyCode
// @require      https://ex.sigr.io/chatgpt-log/userscript-m.js
// @grant        none
// ==/UserScript==

/**
 * Created by @LostMyCode
 * https://github.com/LostMyCode
 */

function updateStatus(text) {
    const el = document.getElementById("snapshot-status");
    if (!el) return;

    el.innerText = text;
}

function gen() {
    updateStatus("Generating...")
    const el = document.querySelector(".items-center");
    if (!el.parentNode.className.includes("react-scroll-to-bottom--css-")) throw new Error("Error: Wrong elm")

    const data = {
        title: document.title,
        html: el.innerHTML
    }

    fetch('https://ex.sigr.io/chatgpt-log/new.php', {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
            console.log("chat log created:", `https://ex.sigr.io/chatgpt-log/${data}`);
            updateStatus("Done");
            document.getElementById("snapshot-link").innerHTML = `<a href="https://ex.sigr.io/chatgpt-log/${data}" target="_blank">https://ex.sigr.io/chatgpt-log/${data}</a>`;
        })
        .catch(e => {
            console.log("chat log error");
            updateStatus("Error");
        });
}

window.generateSnapshot = gen;

const div = document.createElement("a");
div.addEventListener("click", () => {
    console.log("click gen");
    gen();
});

div.id = "supersonic";
div.style = "padding: 10px; position: fixed; top: 10px; right: 10px; background: rgba(0,0,0, 0.7); z-index: 9999; color: #fff;";
div.innerHTML = `
<div>Status: <span id="snapshot-status">Ready</span></div>
<div style="padding: 5px; background: rgba(37, 83, 156, 0.8); text-align: center;">Generate</div>
<div id="snapshot-link"></div>
`

document.body.appendChild(div);