YouTube からGemini Notebook Mind Mapを作成するChrome拡張機能

以前、YouTube動画をNotebookLMへ追加し、マインドマップの作成までを自動化するChrome拡張機能を作成した。

YouTube からNotebookLMに追加しマインドマップを作成

この拡張機能はAPIを使わず、NotebookLMのWeb画面をコンテンツスクリプトから操作する仕組みである。そのため、前の記事にも書いたとおり、画面の構成や表示される文言が変わると動作しなくなる可能性があった。

その後、NotebookLMからGemini Notebookへの変更に伴って、サービスの名称、URL、画面構成が変わり、拡張機能が正常に動作しなくなった。そこで、新しいGemini Notebookの画面に合わせて拡張機能を更新した。

OpenAI Codex を使って、コードの修正およびこの記事の原稿作成を行った。

更新後の拡張機能
動作しなくなった理由
主な変更内容
使い方
コード
注意

更新後の拡張機能

拡張機能の名称を「YouTube to Gemini Notebook Mind Map」に変更した。基本的な目的は以前と同じで、YouTubeの動画ページから次の処理を自動で行う。

YouTubeのチャンネル名と同じ名前のノートブックを探す
ノートブックがなければ新しく作成する
動画URLをソースとして追加する
追加した動画のソースだけを選択する
Studioでマインドマップを作成する
作成したマインドマップの名前を動画タイトルへ変更する

新しい接続先は https://notebook.google.com/ である。旧URLから開いた場合にも対応できるように、移行前の https://notebooklm.google.com/ も当面は対象に残している。

動作しなくなった理由

この拡張機能はGemini Notebookの公開APIを利用しているわけではない。ブラウザに表示されたボタン、入力欄、ノートブックの一覧、ソースの一覧などを探し、人が画面を操作するのと同じ順序でクリックや入力を行っている。

このため、URLだけでなく、ボタンの文言、HTML要素の構造、画面遷移のタイミングなどが変わると、以前の処理では目的の要素を見つけられない。今回も単純にサービス名を置換するだけでは対応できず、新しい画面の状態を確認しながら処理を組み直す必要があった。

主な変更内容

名称とURLの変更

拡張機能名、ポップアップの表示、進捗メッセージ、エラーメッセージをGemini Notebookに合わせて変更した。また、拡張機能が操作対象とするURLを notebook.google.com に変更した。

画面遷移後も処理を継続

Gemini Notebookは、ホーム画面からノートブックを開くときや、新しいノートブックを作成するときに画面が切り替わる。この際、Chrome拡張機能のコンテンツスクリプトとの接続が一度切れる場合がある。

更新版では、タブの読み込み状態と操作スクリプトのバージョンを確認し、画面遷移後の新しいページへ再接続して処理を続けるようにした。最新版のスクリプトが動いている場合は、無意味な再読み込みを行わない。

追加した動画のソースだけを選択

既存のノートブックには、同じチャンネルの別の動画がすでに複数登録されていることがある。すべてのソースを選択したままマインドマップを作成すると、今回追加した動画だけの内容にはならない。

そこで、対象動画を動画IDまたは動画タイトルから特定し、「すべて選択」を使って一度選択を解除した後、対象のソース1件だけを選択するようにした。画面への反映が遅れる場合もあるため、クリック直後の状態をそのまま信じず、実際に選択状態が変わったことを確認してから次へ進む。

既存ソースがある場合も処理を継続

実機で確認を進めると、対象の動画がすでにソースとして登録されている場合に、同じソースをもう一度追加した後、マインドマップの作成へ進まない問題が見つかった。

Gemini Notebookのソース一覧は、件数が多いと画面に見えている範囲だけがHTMLとして読み込まれる。そこで、一覧をスクロールしながら画面外のソースも探索し、既存ソースが見つかった場合は再追加せず、そのソースを選択してマインドマップ作成へ進むようにした。過去の試行で同じ動画が複数登録されている場合も、そのうち1件だけを選んで処理を継続する。

また、URL入力の確定や「挿入」ボタンの操作が二重に送信される可能性もなくし、1回の操作で同じソースが重複登録されないようにした。

YouTubeのA/Bテストによるタイトルの違いに対応

YouTubeでは、同じ動画でも閲覧者や表示条件によって異なるタイトルやサムネイルを表示するA/Bテストが行われることがある。このため、ブラウザ上の動画タイトルと、Gemini Notebookへ追加されたソース名が一致しない場合があった。サムネイルそのものの違いではなく、同時に表示されるタイトルの違いがソース照合に影響していた。

更新版では、ポップアップ表示と完成したマインドマップの名前には、利用者がYouTube画面で見ているタイトルを使用する。一方、Gemini Notebook内のソースを探すときは、YouTubeのoEmbedから取得した標準タイトルも使用するようにした。YouTube内を画面遷移した直後には、URLの動画IDと取得した動画情報が一致するまで待ち、直前に開いていた動画の情報を誤って使わないようにもしている。

日本語のマインドマップを指定

日本語の動画では、マインドマップ作成時の「希望するトピック」へ、次の指示を自動入力するようにした。

動画の内容を日本語で整理し、マインドマップ全体を日本語で作成してください。

これにより、日本語動画から作成したマインドマップが別の言語になることを避けやすくした。

新しく作成したマインドマップだけを改名

Studioに既存のマインドマップが複数ある場合、単に先頭または最後の項目を選んで名前を変更する方法は危険である。画面の再描画によって項目の順序やHTML要素が変わることもある。

更新版では、作成前に既存マインドマップのUUID一覧を記録し、作成後に新しく現れたUUIDの項目だけを対象にする。さらに、生成完了を画面上で確認した後、そのUUIDを持つマインドマップだけを動画タイトルへ変更する。既存のマインドマップやソースの名前は変更しない。

Gemini Notebookの現在の画面では、以前は表示されていたアイコンやボタンが完成後のカードに存在しないことがある。また、作成前後で一覧の総数が必ず1件だけ増えるとも限らない。そこで、特定のアイコンや件数だけに頼らず、作成前にはなかったUUID、生成中表示が消えたこと、タイトルと操作メニューが利用できることを組み合わせて完成を判定するようにした。

固定時間ではなく画面の状態を待つ

Webアプリケーションの処理時間は、通信状況やノートブックの内容によって変わる。一定秒数だけ待つ方法では、速い場合には無駄があり、遅い場合には処理の途中で次へ進んでしまう。

そのため、入力内容の反映、ソースの追加、選択状態の変更、マインドマップの生成完了などを画面の状態変化から判定するようにした。待機には上限も設け、条件を確認できない場合は、対象外のソースや既存マインドマップを誤って操作する前に中止する。

使い方

インストール方法と基本操作は以前とほぼ同じである。

chrome://extensions/ を開く
右上の「デベロッパーモード」を有効にする
「パッケージ化されていない拡張機能を読み込む」をクリックする
更新版の拡張機能フォルダーを選択する
字幕のあるYouTube動画を開く
拡張機能のアイコンをクリックし、「Gemini Notebookに追加」を押す

以前の版を読み込んでいる場合は、古い拡張機能を削除するか、更新版のフォルダーを読み込んだ後に拡張機能の再読み込みを行う。

コード

更新したコードはGitHubの次のリポジトリに置いてある。

dr-iot-dev/YouTubeToGeminiNotebookMindMap

現在の拡張機能のバージョンは 0.2.7 である。画面構造を模した自動テストも追加し、YouTubeの画面遷移とA/Bタイトル、既存・重複ソースの検出、仮想スクロール、ソースの選択、新規マインドマップの完成判定と名称変更、画面遷移後の再接続など、30項目が通ることを確認した。最後に実際のYouTube動画から、ソースの選択、マインドマップの作成、動画タイトルへの名称変更まで完了することも確認した。