Analisis JavaScript dan Electron

Ke mana perginya "Catatan ekspor"?

Panduan ini menggunakan aplikasi Electron kecil. Mengklik Ekspor catatan memanggil API di halaman, masuk ke proses utama, dan menulis CSV . Perilaku tersebut tersebar di beberapa file.

Ekspor CSV di seluruh proses Electron

Perender → notes.exportCsv()renderer.js memanggil API yang diekspos oleh preload.js.
Antara prosesnotes:exportPreload memanggil saluran IPC: pesan bernama ke proses utama.
Proses utamaPenangan ekspormain.js menangani saluran itu dan memanggil penulis CSV.

csv.js memformat catatan → main.js menulis downloads/notes.csv.

REA cocok dengan panggilan IPC literal ke penangannya dan mengidentifikasi API yang terbuka. Jalur disimpulkan dari kode; tangkapan waktu proses dapat memeriksa apa yang dijalankan.

Tanyakan tentang ekspor CSV

Hubungkan agen Anda ke REA dan berikan direktori aplikasi atau file ASAR:

Agen pengkodean Anda

Gunakan REA untuk menemukan apa yang terjadi ketika saya mengekspor catatan di aplikasi ini. Di mana CSV dibuat?

Contoh prompt. Sertakan jalur absolut ke folder aplikasi atau app.asar.

REA membaca file aplikasi dan membuat peta titik masuk, modul, dan batas proses. Agen Anda menggunakan peta tersebut untuk mempersempit penyelidikan ke fitur ekspor.

Lacak kode ekspor

Halaman tersebut memanggil API kecil

renderer.js * contoh sumber

document.querySelector("#export").addEventListener("click", async () => {
  const destination = await window.notes.exportCsv();
  document.querySelector("#status").textContent = `Saved to ${destination}`;
});

Halaman mengetahui nama metode. Implementasinya hidup dalam preload, yang memaparkannya ke penyaji.

preload.js * contoh sumber

contextBridge.exposeInMainWorld("notes", {
  exportCsv: () => ipcRenderer.invoke("notes:export"),
});

Catatan REA notes.exportCsv dan saluran literal notes:export. Ini memasangkan pemanggilan itu dengan penangan pencocokan tunggal dalam proses utama.

main.js * contoh sumber

ipcMain.handle("notes:export", () => {
  const destination = path.join(app.getPath("downloads"), "notes.csv");
  writeFileSync(destination, toCsv(notes), "utf8");
  return destination;
});

Membaca handler menjawab pertanyaan awal: csv.js memformat catatan, dan proses utama menulis notes.csv ke dalam folder Unduhan pengguna.

Hasil REA * ringkasan.kutipan ipc

{
  "literal_channels": 1,
  "renderer_transmissions": 1,
  "main_handlers": 1,
  "paired_renderer_transmissions": 1,
  "ambiguous_renderer_transmissions": 0
}

Direkam oleh REA 4.1.0 pada contoh yang dapat diunduh di bawah ini. Lokasi sumber menyertai temuan API, saluran, dan penangan.

Analisis sendiri contohnya

Unduh contohnya dan unzip. Arsip berisi yang lengkap notes-example map. Analisislah dengan Node.js dan npm; Electron tidak diperlukan untuk contoh ini.

Unduh contoh ZIP

Jelajahi enam file sumber

Analisis aplikasi statis

npx -y rea-agents@latest analyze-javascript-application \
  /absolute/path/to/notes-example --json

Ganti jalur dengan folder yang Anda buka ritsletingnya. Anda harus menemukan satu saluran IPC dan satu pengendali yang cocok di normalized_result.summary.ipc. Lokasi sumber ada di normalized_result.graph.

Untuk aplikasi Anda sendiri, gunakan perintah yang sama dengan direktori atau jalur ASAR. Agen dapat mengikuti string literal, nama API, atau saluran IPC dengan alat penelusuran fitur REA.

Periksa penulis CSV

Ikuti notes:export untuk pawangnya. Input mana yang mencapai penulis CSV, dan apa yang terjadi jika penulisan file gagal?

Gunakan lokasi sumber untuk memeriksa detail tersebut. Nama saluran yang dihitung dan penangan ambigu dapat tetap tidak terselesaikan; pengamatan runtime memberi Anda cara lain untuk menyelidikinya.

Ikuti jembatan papan klip Notion Terapkan pendekatan yang sama ke aplikasi Electron yang dikemas.
Amati ekspor browserTangkap klik nyata dan lihat permintaan mana yang dibuatnya.
Ikuti fungsi asliLanjutkan ke biner saat fitur bergantung pada kode asli.

Lacak sebuah Electron Ekspor CSV.