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

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

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

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

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

google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://reverseengineeranything.app/examples/notes-web/

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

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

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

プロンプトの例。 エージェントにデバッグエンドポイントを与える, 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で以下を実行し、次に実行します:

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応答の形状が含まれます。 以前の要求はこのキャプチャの外にあります。

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

npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --include-script-sources --json

要求はデータソースを識別し、REAレコードを識別します 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アプリの場合は、次の手順を続行します。 アプリケーションワークフロー ファイルとプロセスの境界に従う。