مطالعه موردی * Electron

چگونه Notion کپی
متن و HTML.

یک تماس کلیپ بورد از API صفحه Notion را از طریق فرآیند پیش بارگذاری و اصلی به نویسنده کلیپ بورد Electron ردیابی کنید.

Notion دسکتاپ 7.6.1 * JavaScript · REA

پل داخل بسته دسکتاپ Notion

  1. 01 * api رو به صفحه clipboard.write(data) پیش بارگذاری یک روش قابل فراخوان را نشان می دهد.
  2. 02 * بسته بندی پیش بار ipcRenderer.invoke بسته بندی کانال و استدلال ها را ارسال می کند.
  3. 03 · کنترل کننده فرآیند اصلی ipcMain.handle گیرنده چک می کند که کدام صفحه آن را ارسال کرده است.
  4. 04 * کلیپ بورد سیستم clipboard.write(data) Electron متن و HTML ارائه شده را می نویسد.

یک کانال به دو طرف می پیوندد: notion:clipboard:write

کد بسته بندی شده از همان کانال در فرآیند پیش بارگذاری و اصلی استفاده می کند. حل کردن بسته بندی ها نشان می دهد که Electron پشت این نام ها صدا می زند.

عملیات کپی به کجا می رود ؟

صفحه یک روش به نام clipboard.write. پیاده سازی آن در پیش بارگذاری یک بسته بندی است. سوال مفید این است که این بسته بندی چه چیزی را می فرستد و کدام کد آن را دریافت می کند.

عامل برنامه نویسی شما

از REA برای ردیابی نحوه کپی متن و HTML Notion در کلیپ بورد سیستم استفاده کنید. کد را در هر مرحله نشان دهید.

یک مثال با بسته برنامه محلی Notion در دسترس برنامه نویس شما.

REA می یابد که از کجا شروع به خواندن

تجزیه و تحلیل پیش بارگذاری برگه با REA API را در معرض صفحه و فراخوانی که درخواست IPC را ارسال می کند قرار می دهد. هر دو یافته با محدوده منبع در بسته کوچک شده همراه است:

یافته های REA → دو مکان برای باز کردن

Api صفحه در معرض
api_key: "__electronApi"
api_status: "dynamic"
source: preload.js:1:22764–22828
رندر IPC تماس
operation: "invoke"
channel_expression: "e"
source: preload.js:1:6486–6522
زمینه های انتخاب شده از یک تازه analyze_javascript_application نتیجه در Notion ' s tab preload ، ضبط شده با REA 4.1.0. موقعیت ها از خط اصلی بسته و ستون صفر استفاده می کنند.

نماینده این مکان ها را باز می کند ، عضو کلیپ بورد را در API مونتاژ شده پیدا می کند و می گوید invokerInMain. لوازم سایت تماس با ما notion:clipboard:write. اين اسم به مامور يه چيز دقيقي ميده که بايد در بسته اصلي دنبالش بگرده چهار بخش زیر مسیر اتصال آن را نشان می دهد.

چهار قطعه کد کوتاه

ساده شده از JavaScript بسته بندی شده ، با نام متغیر قابل خواندن. اعضای غیر مرتبط حذف می شوند.

  1. از API در معرض صفحه شروع کنید

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

    این عضو نام کانال را ارائه می دهد. اجرای invokerInMain به ما می گوید که چگونه درخواست از روند صفحه خارج می شود.

  2. بسته بندی پیش بارگذاری را حل کنید

    tab_browser_view/preload.js * کمک کننده IPC
    function invokerInMain(channel) {
      return (...args) => invokeInMainAndReturnResult(channel, ...args);
    }
    
    function invokeInMainAndReturnResult(channel, ...args) {
      return ipcRenderer.invoke(channel, ...args);
    }

    تابع بازگردانده شده آرگومنت ها را از طریق IPC درخواست و پاسخ Electron ارسال می کند. حالا می تونیم دنبالش بگردیم notion:clipboard:write در سمت اصلی فرآیند.

  3. نحوه ثبت نام گیرنده را بررسی کنید

    اصلی/index.js * handler helper
    const handleRequestFromRenderer = {
      addListener(channel, handler) {
        ipcMain.handle(channel, handler);
      }
    };

    فرآیند اصلی از یک بسته بندی دیگر استفاده می کند. اون addListener روش ثبت یک ipcMain.handle گیرنده برای اون کانال

  4. نوشتن و چک فرستنده آن را پیدا کنید

    اصلی/index.js * گیرنده کلیپ بورد
    handleRequestFromRenderer.addListener(
      "notion:clipboard:write",
      (event, data) =>
        isNotionWebContents(event.sender)
          ? clipboard.write(data)
          : undefined
    );

    این مقصد است. پس از بررسی فرستنده ، کنترل کننده داده های ارائه شده را به API کلیپ بورد Electron منتقل می کند. کانال و دو بسته بندی حل شده روش در معرض را به این تماس متصل می کنند.

بلوک کپی شده چگونه ساختار خود را حفظ می کند ؟

ویرایشگر وب Notion متن و HTML را از طریق electronApi.clipboard.write. این داده های بلوک را به صورت محلی نگه می دارد و یک ID را در HTML کپی شده برای اتصال آنها قرار می دهد.

لینک های HTML برای ذخیره داده های بلوک

ارسال به کلیپ بورد سیستم
text: "Project notes"
html: "<p>Project notes</p>"
    + "<!-- notionvc: <copy-id> -->"
ذخیره شده به صورت محلی توسط Notion
id: <copy-id>
mimeTypes:
  text/_notion-blocks-v3-production
    → structured block data
  1. شناسه HTML را بخوانید
  2. همان شناسه محلی را پیدا کنید
  3. بازیابی داده های بلوک Notion
متن تصویری و شناسنامه. تست ماژول ضبط شده داده های بلوک را هنگام مطابقت IDs بازیابی می کند ؛ یک ورودی قدیمی فقط متن و HTML را باز می گرداند.

در paste ، Notion به دنبال شناسه HTML است و آن را با نسخه ذخیره شده بررسی می کند. تطبیق شناسه بازیابی داده های بلوک.

فرمت کلیپ بورد ثبت شده از دارایی های وب در 13 ژوئیه 2026 ذخیره شده است.

نمونه ها و منابع بیشتر

مثال دیگر: جداول Markdown

Notion تجزیه و تحلیل Markdown به داده های بلوک. این مثال نشان می دهد که چگونه یک جدول به عنوان عنوان و ردیف داده تبدیل می شود.

جدول از طریق تجزیه کننده Markdown Notion

ورودی Markdown
| A | B |
| - | - |
| 1 | 2 |
خروجی تجزیه کننده ساختاری · گزیده
table · headerRow: true
  table_row
    cells: ["A"], ["B"]
  table_row
    cells: ["1"], ["2"]
خروجی ضبط شده از یک تجزیه کننده Markdown استخراج شده. جدول به ردیف ها و سلول ها تبدیل می شود.
مسیر دیگر: اتصال آفلاین SQLite

درخواست رندر Notion getSqliteMeta از طریق IPC. فرآیند اصلی یک کانال پیام ایجاد می کند و یک پورت به رندر و دیگری به یک فرآیند ابزار SQLite می دهد. دسته های بیانیه های بعدی و نتایج از آن بندر عبور می کنند.

پس از این انتقال توضیح می دهد که کار پایگاه داده کجا اجرا می شود و چرا ردیابی تنها درخواست اولیه IPC مکالمه بعدی را از دست می دهد.

منابع و نحوه خواندن گزیده ها

پل کلیپ بورد از دسکتاپ Notion 7.6.1 می آید app.asar: پیش بارگذاری برگه و main/index.js. این گزیده ها نام های متغیر کوچک شده را گسترش می دهند و کد غیر مرتبط را حذف می کنند ؛ کمک کننده چک فرستنده با زیربنای آن نشان داده شده است isNotionWebContents تماس بگیرید

نمونه های کلیپ بورد مجازی و Markdown از دارایی های وب ذخیره شده در 13 ژوئیه 2026 ، از جمله ماژول ها می آیند 747001, 58169, 736810 و 422457. اون دارایی ها نسخه خودشون رو دارن پروب های ذخیره شده ماژول های استخراج شده و تسمه های کوچک را اجرا می کنند ؛ خروجی های آنها این پروب ها را به جای یک جلسه رابط کاربری دسکتاپ ضبط شده توصیف می کند.

نتیجه REA که در اینجا نشان داده شده است ، تجزیه و تحلیل متمرکز از پیش بارگذاری برگه ذخیره شده است که با بسته REA 4.1.0 منتشر شده ثبت شده است. API را پیدا می کند و عملیات را فراخوانی می کند. عضو کلیپ بورد و گیرنده تطبیق با خواندن پیاده سازی های بسته بندی خود در بسته متصل می شوند.

مثال Markdown از ماژول تجزیه کننده استفاده می کند 422457. تست های ماژول ذخیره شده نشان می دهد که هر دو فیلتر صفحه و چت این جدول را حفظ می کنند. تجزیه کننده های paste/import ، Structured Markdown و AI / chat دارای نقاط ورود جداگانه و فرمت های متوسط هستند.

بالا