ノンコーダーがAIで作った「スプレッドシート転記用Chrome拡張機能」

面倒なコピペ作業を自動化したい！

普段の業務の中で、**「Webページに表示されている情報をコピーして、スプレッドシートの決まった列にペーストする」**という単純なコピペ作業を繰り返していませんか？

私も塾の運営事務の中で、生徒のデータ登録や外部フォームからの転記作業に追われていました。

「1回のコピペは数秒でも、毎日何十回も繰り返すと膨大な時間とストレスになる…」

そう考えた私は、AIアシスタントに指示を出して、**「見ているWebページの特定のテキストを自動で読み込み、ボタン1つでGoogleスプレッドシートに直接転記するChrome拡張機能」**を作成することにしました。

AIへの実際の指示例

プログラムの知識がないため、以下のように直感的に指示を出しました。

AIへの指示: 「開いているWebページにある【お名前】【電話番号】【お問い合わせ内容】を自動で検出し、クリックするとGoogleスプレッドシートに新しい行として追加してくれるChrome拡張機能を作りたいです。スプレッドシートはGoogle App Script（GAS）を使ってAPIとしてデータを受け取る仕組みにしてください。まずは、全体のファイル構成とGASのコード、拡張機能のフォルダを作ってください」

この指示だけで、AIは必要なファイル（manifest.json、popup.html、content.js等）のコードと、受け側のGASのコードを提示してくれました。

開発の中で遭遇したトラブルと解決策

バイブコーディングの過程で、いくつか思い通りに動かないエラーがありました。

エラー1：特定のサイトでボタンが反応しない

原因: 対象のWebサイトが非同期でデータを読み込んでいるため、拡張機能の読み込みタイミングが早すぎて項目が見つからなかった。
AIへの相談: 「ボタンを押しても『データが見つかりません』と表示されます。ページの読み込みが完了してから情報を探すようにコードを調整してください」と報告。
解決策: AIが MutationObserver という監視コードを自動で追加し、無事にデータを拾えるようになりました。

エラー2：セキュリティ設定の警告が出る

原因: Chrome拡張機能の最新のセキュリティ基準（Manifest V3）に準拠していない古い書き方が混じっていた。
AIへの相談: 「Chromeに読み込ませたところ、Manifestに関する警告が出ました。Manifest V3に対応するように書き換えてください」
解決策: AIが設定ファイルを修正し、警告が消えました。

完成したツールの効果

完成したChrome拡張機能を自分のPCに導入したところ、以下の劇的な効果がありました。

作業時間が10分の1に: 今まで1件あたり1〜2分かかっていたコピー＆ペースト作業が、**わずか3秒（1クリック）**で終わるようになりました。
入力ミスがゼロに: 手動コピペでたまに発生していた「電話番号のコピペミス」や「行のズレ」が一切発生しなくなりました。

vibes codingの可能性

このツールを作るのに、プログラミング言語の文法書は1ページも読んでいません。エラーが出たらAIに画面のスクリーンショットやログを送り、直してもらうだけで完成しました。

「自分でコードを書く必要はない。大切なのは『何に困っていて、どう自動化したいか』を言葉にする力である」

と実感した開発でした。皆さんもぜひ、自分の手元の仕事を自動化する拡張機能を作ってみてください！