ChatGPTとの会話をMarkdownに変換するブックマークレット #JavaScript

ChatGPTとの会話をMarkdown形式のテキストとして別ウィンドウに表示します。
リスト、ソースコード、表にも対応しました。

javascript:(function() {
  if (!document.URL.startsWith('https://chat.openai.com')) {
    alert('Please use on https://chat.openai.com');
    return;
  }
  const sanitize = html => {
    return String(html).replace(/&/g,'&amp;')
      .replace(/</g,'&lt;')
      .replace(/>/g,'&gt;')
      .replace(/"/g,'&quot;');
  };
  const table = element => {
    const rows = [...element.rows].map(row => [...row.cells].map(cell => cell.innerText));
    const header = rows.shift();
    const separator = header.map(() => '---');
    const body = rows.map(row => `| ${row.join(' | ')} |`);
    return `| ${header.join(' | ')} |\n|${separator.join('|')}|\n${body.join('\n')}`;
  };
  const escapeTags = text => {
    return String(text).replace(/<(\/?[a-zA-Z]+)>/g, '`<$1>`');
  };
　const content = element => {
    const tag = element.tagName;
    if (tag === 'OL') return [...element.querySelectorAll('li')].map((li, i) => `${i+1}. ${li.innerText}`).join('\n');
    if (tag === 'UL') return [...element.querySelectorAll('li')].map(li => `- ${li.innerText}`).join('\n');
    if (tag === 'PRE') {
      const lang = element.querySelector('span').innerText;
      return '```' + lang + '\n' + element.querySelector('code').innerText + '```';
    }
    if (tag === 'TABLE') return table(element);
    return escapeTags(element.innerText);
  };
  const messages = [...document.querySelectorAll('div[data-message-author-role]')];
  const text = messages.map((m, i) => {
    const who = m.getAttribute('data-message-author-role') == 'user' ? 'あなた' : 'ChatGPT';
    const elements = m.querySelectorAll('p,ol,ul,pre,table');
    const c = elements.length === 0 ? m.innerText : [...elements].map(e => content(e)).join('\n\n');
    return `## ${who}:\n${c}`;
  }).join('\n\n');
  const w = window.open('', 'target', 'width=640,height=600');
  w.document.write(`<body><pre style="white-space: pre-wrap;">${sanitize(text)}</pre></body>`);
  w.document.close();
})();

ChatGPTによる説明:

このブックマークレットは、OpenAIのチャットアプリケーションの画面でChatGPTとの会話履歴をMarkdown形式に変換して表示するものです。以下の手順で動作します。

現在のURLがOpenAIのチャットページであるかどうかを確認します。
sanitize関数を定義し、HTMLのエスケープ処理を行うために使用します。
table関数を定義し、テーブルタグをMarkdown形式のテキストに変換します。
content関数を定義し、各要素をMarkdown形式のテキストに変換します。
.text-baseクラスを持つ要素に対して、ChatGPTとの会話の各部分を取得します。
取得した各部分をMarkdown形式に変換します。
変換されたテキストを新しいウィンドウに表示します。

このブックマークレットは、ユーザーがOpenAIのチャットアプリケーションでChatGPTとの過去の会話をMarkdown形式で表示し、コピーや保存などの用途に使用することができます。