Analyse von JavaScript und Electron

Wohin geht "Notizen exportieren"?

Diese Anleitung verwendet eine kleine Electron-App. Klicken Notizen exportieren ruft eine API auf der Seite auf, wechselt in den Hauptprozess und schreibt einen CSV . Das Verhalten ist auf mehrere Dateien verteilt.

Der CSV-Export über Electron-Prozesse hinweg

Renderer → Vorladennotes.exportCsv()renderer.js ruft die API auf, die von bereitgestellt wird preload.js.
Zwischen Prozessennotes:exportDer Preload ruft einen IPC-Kanal auf: eine benannte Nachricht an den Hauptprozess.
HauptprozessEin Export-Handlermain.js behandelt diesen Kanal und ruft den CSV-Writer auf.

csv.js formatiert die Notizen → main.js schreibt downloads/notes.csv.

REA ordnet den literalen IPC-Aufruf seinem Handler zu und identifiziert die exponierte API. Der Pfad wird aus dem Code abgeleitet; Eine Laufzeiterfassung kann überprüfen, was ausgeführt wird.

Fragen Sie nach dem CSV Export

Verbinden Sie Ihren Agenten mit REA und geben Sie ihm das App-Verzeichnis oder die ASAR-Datei:

Ihr Codierungsagent

Verwenden Sie REA, um herauszufinden, was passiert, wenn ich Notizen in diese App exportiere. Wo wird der CSV erstellt?

Beispiel Eingabeaufforderung. Geben Sie den absoluten Pfad zum Anwendungsordner an oder app.asar.

REA liest die Anwendungsdateien und erstellt eine Karte mit Einstiegspunkten, Modulen und Prozessgrenzen. Ihr Agent verwendet diese Karte, um die Untersuchung auf die Exportfunktion einzugrenzen.

Verfolgen Sie den Exportcode

Die Seite ruft eine kleine API auf

renderer.js * beispielquelle

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

Die Seite kennt den Methodennamen. Die Implementierung lebt im Preload, wodurch sie dem Renderer ausgesetzt wird.

preload.js * beispielquelle

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

REA Aufzeichnungen notes.exportCsv und der wörtliche Kanal notes:export. Es koppelt diesen Aufruf mit dem einzelnen übereinstimmenden Handler im Hauptprozess.

main.js * beispielquelle

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

Das Lesen des Handlers beantwortet die ursprüngliche Frage: csv.js formatiert die Notizen und der Hauptprozess schreibt notes.csv in den Download-Ordner des Benutzers.

REA Ergebnis * Zusammenfassung.ipc Auszug

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

Aufgenommen von REA 4.1.0 im unten stehenden herunterladbaren Beispiel. Quellorte begleiten die API-, Kanal- und Handler-Ergebnisse.

Analysieren Sie das Beispiel selbst

Laden Sie das Beispiel herunter und entpacken Sie es. Das Archiv enthält die komplette notes-example Ordner. Analysieren Sie es mit Node.js und npm; Electron wird für dieses Beispiel nicht benötigt.

Beispiel-ZIP herunterladen

Durchsuchen Sie die sechs Quelldateien

Statische Anwendungsanalyse

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

Ersetzen Sie den Pfad durch den Ordner, den Sie entpackt haben. Sie sollten einen IPC-Kanal und einen passenden Handler in finden normalized_result.summary.ipc. Quellstandorte sind in normalized_result.graph.

Verwenden Sie für Ihre eigene App denselben Befehl mit seinem Verzeichnis oder ASAR-Pfad. Ein Agent kann mit den Feature-Tracing-Tools von REA einer Literalzeichenfolge, einem API-Namen oder einem IPC-Kanal folgen.

Überprüfen Sie den CSV-Schreiber

Folgen notes:export zu seinem Handler. Welche Eingänge erreichen den CSV Writer und was passiert, wenn das Schreiben der Datei fehlschlägt?

Verwenden Sie die Quellspeicherorte, um diese Details zu überprüfen. Berechnete Kanalnamen und mehrdeutige Handler können ungelöst bleiben; Laufzeitbeobachtungen bieten Ihnen eine andere Möglichkeit, sie zu untersuchen.

Folgen Sie der Zwischenablage-Brücke von Notion Wenden Sie den gleichen Ansatz auf eine gepackte Electron-App an.
Beobachten Sie einen Browser-ExportErfassen Sie einen echten Klick und sehen Sie, welche Anfrage er stellt.
Einer nativen Funktion folgenFahren Sie mit einer Binärdatei fort, wenn eine Funktion vom systemeigenen Code abhängt.

Verfolgen Sie einen Electron CSV exportieren.