何が起こるか見てください
あなたがクリックすると。

小さなブラウザアプリを使用して、アクション、そのネットワーク要求、およびダウンロードを構築するJavaScriptを接続します。

[エクスポート]をクリックするとどうなりますか?

ザ- ノートブラウザの例 を持っている ノートのエクスポート ボタン。 それをクリックするとロードされます notes.json、CSVとして二つのノートをフォーマットし、ダウンロードを開始します。

クリックからCSVダウンロードへ

  1. 01*あなた[メモのエクスポート]をクリックしますキャプチャの実行中にブラウザでアクションを実行します。
  2. 02*REA 要求を記録する選択したページから要求URL、応答ステータス、JSON構造をキャプチャします。
  3. 03*あなたの代理店エクスポートコードを読む監視された要求をに接続して下さい fetch("./notes.json") で export.js.

GET notes.json → 200 → notes[] → CSV

[ノートのエクスポート]をクリックする前に、キャプチャを開始します。

リモートデバッグでChromeを開く

別のブラウザプロファイルとローカルデバッグポートを使用して、ホストされたNotesの例を開きます。 Linuxについて :

例のブラウザを起動します
google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://rea.tools/examples/notes-web/

インストールされているブラウザの実行可能パスをmacOSまたはWindowsに使用します。 ページのURLを検査する別のページに置き換えることができます。

REAは、この既存のブラウザに接続します。 ページの制御を維持し、アクションを実行し、終了したらブラウザを閉じます。

一つのアクションを見るためにあなたのエージェ

あなたのコーディングエージェント

REAを使用して、ノートのエクスポートをクリックしながらこのページを検査します。 それはどのような要求を行い、CSVはどのように構築されていますか?

プロンプトの例。 エージェントにデバッグエンドポイントを与える, http://127.0.0.1:9222、およびページのURL。 クリックする前にキャプチャを開始しましょう。

エージェントはページターゲットを検出し、観察ウィンドウを開始し、結果の証拠を読み取ります。 その後、エクスポートの背後にあるスクリプトを検査できます。

または端末からキャプチャします

ページのターゲットIDを検索する:

ページを探す
npx -y rea-agents@latest list-browser-targets \
  http://127.0.0.1:9222 --json

Notesの例のURLでターゲットを選択します。 置換 TARGET_ID そのIDで以下を実行し、次に実行します:

次の10秒をキャプチャします
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --observation-ms 10000 \
  --include-accessibility-text \
  --include-json-body-shapes --json

コマンドを数秒間接続してから、をクリックします ノートのエクスポート そのブラウザで。 結果は、観測ウィンドウが終了した後に到着します。

キャプチャされた結果には、選択されたページ、そのウィンドウ中のネットワークアクティビティ、およびJSON応答の形状が含まれます。 以前の要求はこのキャプチャの外にあります。

リクエストとエクスポートスクリプトを読む

ローカルノートの例でREA4.1.0で記録されました
捕獲された事実 値
リクエスト GET /examples/notes-web/notes.json
応答 200 · application/json
リクエストイニシエータ export.js •スクリプト
応答構造 notes[] と id と title フィールド
ロードされたスクリプトを読む
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --include-script-sources --json

要求はデータソースを識別し、REAレコードを識別します export.js その創始者として。 キャプチャされたスクリプトソースを読んで、データの使用方法を確認します:

export.js ·ソースの抜粋の例
const response = await fetch("./notes.json");
const { notes } = await response.json();
// Format each note as a CSV row.
const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
link.href = url;
link.download = "notes.csv";
link.click();

ダウンロードは、JSON応答を使用してページで構築されます。 CSV書式設定ステップはスクリプトから取得されます。 notes.json.

例を開きます · ダウンロード export.js · ダウンロード notes.json

要求するスクリプトを見つけます notes.json. カンマや引用符を含むタイトルはどのようにエスケープされますか?

インストールされているJavaScriptまたはElectronアプリの場合は、次の手順を続行します。 アプリケーションワークフロー ファイルとプロセスの境界に従う。

トップ