Studi kasus * Electron

Bagaimana salinan Notion
teks dan HTML.

Lacak panggilan papan klip dari API halaman Notion, melalui proses pramuat dan utama, ke penulis papan klip Electron.

Notion Desktop 7.6.1 * JavaScript · REA

Jembatan di dalam paket desktop Notion

  1. 01 * Page-facing API clipboard.write(data) Preload memperlihatkan metode yang dapat dipanggil.
  2. 02 * Pembungkus pramuat ipcRenderer.invoke Pembungkus mengirimkan saluran dan argumen.
  3. 03 * Pengendali proses utama ipcMain.handle Penerima memeriksa halaman mana yang mengirimnya.
  4. 04 * Papan klip sistem clipboard.write(data) Electron menulis teks dan HTML yang disediakan.

Satu saluran bergabung dengan kedua sisi: notion:clipboard:write

Kode yang dikemas menggunakan saluran yang sama dalam proses pramuat dan proses utama. Menyelesaikan pembungkus mengungkapkan panggilan Electron di balik nama-nama itu.

Ke mana perginya operasi penyalinan?

Halaman melihat metode yang disebut clipboard.write. Implementasinya dalam preload adalah pembungkus. Pertanyaan yang berguna adalah apa yang dikirim oleh pembungkus itu, dan kode mana yang menerimanya.

Agen pengkodean Anda

Gunakan REA untuk melacak bagaimana Notion menyalin teks dan HTML ke papan klip sistem. Tunjukkan kode pada setiap langkah.

Contoh prompt dengan paket aplikasi lokal Notion tersedia untuk agen pengkodean Anda.

REA menemukan tempat untuk mulai membaca

Menganalisis preload tab dengan REA menempatkan API yang diekspos ke halaman dan panggilan yang mengirimkan permintaan IPC. Kedua temuan datang dengan rentang sumber dalam bundel yang diperkecil:

Temuan REA →

Exposed page API
api_key: "__electronApi"
api_status: "dynamic"
source: preload.js:1:22764–22828
Panggilan IPC perender
operation: "invoke"
channel_expression: "e"
source: preload.js:1:6486–6522
Bidang yang dipilih dari yang baru analyze_javascript_application hasil pada preload tab Notion, direkam dengan REA 4.1.0. Posisi menggunakan baris bundel asli dan kolom berbasis nol.

Agen membuka lokasi tersebut, menemukan anggota papan klip di API rakitan, dan membaca invokerInMain. Situs panggilannya memasok notion:clipboard:write. Nama itu memberi agen sesuatu yang tepat untuk dicari di bundel utama. Empat kutipan di bawah ini menunjukkan rute yang menghubungkannya.

Empat potongan kode pendek

Disederhanakan dari JavaScript yang dikemas, dengan nama variabel yang dapat dibaca. Anggota yang tidak terkait dihilangkan.

  1. Mulai dari API yang diekspos ke halaman

    tab_browser_view/preload.js * Anggota API
    const clipboardApi = {
      write: invokerInMain("notion:clipboard:write")
    };
    
    // Included in the API exposed through contextBridge:
    // window.__electronApi.clipboard

    Anggota ini menyediakan nama saluran. Implementasi dari invokerInMain memberitahu kita bagaimana permintaan meninggalkan proses halaman.

  2. Selesaikan pembungkus pramuat

    tab_browser_view/preload.js * Pembantu IPC
    function invokerInMain(channel) {
      return (...args) => invokeInMainAndReturnResult(channel, ...args);
    }
    
    function invokeInMainAndReturnResult(channel, ...args) {
      return ipcRenderer.invoke(channel, ...args);
    }

    Fungsi yang dikembalikan meneruskan argumen melalui IPC request-and-respons Electron. Sekarang kita bisa mencari notion:clipboard:write di sisi proses utama.

  3. Periksa bagaimana penerima didaftarkan

    utama/index.js * pembantu penangan
    const handleRequestFromRenderer = {
      addListener(channel, handler) {
        ipcMain.handle(channel, handler);
      }
    };

    Proses utama menggunakan pembungkus lain. Nya addListener metode mendaftarkan sebuah ipcMain.handle penerima untuk saluran tersebut.

  4. Temukan tulisan dan cek pengirimnya

    utama/index.js * penerima papan klip
    handleRequestFromRenderer.addListener(
      "notion:clipboard:write",
      (event, data) =>
        isNotionWebContents(event.sender)
          ? clipboard.write(data)
          : undefined
    );

    Ini adalah tujuannya. Setelah memeriksa pengirim, penangan meneruskan data yang disediakan ke API papan klip Electron. Saluran dan dua pembungkus yang diselesaikan menghubungkan metode yang diekspos ke panggilan ini.

Bagaimana blok yang disalin mempertahankan strukturnya?

Editor web Notion mengirimkan teks dan HTML melalui electronApi.clipboard.write. Itu menyimpan data blok secara lokal dan menempatkan ID di HTML yang disalin untuk menghubungkannya.

Tautan HTML ke data blok yang disimpan

Dikirim ke papan klip sistem
text: "Project notes"
html: "<p>Project notes</p>"
    + "<!-- notionvc: <copy-id> -->"
Disimpan secara lokal oleh Notion
id: <copy-id>
mimeTypes:
  text/_notion-blocks-v3-production
    → structured block data
  1. Baca ID HTML-nya
  2. Temukan ID lokal yang sama
  3. Pulihkan data blok Notion
Teks ilustrasi dan ID. Pengujian modul yang direkam mengembalikan data blok saat ID cocok; entri basi hanya mengembalikan teks dan HTML.

Saat menempel, Notion mencari ID HTML dan memeriksanya terhadap salinan yang disimpan. ID yang cocok mengembalikan data blok.

Format papan klip direkam dari aset web yang di-cache pada 13 Juli 2026.

Lebih banyak contoh dan sumber

Contoh lain: Tabel penurunan harga

Notion mem-parsing Penurunan harga menjadi data blok. Contoh ini menunjukkan bagaimana tabel menjadi header dan baris data.

Tabel melalui parser penurunan harga Notion

Masukan penurunan harga
| A | B |
| - | - |
| 1 | 2 |
Keluaran parser terstruktur · kutipan
table · headerRow: true
  table_row
    cells: ["A"], ["B"]
  table_row
    cells: ["1"], ["2"]
Output yang direkam dari parser Penurunan harga yang diekstraksi. Tabel menjadi baris dan sel.
Jalur lain: koneksi SQLite offline

Permintaan penyaji Notion getSqliteMeta melalui IPC. Proses utama membuat saluran pesan dan memberikan satu port ke perender dan port lainnya ke proses utilitas SQLite. Kumpulan pernyataan dan hasil selanjutnya melewati port tersebut.

Mengikuti handoff ini menjelaskan di mana pekerjaan basis data berjalan, dan mengapa hanya melacak permintaan IPC awal yang melewatkan percakapan selanjutnya.

Sumber dan cara membaca kutipannya

Jembatan papan klip berasal dari Notion Desktop 7.6.1 app.asar: tab memuat sebelumnya dan main/index.js. Kutipan memperluas nama variabel yang diperkecil dan menghilangkan kode yang tidak terkait; pembantu pemeriksaan pengirim ditampilkan dengan yang mendasarinya isNotionWebContents telepon.

Papan klip virtual dan contoh Penurunan Harga berasal dari aset web yang di-cache pada 13 Juli 2026, termasuk modul 747001, 58169, 736810 dan 422457. Aset tersebut memiliki versinya masing-masing. Probe yang disimpan menjalankan modul yang diekstraksi dan harness kecil; keluarannya menggambarkan probe tersebut daripada sesi UI desktop yang diambil.

Hasil REA yang ditampilkan di sini adalah analisis terfokus dari preload tab yang disimpan, yang direkam dengan paket REA 4.1.0 yang diterbitkan. Ini menempatkan operasi API dan memanggil. Anggota clipboard dan penerima yang cocok dihubungkan dengan membaca implementasi pembungkusnya dalam paket.

Contoh penurunan harga menggunakan modul parser 422457. Pengujian modul yang disimpan menunjukkan bahwa filter halaman dan obrolan mempertahankan tabel ini. Pengurai tempel / impor, Penurunan Harga terstruktur, dan AI / obrolan memiliki titik masuk dan format perantara yang terpisah.

Atas