AIといっしょに､Google拡張機能開発 NotebookLMにURLを一括でぶちこむやつを作りたいぜ

NotebookLMってさ､URLを一気に突っ込めるといいと思うんだよね｡
だって､ソースにURLを突っ込んでもそのページ1枚しか見てくれないし､ページ内のURL全部読み込めるようにしてほしい｡NotebookLMってチョーSだよな｡

というわけでAI駆動開発も兼ねて､ページ内容とその中に含まれている同じドメインのURLを抽出して､NotebookLMに突っ込むGoogle拡張機能を作っていく

とりあえず最初はAIと壁打ちしながら要件定義(強めの言葉)

ChatGPTと｢こんなの作りたいんだけど､いい感じに要件定義してくれない?｣そう言って壁打ちして要件定義完了した｡ちなみに､AIと対話するときは､もっぱら音声入力派｡喋るってやっぱりいいよね､なんか頭の中でまとまるし｡

Google Chrome 拡張機能の要件定義書
ご説明いただいた内容から、「ノートブックLM」サービスに複数のURLを効率的に投稿するための拡張機能を開発することが目的と理解しました。それでは要件を整理していきましょう。

拡張機能名
URLToノートブックLM投稿ツール (仮)

目的
ノートブックLMサービスの入力欄に複数のURLを配列形式で投稿する作業を自動化し、効率化する。

主要機能
URL収集機能

現在開いているページのURLを取得する
複数のURLを蓄積・管理できる
フォーマット機能

収集したURLを配列形式 (["url1", "url2", ...]) に変換する
投稿機能

ノートブックLMの入力欄 (id="mat-input-0") に自動的にデータを挿入する
投稿ボタンを自動的にクリックする
投稿後、入力ページを再度開くか入力欄をクリアする
管理機能

収集したURLのリストを表示・編集・削除できる
UI構成
ポップアップインターフェース

現在のURLを追加するボタン
収集したURLのリスト表示
ノートブックLMに投稿するボタン
URLリストのクリアボタン
オプション画面

投稿後の動作設定（入力欄クリア or 再読み込みなど）
その他カスタマイズオプション
動作フロー
ユーザーが拡張機能アイコンをクリック
ポップアップが表示される
「現在のURLを追加」ボタンでURLを収集
必要なURLをすべて収集後、「投稿する」ボタンをクリック
ノートブックLMのページに移動し、収集したURLを配列形式で入力欄に挿入
投稿ボタンを自動クリック
設定に応じて入力欄をクリアまたはページを再読み込み
技術要件
Manifest V3形式のChrome拡張機能
JavaScript/HTML/CSSを使用
コンテンツスクリプトでノートブックLMのDOM操作
ローカルストレージを利用したURL情報の保存

えいとびーと

要件定義の内容をCline(自分はRoo cline)に突っ込む

Clineは､こういった設計書的なのを投げるといい感じにコードをもりもり書いてくれるすげーやつ｡
自分はプログラム1年の初心者なので､学習の機会にと｢Cline,ハンズオン形式でやってくれよ､機能を細かく分けて俺に書かせてくれ｣と指示して､出されたコードを写経している

えいとびーと

Clineにはメモリーバンクという機能があって､プロジェクトの概要や進捗内容をその中にマークダウンファイルでまとめてくれる｡毎回その内容を見ながら進めていく仕組みなので､同じことを何回もしないし､手戻りもしない｡

なにより良いのが､数日間サボって､久しぶりに起動しても、｢つづきをやっていきましょう｣と書き込むだけで進捗を確認して､続きからやれること｡手間なく即続きから作れるから､コードを書くハードルがすっげー下がって最高!!!!!!!!

えいとびーと

コードを一気に書いてくれるせいで､写経がしづらいことが多々発生する｡
そういうときは､こんな小学生並みの｢お願い｣を入力すると､親身に軌道修正してくれる

えいとびーと

Clineにはメモリーバンクという機能があって､プロジェクトの概要や進捗内容をその中にマークダウンファイルでまとめてくれる｡毎回その内容を見ながら進めていく仕組みなので､同じことを何回もしないし､手戻りもしない｡
なにより良いのが､数日間が空いても､｢つづきをやっていきましょう｣と書き込むだけで進捗を確認して､続きからやれること｡手間なく即続きから作れるから､コードを書くハードルがすっげー下がって最高!!!!!!!!

今までの進捗をZENNに書いたところで､つづきをやっていく｡
こんなふうに､メモリーバンクを確認して進捗を確認してくれるので､サボって何日空いても続きをすぐに始められる｡本当素敵

えいとびーと

写経するときはCline(VScode)の上に､JetbrainのIDEを乗せている｡ IDEを2つ使う謎体制だ
Clineが書いたコードをSaveする前に､一方のIDEで同じファイルを開いて変更部分を加筆していく｡
インデントミスったり､適当な写経でもCline側でSAVEボタン押して上書きすれば良い｡

えいとびーと

コード書いている間､｢paddingってなんだよぉ~~｣とか心に思うことがある｡
細かく検索するのも大変なので､そういうときはCopilotのボイスチャットを開きっぱなしにして､小言の質問を全力で答えてもらう｡俺はAIに全力で縋る!

検索すること自体が面倒すぎて学習のハードルになることあるよね｡でもCopilotとボイスチャットしながらだと､すごい雑なコードの解説でもある程度理解してくれるし､解説してくれる｡検索してふむふむり､するのもいいけど､これもいいなぁと思っている

えいとびーと

Copilotがラジオの会話に反応するのがネック｡ボートレースの会話に反応するな!

えいとびーと

写経をするまえに､加筆されたコードをAIに解説してもらうのがおすすめ｡
こんな機能を追加するんだなーとイメージ持ちながら書ける｡
写経終わったあと､Copilotに｢この追加した行は〇〇をするんだよね?｣と確認していくようにラバーダックな会話をすると､めちゃめちゃ頭に入る｡

結局わからないって部分も多いけど､今後たくさん開発する中でわかっていったらいいかな･･?

えいとびーと

どばーーー!っとコードを書かれることがある｡そういうときは｢一気に機能を追加しすぎ｡細かく分けてハンズオン形式でやってください｣と一喝すると機能単位のコード追加にしてくれる｡ありがとうAI

えいとびーと

Javascriptって､怖かったけどよくよく見てみるとaddEventlistnerでクリックされたときに反応したり､getElementbyIdでなんか拾ったり､意外とシンプル

えいとびーと

恥ずかしながら､この数時間(ウマ娘プリティーダービー2時間やってたけども)の間､CopilotにJavascriptの記法を聞いてた｡
Windowってなんだよ!
Window.locationってなんだよ!
locationしたらURL拾えるんァ!?
hostnameでドメインまで拾えるんかぁ!?