---
title: 'Notion Electron Rekayasa Balik: Papan Klip-REA'
url: https://rea.tools/id/showcase/notion/
---

[Rumah](https://rea.tools/id/) / [Menampilkan](https://rea.tools/id/showcase/) / Notion

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.

- [Panduan aplikasi JavaScript](https://rea.tools/guides/javascript/)Ikuti fitur ekspor aplikasi Electron kecil.
- [Rekonstruksi DX-Ball](https://rea.tools/id/showcase/dx-ball/)Ikuti instruksi asli ke fungsi C yang dicentang.

[Analisis aplikasi Anda sendiri](https://rea.tools/get-started/)