【個人開発】Chrome拡張×Go×Geminiで、ブラウザ操作もできるAIアシスタントを作ってみた
はじめに
最近、AIエージェントの開発に興味を持ち、 「ブラウザ上のあらゆる作業をサポートしてくれる自分だけのアシスタント」 を作りたいと思い立ちました。
既存のAIチャットツールも便利ですが、「今見ているページの内容を前提に会話する」ことや「ブラウザ操作を任せる」といった部分で、もう少しカスタマイズ性が欲しいと感じていました。
そこで、Google Gemini APIをバックエンドに据え、Chrome拡張機能をフロントエンドとした、ローカルで動作するAIチャットアプリ「AI Chat API」を開発しました。
本記事では、このプロダクトの技術構成や機能、工夫した点について紹介します。ポートフォリオとしての振り返りも兼ねています。
作ったもの
AI Chat API は、ブラウザのサイドパネルで動作するAIチャットボットです。
単なるチャットだけでなく、「現在閲覧中のWebページ」や「開いているPDF」の内容を自動でコンテキストとして認識したり、「ボタンをクリックして」といった指示を受けてブラウザ操作を提案したりすることができます。
技術スタック
今回の開発では、勉強の意味が結構強かったのであえてGoで書きました
業務で使っているのもありますが、結構書きやすくて個人的にお気に入りの言語です。
-
バックエンド: Go (1.18+)
- 高速な処理と並行処理の強さを活かすため採用。
-
google-generative-ai-goライブラリを使用してGemini APIと通信。
-
AIモデル: Google Gemini (Gemini Pro / Flash)
- 高速かつ安価、そしてFunction Calling (Tool use) の性能が高いため選定。
-
フロントエンド: Chrome Extension (HTML, JS, CSS)
- ブラウザと密に連携するため、Extensionとして実装。Manifest V3準拠。
-
インフラ/環境: Docker
- 環境構築の手間を減らすため、バックエンドはコンテナ化。
システム構成
基本的には以下のような構成になっています。
- Chrome拡張 (Sidepanel): ユーザーとのインターフェース。現在のアクティブタブのDOM情報やPDFのテキストを抽出し、リクエストに含めます。
- Go Backend: 拡張機能からのHTTPリクエストを受け取ります。
- Gemini API: バックエンドから受け取ったプロンプトとコンテキスト（ページ内容）を元に、応答を生成します。
- Tools (Function Calling): 必要に応じて、Google検索やNotion検索、ブラウザ操作（クリック/入力）のツールを実行します。
こだわり機能・実装ポイント
1. 閲覧ページのコンテキスト自動認識
ブラウザのサイドパネルで動く最大のメリットは「今見ているもの」を共有できる点です。
このアプリでは、拡張機能がアクティブなタブのテキストコンテンツを自動抽出し、プロンプトの一部としてバックエンドに送信します。
また、PDFファイルを開いている場合も、その内容を自動で解析してコンテキストに含める実装を行いました。これにより、「この論文の要約をして」と投げるだけでスムーズに会話が成立します。
2. 半自律的なブラウザ操作 (Human-in-the-loop)
「このボタンをクリックして」「検索フォームに〇〇と入力して」といった指示に対して、AIがDOM要素を探索し、操作を提案します。
完全に自動で実行するのではなく、**「AIが操作内容を提案 → ユーザーがチャット上で『Approve』ボタンを押す → 実行」**というフローを採用しました。
これにより、AIの誤動作による予期せぬ操作（誤った送信など）を防ぎ、安全性を担保しています。
また、実装面では contenteditable 属性を持つ複雑な入力フォーム（Slackなど）にも対応できるよう、DOM操作ロジックを工夫しました。
正直機能面でいうなら、入力はともかくボタン操作くらいは自分でやった方が早いなと思います。
3. Goによる堅牢なバックエンドとTool設計
バックエンドをGoで記述したことで、型安全で保守性の高いコードになりました。
これらをインターフェースとして定義し、persona.md でAIの振る舞いを制御することで、拡張しやすい設計を意識しました。
今後の展望
現在はローカルサーバーを立てる必要がありますが、今後は以下の点などを改良していきたいと考えています。
- デプロイ: バックエンドをCloud Runなどにデプロイし、セットアップ不要で使えるようにする。
- マルチモーダル対応: 画面のスクリーンショットを直接Geminiに送り、画像認識ベースでの操作指示を実現する。
- ツールの拡充: カレンダー連携やメール下書き作成など、業務効率化に直結する機能の追加。
まとめ
今回の開発を通じて、LLMを単なるチャットボットとして使うだけでなく、**「ブラウザという環境そのものを操作するインターフェース」**として活用する可能性に触れることができました。
GoとChrome拡張機能の組み合わせは非常に強力で、個人開発の幅を広げてくれると感じています。