LLM ネイティブなブラウザ開発入門
本記事は、Firefox フォークの Floorp を開発している大学2年生が、未踏IT（2025）採択プロジェクト「Floorp OS」 の開発で得た知見を元に、拡張機能や Selenium に頼らず、ブラウザ内部に LLM 実行基盤を組み込む方法について解説する。
LLM ブラウザの実装方法は複数あるが、筆者は非常にベーシックな構成を採用しているため、他の実装と比べて機能・洗練度で劣る部分があるかもしれない。しかし、入門として十分機能することを目指している。
本記事では、まず LLMs を使ってブラウザを操作する LLM ブラウザの概念について説明し、既存アプローチとの違いを比較する。次に、Floorp の構造と WebScraper の重要性について解説する。WebScraper は、LLM が「このボタンをクリックして」「このフォームに入力して」と判断したときに、実際にブラウザ上でその操作を実行するのが役割である。
特に XrayWrapper という Firefox のセキュリティ機能が LLMs ブラウザの実装に与える影響を詳しく説明する。XrayWrapper は特権コード（chrome コンテキスト）がページの JavaScript オブジェクトに直接アクセスできないようにする仕組みだが、LLM ブラウザでは React や Vue のイベント発火やフォーム値変更などに問題を引き起こす可能性がある。
筆者は XrayWrapper をアンラップして解決策を提示している。最後に、チャット UI と LLM 通信、ストリーミングの実装方法について説明する。
背景
LLM ブラウザは、OpenAI の Atlas や The Browser Company の Dia などが提供するような、Web ページに対する「読み取り・操作（自動操縦）」を LLM が担うタイプのブラウザです。従来の「ブラウザ × AI」アプローチには大きく3つの方法があります。 1. 拡張機能：各種 Chrome 拡張 2. 外部自動化：Selenium / Playwright 3. ネイティブ統合：本記事のアプローチ 本記事では、3番目のネイティブ統合を採用し、ブラウザのソースコードに直接手を入れることで、拡張機能の権限制約やプロセス間通信のオーバーヘッドを回避し、LLM がブラウザをシームレスに操作できる環境を構築します。
重要用語解説
**LLM ブラウザ**: Web ページに対する「読み取り・操作（自動操縦）」を LLM が担うタイプのブラウザ
**XrayWrapper**: Firefox のセキュリティ機能で、特権コードがページの JavaScript オブジェクトに直接アクセスできないようにする仕組み。
**WebScraper**: Firefox のコンテンツプロセスで動作する DOM 操作モジュール。LLM が「このボタンをクリックして」「このフォームに入力して」と判断したときに、実際にブラウザ上でその操作を実行するのが役割である。
**Actor**: Firefox のマルチプロセス通信機構。LLM ブラウザ実装では、WebScraper と LLM 間の通信に使用される。
**Agentic Loop**: LLM がツールを呼び出し、結果を受け取り、再度ツールを呼び出すループ処理。
今後の影響
このニュースが社会・経済・政治等に与える影響は、LLM ブラウザ技術の普及によって、Web の操作方法や開発手法が大きく変化する可能性があります。 - **Web 開発**: LLM を活用したブラウザ開発により、より複雑な Web アプリケーションを効率的に構築できるようになるでしょう。 - **ユーザー体験**: LLM が自動で Web ページを操作することで、ユーザーはよりスムーズでインタラクティブな Web 体験を得られる可能性があります。 - **セキュリティ**: XrayWrapper の問題解決など、セキュリティ対策の強化が重要になります。また、悪意のある LLM ブラウザによる攻撃の可能性も考慮する必要があります。