ブラウザ上でClaude Codeを操作:Webサイトの要素を直接指定し、デバッグやリファクタリング
-
FromClaude (Hacker News)
「Claude Code Browser」は、既存のClaude Code CLIと連携するChrome拡張機能です。PCにインストール済みのClaude Codeアカウント、認証情報、トークンをそのまま利用します。
この拡張機能を使うと、Webサイト上の任意の要素を直接指定し、Claude Codeにデバッグ、リファクタリング、または書き換えを依頼できます。要素ピッカー、DOMツリーの表示、リアルタイムなストリーミングチャットといった機能により、視覚的で直感的なWebデバッグが可能になります。
ローカルで動作するNode.jsヘルパーが、ChromeとClaude Codeインスタンス間のブリッジとして機能します。インストールは簡単なターミナルコマンド一つで完了し、Claude Codeが未インストールの場合は、それも同時にインストールされます。
主な機能:
・ポインティング&フィックス:Webページ上の要素をクリックし、Claude Codeでデバッグ・リファクタリング・書き換えを指示
・要素ピッカー:フルDOMコンテキストを自動でキャプチャするビジュアルセレクター
・DOMツリー:サイドパネル内でページ構造を探索
・ストリーミングチャット:Claude Codeの思考プロセスと編集をリアルタイムで確認
・スクリーンショットやセレクターのコピー&ペースト不要:ページコンテキストは自動送信
セットアップは簡単で、サイドパネルの指示に従ってインストールコマンドを実行し、Chromeを再起動するだけです。
プライバシーにも配慮されており、MITライセンスで公開されているオープンソースです。テレメトリは一切なく、ページコンテンツはブラウザとローカルのClaude Codeセッション間のみでやり取りされ、第三者サーバーに送信されることはありません。Fineguide.AI (Corneliu Maftuleac) によって開発されました。
AIによる翻訳/要約をしています。正確な情報はオリジナルサイトにてご確認ください。
当サイトの記事にはプロモーションが含まれる場合があります。
