"Export notes(匯出筆記)"去哪兒了?
本指南使用一個小型 Electron 應用。點選Export notes(匯出筆記)後,頁面呼叫 API,透過程序邊界進入主程序,最後寫出 CSV。這個行為分散在幾個檔案中。
該 CSV 跨匯出 Electron 過程
-
渲染器→預載入
notes.exportCsv()renderer.js呼叫由preload.js. -
程序之間
notes:export預載入呼叫IPC通道:主程序的命名訊息。 -
主程序匯出處理函式
main.js處理這個通道,再呼叫 CSV 寫入函式。
csv.js 格式化註釋→ main.js 寫道 downloads/notes.csv.
詢問有關 CSV 匯出
將你的程式設計助手連線到 REA 並給它的應用程式目錄或 ASAR 檔案:
用 REA 找出這個應用匯出筆記時發生了什麼。CSV 檔案在哪裡建立?
示例提示。 包括應用程式資料夾的絕對路徑或 app.asar.
REA讀取應用程式檔案並構建入口點,模組和流程邊界的對映。 你的程式設計助手使用該對映將調查範圍縮小到匯出功能。
跟蹤匯出程式碼
頁面呼叫一個小API
document.querySelector("#export").addEventListener("click", async () => {
const destination = await window.notes.exportCsv();
document.querySelector("#status").textContent = `Saved to ${destination}`;
});
頁面知道方法名稱。 實現存在於預載入中,預載入將其暴露給渲染器。
contextBridge.exposeInMainWorld("notes", {
exportCsv: () => ipcRenderer.invoke("notes:export"),
});
REA 記錄 notes.exportCsv 和直接寫在程式碼中的通道名 notes:export,並將呼叫關聯到主程序裡唯一匹配的處理函式。
ipcMain.handle("notes:export", () => {
const destination = path.join(app.getPath("downloads"), "notes.csv");
writeFileSync(destination, toCsv(notes), "utf8");
return destination;
});
讀取處理函式就能回答最初的問題:csv.js 格式化筆記,主程序將 notes.csv 寫入使用者的下載資料夾。
{
"literal_channels": 1,
"renderer_transmissions": 1,
"main_handlers": 1,
"paired_renderer_transmissions": 1,
"ambiguous_renderer_transmissions": 0
}
使用 REA 4.1.0 分析下面可下載的示例。API、通道和處理函式的結果均附有原始碼位置。
自己分析例子
下載示例並解壓縮。 存檔包含完整的 notes-example 資料夾。 分析它與 Node.js 和 npm; Electron 本例不需要。
npx -y rea-agents@latest analyze-javascript-application \
/absolute/path/to/notes-example --json
將路徑替換為你解壓縮的資料夾。 你應該在以下位置找到一個IPC通道和一個匹配的處理程式 normalized_result.summary.ipc. 源位置在 normalized_result.graph.
對於你自己的應用程式,請對其目錄或ASARpath使用相同的命令。 程式設計助手可以使用REA的功能跟蹤工具跟隨文字字串,API名稱或IPC通道。
檢查CSV寫入器
追蹤
notes:export到處理函式。哪些輸入傳給 CSV 寫入函式?如果寫入失敗,會怎樣?
使用源位置檢查這些詳細資訊。 計算的通道名稱和不明確的處理程式可以保持未解析;執行時觀察為你提供了另一種調查它們的方法。
- 追蹤 Notion 剪貼簿橋接程式碼把同樣的方法用於打包的 Electron 應用。
- 觀察瀏覽器匯出捕獲一個真正的點選,看看它提出了哪個請求。
- 遵循原生函式當特性依賴於原生程式碼時,繼續進入二進位制檔案.