🙌

MCPを使ってClaudeから拡張機能を通してChromeを操作する

2025/01/20に公開

作ったもの

Chrome拡張機能 + MCPサーバー
https://github.com/tesla0225/chromeextension

動かし方はREADME_JP.mdにあります

実際の動作スクショ

動画
https://x.com/tesla0225/status/1881133018771058777

websocketとの通信を確認するポップアップ

既存のtabの確認

新しいtabを開いて検索

zennの記事取得 => 整形

構成

  • ClaudeクライアントはMCPサーバーと通常のクライアント・サーバー関係で接続。
  • これにより、ClaudeはMCPサーバーを通じて様々な操作を行う
  • Chrome拡張機能はMCPサーバーと WebSocketで接続。この接続により、リアルタイムで双方向通信が可能
  • Chrome拡張機能はChromeブラウザのAPI を利用して、ブラウザ内のタブ管理やスクリプトの実行、CSSの注入などの操作を行う

感想

  • 型エラーがいくつか直せてない

  • 多分ちゃんとPromptを組んであげないと結構迷う

  • 過去に拡張機能実装したことがあったので思いついてからは割とすんなりできた

https://zenn.dev/tesla/articles/6d17245bc81079

Discussion