> ## Documentation Index
> Fetch the complete documentation index at: https://cli.fuxicode.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chrome で Fuxi Code を使用する

> Fuxi Code を Chrome ブラウザに接続して、Web アプリをテストし、コンソールログでデバッグし、フォーム入力を自動化し、Web ページからデータを抽出します。

Fuxi Code は [Fuxi in Chrome ブラウザ拡張機能](https://chromewebstore.google.com/detail/fuxi/fcoeoabgfenejglbffodgkkbkcdhcgfn) と統合され、CLI または [VS Code 拡張機能](/ja/vs-code#automate-browser-tasks-with-chrome) からブラウザ自動化機能を提供します。コードをビルドしてから、コンテキストを切り替えることなくブラウザでテストおよびデバッグできます。

Fuxi はブラウザタスク用に新しいタブを開き、ブラウザのログイン状態を共有するため、既にサインインしているサイトにアクセスできます。ブラウザアクションはリアルタイムで表示される Chrome ウィンドウで実行されます。Fuxi がログインページまたは CAPTCHA に遭遇した場合、一時停止して手動で処理するよう求めます。

<Note>
  Chrome 統合は Google Chrome と Microsoft Edge で動作します。Brave、Arc、またはその他の Chromium ベースのブラウザではまだサポートされていません。Windows Subsystem for Linux（WSL）でもサポートされていません。
</Note>

<h2 id="capabilities">
  機能
</h2>

Chrome が接続されている場合、単一のワークフロー内でブラウザアクションとコーディングタスクをチェーンできます。

* **ライブデバッグ**：コンソールエラーと DOM 状態を直接読み取り、それらを引き起こしたコードを修正します
* **デザイン検証**：Figma モックから UI をビルドしてから、ブラウザで開いて一致することを確認します
* **Web アプリテスト**：フォーム検証をテストし、ビジュアルリグレッションをチェックするか、ユーザーフローを検証します
* **認証済み Web アプリ**：API コネクタなしで、ログインしている Google Docs、Gmail、Notion、またはその他のアプリと対話します
* **データ抽出**：Web ページから構造化情報を取得してローカルに保存します
* **タスク自動化**：データ入力、フォーム入力、またはマルチサイトワークフローなどの反復的なブラウザタスクを自動化します
* **セッション記録**：ブラウザインタラクションを GIF として記録して、何が起こったかを文書化または共有します

<h2 id="prerequisites">
  前提条件
</h2>

Fuxi Code を Chrome で使用する前に、以下が必要です。

* [Google Chrome](https://www.google.com/chrome/) または [Microsoft Edge](https://www.microsoft.com/edge) ブラウザ
* [Fuxi in Chrome 拡張機能](https://chromewebstore.google.com/detail/fuxi/fcoeoabgfenejglbffodgkkbkcdhcgfn) バージョン 1.0.36 以上（Chrome Web Store で両方のブラウザで利用可能）
* [Fuxi Code](/ja/quickstart#step-1-install-fuxi-code)
* 直接 Anthropic プラン（Pro、Max、Team、または Enterprise）

<Note>
  Chrome 統合は Amazon Bedrock、Google Cloud の Agent Platform、Microsoft Foundry などのサードパーティプロバイダーを通じては利用できません。Fuxi にサードパーティプロバイダーを通じてのみアクセスする場合、この機能を使用するには別の fuxi.ai アカウントが必要です。
</Note>

<h2 id="get-started-in-the-cli">
  CLI で開始する
</h2>

<Steps>
  <Step title="Chrome で Fuxi Code を起動する">
    `--chrome` フラグで Fuxi Code を起動します。

    ```bash theme={null}
    fuxi --chrome
    ```

    既存のセッション内から `/chrome` を実行して Chrome を有効にすることもできます。
  </Step>

  <Step title="Fuxi にブラウザを使用するよう依頼する">
    この例は、ページに移動し、それと対話し、ターミナルまたはエディターからすべてを報告します。

    ```text theme={null}
    Go to cli.fuxicode.com/docs, click on the search box,
    type "hooks", and tell me what results appear
    ```
  </Step>
</Steps>

いつでも `/chrome` を実行して接続ステータスを確認し、権限を管理し、拡張機能を再接続するか、使用する接続されたブラウザを選択できます。ブラウザアクションが開始されるときに複数のブラウザが接続されている場合、Fuxi はいずれかを選択するよう促します。

VS Code については、[VS Code でのブラウザ自動化](/ja/vs-code#automate-browser-tasks-with-chrome) を参照してください。

<h3 id="enable-chrome-by-default">
  Chrome をデフォルトで有効にする
</h3>

各セッションで `--chrome` を渡すことを避けるには、`/chrome` を実行して「デフォルトで有効」を選択します。

[VS Code 拡張機能](/ja/vs-code#automate-browser-tasks-with-chrome) では、Chrome 拡張機能がインストールされている場合、Chrome はいつでも利用可能です。追加のフラグは必要ありません。

<Note>
  CLI で Chrome をデフォルトで有効にすると、ブラウザツールが常にロードされるため、コンテキスト使用量が増加します。コンテキスト消費の増加に気付いた場合、この設定を無効にして、必要な場合にのみ `--chrome` を使用してください。
</Note>

<h3 id="manage-site-permissions">
  サイト権限を管理する
</h3>

サイトレベルの権限は Chrome 拡張機能から継承されます。Chrome 拡張機能の設定で権限を管理して、Fuxi がブラウズ、クリック、入力できるサイトを制御します。

<h3 id="browser-tools-in-plan-mode">
  ブラウザツールをプランモードで使用する
</h3>

[プランモード](/ja/permission-modes#analyze-before-you-edit-with-plan-mode) では、ページまたはブラウザの状態のみを読み取るブラウザツール呼び出しは権限プロンプトなしで実行され、状態を変更する呼び出しは承認を求めるプロンプトが表示されます。

* **読み取り専用呼び出し**: `read_page`、`get_page_text`、`find`、コンソールメッセージまたはネットワークリクエストの読み取り、およびスクリーンショットの撮影
* **状態変更呼び出し**: クリック、入力、ナビゲーション、タブとウィンドウ管理、および GIF の記録

v2.1.199 以降、`tabs_context_mcp` の `createIfEmpty`、コンソールおよびネットワークリーダーの `clear`、またはスクリーンショットの `save_to_disk` など、状態変更入力フラグを設定する読み取り専用呼び出しも承認を求めるプロンプトが表示されます。`browser_batch` 呼び出しは、その内部のすべてのアクションが読み取り専用の場合にのみ、プロンプトなしで実行されます。

<h2 id="example-workflows">
  ワークフロー例
</h2>

これらの例は、ブラウザアクションとコーディングタスクを組み合わせる一般的な方法を示しています。`/mcp` を実行して `fuxi-in-chrome` を選択すると、利用可能なブラウザツールの完全なリストが表示されます。

<h3 id="test-a-local-web-application">
  ローカル Web アプリケーションをテストする
</h3>

Web アプリを開発する場合、変更が正しく機能することを確認するよう Fuxi に依頼します。

```text theme={null}
I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?
```

Fuxi はローカルサーバーに移動し、フォームと対話し、観察したことを報告します。

<h3 id="debug-with-console-logs">
  コンソールログでデバッグする
</h3>

Fuxi はコンソール出力を読み取って問題の診断を支援できます。ログが詳細になる可能性があるため、すべてのコンソール出力を要求するのではなく、探すパターンを Fuxi に伝えます。

```text theme={null}
Open the dashboard page and check the console for any errors when
the page loads.
```

Fuxi はコンソールメッセージを読み取り、特定のパターンまたはエラータイプでフィルタリングできます。

<h3 id="automate-form-filling">
  フォーム入力を自動化する
</h3>

反復的なデータ入力タスクを高速化します。

```text theme={null}
I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.
```

Fuxi はローカルファイルを読み取り、Web インターフェースをナビゲートし、各レコードのデータを入力します。

<h3 id="draft-content-in-google-docs">
  Google Docs でコンテンツをドラフトする
</h3>

API セットアップなしで Fuxi を使用してドキュメントに直接書き込みます。

```text theme={null}
Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123
```

Fuxi はドキュメントを開き、エディターをクリックしてコンテンツを入力します。これは、ログインしているあらゆる Web アプリで機能します。Gmail、Notion、Sheets など。

<h3 id="extract-data-from-web-pages">
  Web ページからデータを抽出する
</h3>

Web サイトから構造化情報を取得します。

```text theme={null}
Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.
```

Fuxi はページに移動し、コンテンツを読み取り、データを構造化形式にコンパイルします。

<h3 id="run-multi-site-workflows">
  マルチサイトワークフローを実行する
</h3>

複数の Web サイト間でタスクを調整します。

```text theme={null}
Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.
```

Fuxi はタブ間で動作して情報を収集し、ワークフローを完了します。

<h3 id="record-a-demo-gif">
  デモ GIF を記録する
</h3>

ブラウザインタラクションの共有可能な記録を作成します。

```text theme={null}
Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.
```

Fuxi はインタラクションシーケンスを記録し、GIF ファイルとして保存します。

<h2 id="troubleshooting">
  トラブルシューティング
</h2>

<h3 id="extension-not-detected">
  拡張機能が検出されない
</h3>

Fuxi Code が Chrome 拡張機能を検出できない場合：

1. Chrome 拡張機能が `chrome://extensions` にインストールされ、有効になっていることを確認します
2. `fuxi --version` を実行して Fuxi Code が最新であることを確認します
3. Chrome が実行されていることを確認します
4. `/chrome` を実行して「Reconnect extension」を選択し、接続を再確立します
5. 問題が解決しない場合、Fuxi Code と Chrome の両方を再起動します

Chrome 統合を初めて有効にすると、Fuxi Code はネイティブメッセージングホスト設定ファイルをインストールします。Chrome はスタートアップ時にこのファイルを読み取るため、最初の試行で拡張機能が検出されない場合、Chrome を再起動して新しい設定を取得します。

v2.1.199 以降、Fuxi Code は初回インストール時のみ拡張機能の接続を促すブラウザタブを開きます。設定ファイルを書き直す後続セッション（例えば Fuxi Code ビルドまたは設定ディレクトリを切り替えた後）では、再度開きません。

接続がまだ失敗する場合、ホスト設定ファイルが以下の場所に存在することを確認します。

Chrome の場合：

* **macOS**：`~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.fuxi_code_browser_extension.json`
* **Linux**：`~/.config/google-chrome/NativeMessagingHosts/com.anthropic.fuxi_code_browser_extension.json`
* **Windows**：Windows レジストリで `HKCU\Software\Google\Chrome\NativeMessagingHosts\` を確認します

Edge の場合：

* **macOS**：`~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.fuxi_code_browser_extension.json`
* **Linux**：`~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.fuxi_code_browser_extension.json`
* **Windows**：Windows レジストリで `HKCU\Software\Microsoft\Edge\NativeMessagingHosts\` を確認します

<h3 id="browser-not-responding">
  ブラウザが応答しない
</h3>

Fuxi のブラウザコマンドが機能しなくなった場合：

1. モーダルダイアログ（alert、confirm、prompt）がページをブロックしているかどうかを確認します。JavaScript ダイアログはブラウザイベントをブロックし、Fuxi がコマンドを受け取るのを防ぎます。ダイアログを手動で閉じてから、Fuxi に続行するよう伝えます。
2. Fuxi に新しいタブを作成して再度試すよう依頼します
3. `chrome://extensions` で拡張機能を無効にしてから再度有効にして Chrome 拡張機能を再起動します

<h3 id="connection-drops-during-long-sessions">
  長いセッション中に接続が切れる
</h3>

Chrome 拡張機能のサービスワーカーは長時間のセッション中にアイドル状態になる可能性があり、接続が切れます。非アクティブ期間後にブラウザツールが機能しなくなった場合、`/chrome` を実行して「Reconnect extension」を選択します。

<h3 id="windows-specific-issues">
  Windows 固有の問題
</h3>

Windows では、以下の問題が発生する可能性があります。

* **名前付きパイプの競合（EADDRINUSE）**：別のプロセスが同じ名前付きパイプを使用している場合、Fuxi Code を再起動します。Chrome を使用している他の Fuxi Code セッションを閉じます。
* **ネイティブメッセージングホストエラー**：ネイティブメッセージングホストがスタートアップ時にクラッシュする場合、Fuxi Code を再インストールしてホスト設定を再生成してみてください。

<h3 id="common-error-messages">
  一般的なエラーメッセージ
</h3>

これらは最も頻繁に遭遇するエラーと、それらを解決する方法です。

| エラー                                  | 原因                                 | 修正                                                  |
| ------------------------------------ | ---------------------------------- | --------------------------------------------------- |
| "Browser extension is not connected" | ネイティブメッセージングホストが拡張機能に到達できない        | Chrome と Fuxi Code を再起動してから、`/chrome` を実行して再接続します |
| "Extension not detected"             | Chrome 拡張機能がインストールされていないか、無効になっている | `chrome://extensions` で拡張機能をインストールまたは有効にします         |
| "No tab available"                   | Fuxi がタブの準備ができる前に動作しようとした        | Fuxi に新しいタブを作成して再度試すよう依頼します                       |
| "Receiving end does not exist"       | 拡張機能サービスワーカーがアイドル状態になった            | `/chrome` を実行して「Reconnect extension」を選択します          |

<h2 id="see-also">
  関連項目
</h2>

* [コンピュータ使用](/ja/computer-use)：ブラウザでタスクを実行できない場合にネイティブ macOS アプリを制御します
* [VS Code で Fuxi Code を使用する](/ja/vs-code#automate-browser-tasks-with-chrome)：VS Code 拡張機能でのブラウザ自動化
* [CLI リファレンス](/ja/cli-reference)：`--chrome` を含むコマンドラインフラグ
* [一般的なワークフロー](/ja/common-workflows)：Fuxi Code を使用するその他の方法
* [データとプライバシー](/ja/data-usage)：Fuxi Code がデータを処理する方法
* [Chrome で Fuxi を使い始める](https://support.fuxi.com/en/articles/12012173-getting-started-with-fuxi-in-chrome)：ショートカット、スケジューリング、権限を含む Chrome 拡張機能の完全なドキュメント
