概要

日々の開発やリサーチで、Google検索の「AIモード（AI Overview）」や「Gemini」を使う機会がすっかり定着しました。
しかし、後から情報を見返したり、社内WikiやNotionにまとめようとしたとき、標準のコピー機能では**「リストのインデント階層が崩れる」「参考リンクのURLが消える」**といった問題があり、手作業でMarkdownを修正するのに地味なストレスを感じていました。

そこで、ワンクリックでAIの質疑応答を**リッチなMarkdown形式（階層構造やリンクを保持）**としてクリップボードにコピーできるChrome拡張機能「Gemini-Search-MD-Copier」を開発しました。

GitHubリポジトリ: t-inada-shokai/Gemini-Search-MD-Copier

本記事では、ツールの紹介とあわせて、複雑怪奇なGoogleのDOMから美しいMarkdownを生成するための「泥臭い（だけど実用的な）ハック」について解説します。

主な機能と実際の動作

この拡張機能は、単に画面のテキストを抜いてくるだけではありません。以下のフォーマットを自動で解析・補正します。

１． 箇条書きの階層（インデント）を論理的に維持
２． Gemini特有の特殊タグ（<sequence>等）のステップ展開に対応
３． AIが提示する「関連リンク」を <details> タグで折りたたみ可能な形で抽出
４． コードブロックの言語名（js, pyなど）を付与

外部ライブラリにいっさい依存せず、Manifest V3 + Vanilla JavaScriptの軽量構成で作っています。

技術的なハイライト：どうやってDOMをMarkdownに翻訳しているか

GoogleのAI回答部分は、単純に .innerText で取得すると構造が破綻します。今回、パーサーを自作する上で特に苦労・工夫した2つのポイントをご紹介します。

1. リストの「見た目のインデント」を「論理階層」に再計算する

HTMLのネスト構造が複雑な場合、単純にDOMツリーを潜るだけでは箇条書きの階層（深さ）が正しく測れません。
そこで、reIndentMarkdownStyles 関数を実装し、「行頭のスペース数を計測し、辞書構造（indentMap）に記録して階層の深さを再計算する」というアプローチをとりました。


// インデントを論理階層に基づいて再調整するコア処理
let indentMap = { 0: 0 };
let currentMaxDepth = 0; // 「階層の深さ（0, 1, 2...）」を管理

for (let line of lines) {
  const originalIndent = line.search(/\S|$/);

  // 1. 辞書にない新しいインデントなら登録し、最大深度を更新
  if (indentMap[originalIndent] === undefined) {
    currentMaxDepth += 1; // 階層を掘り下げる
    indentMap[originalIndent] = currentMaxDepth;
  }

  // 2. 前行と比較してインデントが戻った（浅くなった）場合のクリーンアップ
  const lastOriginalIndent = processedLines.length > 0 ? getIndent(lines[processedLines.length - 1]) : 0;
  if (originalIndent < lastOriginalIndent) {
    // 現在より深い階層の辞書データを削除
    Object.keys(indentMap).forEach(key => {
      if (parseInt(key) > originalIndent) {
        delete indentMap[key];
      }
    });
    // 最大階層を再計算
    currentMaxDepth = indentMap[originalIndent] || 0;
  }

  // 3. 辞書に沿って新しいインデント（スペース）を適用
  const newIndentLevel = indentMap[originalIndent];
  const indentedLine = indentUnit.repeat(newIndentLevel) + content;
  processedLines.push(indentedLine);
}

これにより、画面上の見た目に近い形でインデントされMarkdownとして出力されます。

2. Gemini特有の特殊タグ `<sequence>` のパース手法

Geminiのチャット画面を解析していて直面したのが、Google特有のカスタムタグ（Web Components）の存在です。
たとえば、Geminiが段階的な手順やプロセスを回答する際、ただの <ul> や <ol> ではなく、<sequence> という独自のタグ構造が使われることがあります。
これを無視するとテキストが欠落してしまうため、パーサー内で明示的に sequence タグとその子要素を拾い上げる処理を追加しました。

JavaScript


// GeminiのDOMパース処理（switch文の一部抜粋）
case 'sequence':
  childContent = '';
  const sequencelines = element.querySelectorAll("div.sequence-event");

  if (sequencelines) {
    // インデントレベルの計算
    const totalLeftSpace = getLeftPixels(element);
    let indentLevel = Math.max(0, Math.floor(totalLeftSpace / 20));
    const indentStr = indentUnit.repeat(indentLevel);

    sequencelines.forEach(child => {
      // マーカー（番号など）、タイトル、サブタイトル、詳細をそれぞれ抽出
      const markerEl = child.querySelector("div.sequence-event-marker");
      const divmarker = markerEl ? markerEl.innerText.trim() : "";
      const divtitle = convertToMarkdownGemini(child.querySelector("div.sequence-event-title"));
      const divsubtitle = convertToMarkdownGemini(child.querySelector("div.sequence-event-subtitle"));
      const divdetail = convertToMarkdownGemini(child.querySelector("div.sequence-event-description>structured-node-sequence"));

      // Markdownリストのフォーマットに組み立て
      if (divmarker) {
        const zenkakuMarker = toZenkakuNumString(divmarker);
        childContent += `${indentStr}- ${zenkakuMarker} ${divtitle.trim()}\n`
          + `${indentStr}${indentUnit}*${divsubtitle.trim()}*\n`
          + `${indentStr}${indentUnit}${divdetail.trim()}\n`;
      } else {
        // マーカーがないパターンの処理...
      }
    });
  }
  return `\n${childContent}\n`;

見慣れないタグが動的に生成されるのはモダンなWebアプリならではですが、このようにクラス名やカスタムタグ名で確実にフックすることで、複雑なUIコンポーネントもMarkdownのリストと斜体（イタリック）を組み合わせたテキストに翻訳することができました。

ちょっと便利な副産物：「関連サイト」の折りたたみ

個人的に気に入っているのが、AI回答の末尾につく「関連サイト」リンク群の処理です。
そのままMarkdownに書き出すとリンクの羅列で縦に長くなりすぎるため、本拡張機能では HTMLの <details> と <summary> タグを用いて折りたたみ可能なアコーディオンとして出力するようにしました。NotionやGitHubのプレビューでもそのまま折りたためるので、ドキュメントがすっきりします。

まとめと今後の展望

今回、UIが頻繁に変わるGoogle検索やGeminiのDOM解析に挑みましたが、「属性（jsname等）」や「カスタムタグ（<sequence>等）」をベースにすることで、ある程度堅牢な抽出ツールを作ることができたと思います。
今後もGoogle側のUI変更を継続的にウォッチしつつ、さらにパースの精度を上げていきたいと考えています。
ソースコードはすべてGitHubにて公開しています。「もっとスマートにパースできるよ！」「この画面だと崩れた！」といったご意見があれば、ぜひスター（⭐）やIssue、Pull Requestをお待ちしています。

GitHub: t-inada-shokai/Gemini-Search-MD-Copier