無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
桌面應用程式的格局已被一個簡單的洞察所改變：如果你能用驅動網際網路的相同 Web 技術來構建原生品質的桌面應用程式呢？Electron 將這個願景變為現實，並在此過程中成為現代桌面軟體開發的支柱。
Electron 是一個將 Chromium 的渲染引擎與 Node.js 執行時期相結合的開源框架，讓開發者能夠使用 JavaScript、HTML 和 CSS 構建跨平台桌面應用程式。最初由 GitHub 為 Atom 編輯器創建，Electron 後來移交給 OpenJS Foundation，並已成為最具影響力的開源專案之一。
數字令人驚嘆：Electron 為 Visual Studio Code（每月超過 1 億用戶）、Slack、Discord、Figma、Notion、WhatsApp Desktop、Signal、Microsoft Teams 以及成千上萬其他應用程式提供支援。它讓無數新創公司能夠在維護 Web 產品的同時發布桌面應用程式，而無需維護單獨的原生程式碼庫。
Electron 的架構如何運作？
Electron 的架構建立在繼承自 Chromium 的多程序模型之上，有兩種主要程序類型協同工作。
graph TD
A[主程序\nNode.js 執行時期] --> B[BrowserWindow 1\nChromium 渲染程序]
A --> C[BrowserWindow 2\nChromium 渲染程序]
A --> D[BrowserWindow N\nChromium 渲染程序]
B --> E[IPC: ipcMain / ipcRenderer]
C --> E
D --> E
E --> F[主程序處理器\n檔案系統、原生 API]
A --> G[系統匣]
A --> H[原生選單]
A --> I[Dock / 工作列]
主程序以完整的 Node.js 環境運行，管理應用程式生命週期、原生選單、系統匣和 IPC（行程間通訊）。每個渲染程序是一個獨立的 Chromium 實例，顯示 HTML/CSS/JavaScript 使用者介面。這種分離提供了效能隔離和安全邊界。
哪些應用程式使用 Electron 構建？
Electron 的應用範圍涵蓋整個軟體產業，從開發者工具到通訊平台再到創意套件。
| 應用程式 | 類別 | 使用者 / 影響 |
|---|---|---|
| Visual Studio Code | 程式碼編輯器 | 每月超過 1 億活躍用戶 |
| Slack | 團隊通訊 | 每日超過 1,000 萬活躍用戶 |
| Discord | 語音/文字聊天 | 每月超過 1.5 億活躍用戶 |
| Figma Desktop | 設計 | 超過 400 萬用戶（混合 Web + 桌面） |
| Signal Desktop | 加密訊息 | 每月超過 4,000 萬活躍用戶 |
| Notion Desktop | 生產力 | 超過 3,000 萬用戶 |
如此多樣化使用案例的廣泛採用，證明了 Electron 從輕量級聊天應用程式到高效能程式碼編輯器的多功能性。
Electron 有哪些關鍵 API 和功能？
Electron 提供了一套全面的 API，彌合了 Web 應用程式和原生桌面功能之間的差距。
| API 類別 | 範例 | 說明 |
|---|---|---|
| 視窗管理 | BrowserWindow、無邊框視窗 | 原生視窗控制、透明視窗、毛玻璃效果 |
| 作業系統整合 | Tray、Notification、Menu、Shell | 系統匣圖示、原生通知、上下文選單 |
| 檔案系統 | dialog.showOpenDialog、net.request | 原生檔案對話框、HTTP 請求、協定處理器 |
| 硬體 | desktopCapturer、screen | 螢幕錄製、顯示資訊、媒體存取 |
| 系統 | app、process、clipboard | 應用程式生命週期、剪貼簿存取、環境偵測 |
這些 API 可透過 Electron 的 IPC 系統存取，該系統使用 ipcMain 和 ipcRenderer 在主程序和渲染程序之間提供安全、結構化的通訊。
Electron 的安全最佳實踐是什麼？
Electron 應用程式的安全性遵循縱深防禦方法，認識到渲染程序是潛在不可信的環境。
| 實踐 | 實作方式 |
|---|---|
| 上下文隔離 | 在 BrowserWindow 選項中設定 contextIsolation: true |
| Node 整合 | 在渲染程式中設定 nodeIntegration: false（自 v5 起的預設值） |
| 內容安全策略 | 限制腳本來源的 HTTP 標頭 |
| IPC 驗證 | 始終在主程式上驗證 IPC 訊息負載 |
| 沙箱 | 為不受信任的內容啟用渲染程式沙箱 sandbox: true |
遵循這些實踐可確保即使渲染程序遭到入侵（例如透過惡意的第三方腳本），攻擊者也無法直接存取 Node.js API 或作業系統。
常見問題
什麼是 Electron？ Electron 是由 OpenJS Foundation 開發的開源框架，用於使用 Web 技術構建跨平台桌面應用程式。它結合了 Chromium 的渲染引擎與 Node.js 執行時期，讓開發者能夠從單一代碼庫創建可在 macOS、Windows 和 Linux 上運行的原生桌面應用程式。
有哪些主要應用程式使用 Electron 構建？ Electron 為許多最受歡迎的桌面應用程式提供支援，包括 Visual Studio Code、Slack、Discord、Postman、Figma、Notion、WhatsApp Desktop、Signal、GitHub Desktop、Microsoft Teams 等。
Electron 與其他跨平台框架有何不同？ 與原生框架或其他跨平台解決方案不同，Electron 使用 Web 技術，每個視窗使用一個完整的 Chromium 瀏覽器實例。這以部分記憶體用量換取了巨大的開發者生產力。
Electron 的安全模型是什麼？ Electron 使用多程序架構，最佳實踐包括啟用上下文隔離、禁用渲染程式中的 Node.js 整合、使用內容安全策略標頭和適當的 IPC 通訊。
Electron 應用程式可以存取原生 API 嗎？ 是的，Electron 提供系統匣、通知、檔案系統存取、Shell 整合、剪貼簿存取、全域快捷鍵和原生選單等 API。
延伸閱讀
- Electron GitHub 儲存庫 – 原始碼、問題和發布版本
- Electron 官方文件 – API 參考、指南和教學
- Electron 安全指南 – 官方安全最佳實踐和檢查清單
- Awesome Electron – 精選的 Electron 資源、工具和應用程式列表
