[Open Source] #37 - Pear Desktop: Kiến trúc Plugin-based và sức mạnh "tiêm" mã nguồn với Electron & SolidJS
Dù YouTube Music là một trong những nền tảng stream nhạc hàng đầu, nhưng trải nghiệm trên trình duyệt đôi khi chưa đủ "đã" đối với người dùng desktop. Pear Desktop xuất hiện không chỉ để đưa YouTube Music lên PC, mà còn nâng tầm nó thông qua một hệ thống plugin mạnh mẽ, khả năng chặn quảng cáo và đồng bộ lời bài hát thời gian thực.
Dưới góc độ kỹ thuật, Pear Desktop là một "masterpiece" về việc sử dụng Electron kết hợp với SolidJS và kỹ thuật Inject mã nguồn để can thiệp vào một trang Web lớn mà vẫn giữ được hiệu suất tối ưu.
Github: https://github.com/pear-devs/pear-desktop
🛠️ 1. Nền tảng công nghệ: Khi Electron gặp gỡ SolidJS và Vite
Pear Desktop tận dụng những công cụ hiện đại nhất để giải quyết bài toán hiệu suất - vốn là điểm yếu cố hữu của các ứng dụng Electron:
- Electron-Vite: Khác với các dự án cũ dùng Webpack, dự án này sử dụng Vite giúp tốc độ Hot Module Replacement (HMR) cực nhanh và quy trình build được tối ưu hóa cho cả 3 tiến trình (Main, Preload, Renderer).
- SolidJS (Renderer): Thay vì React, Pear Desktop chọn SolidJS. Với cơ chế "No Virtual DOM", SolidJS cực kỳ nhẹ và nhanh, rất phù hợp để chạy song song khi "tiêm" vào trang web YouTube Music mà không gây lag hay tốn thêm nhiều tài nguyên.
- MDUI 2 (Material Design 3): Toàn bộ giao diện điều khiển và cài đặt của ứng dụng tuân thủ ngôn ngữ thiết kế mới nhất của Google thông qua các Web Components.
- TypeScript Strict: Dự án áp dụng strict mode và phân tách cấu hình TS cho từng layer, giúp hạn chế tối đa lỗi runtime trong môi trường đa tiến trình.
🏗️ 2. Trụ cột kiến trúc: Plugin-based và Virtual Modules
Điểm sáng nhất của Pear Desktop nằm ở tư duy kiến trúc Plug-and-Play:
- Tính mô-đun hóa tuyệt đối: Từ Adblocker, Discord RPC, đến hệ thống Lyrics... tất cả đều là các plugin độc lập. Bạn có thể bật/tắt chúng mà không ảnh hưởng đến lõi (Core) của ứng dụng.
- Virtual Modules: Dự án sử dụng các Vite plugin tùy chỉnh để tạo ra các module ảo (
virtual:plugins,virtual:i18n). Kỹ thuật này giúp ứng dụng tự động quét thư mục và nạp tất cả plugin hiện có khi khởi động, giúp việc mở rộng tính năng trở nên cực kỳ dễ dàng. - Tư duy "Wrapper" thông minh: Pear Desktop không xây dựng trình phát nhạc riêng. Nó "bao bọc"
music.youtube.comvà sử dụng tiến trình Preload làm cầu nối để điều khiển API nội bộ của YouTube (như đối tượng#movie_player).
🔄 3. Các kỹ thuật "Pro-level" trong mã nguồn
-
WebRequest Interception: Sử dụng
@jellybrick/electron-better-web-requestđể can thiệp vào các header HTTP. Kỹ thuật này cho phép ứng dụng loại bỏ các chính sách bảo mật (CSP) của Google để có thể chèn thêm script bên ngoài hoặc chặn các request quảng cáo ngay từ lớp mạng. -
Trusted Types & Security: Dự án triển khai chính sách
trusted-typesđể bảo vệ ứng dụng khỏi các cuộc tấn công XSS khi thực hiện chèn (inject) HTML động vào trang web YouTube Music. Đây là tiêu chuẩn bảo mật cao cấp thường thấy trong các ứng dụng Enterprise. -
Monkey Patching với pnpm: Thông qua thư mục
patches/, dự án sửa lỗi trực tiếp trong các thư viện node_modules. Ví dụ: vá lỗi hiển thị của thư viện UI hoặc tối ưu hóa trình xử lý âm thanh mà không cần chờ tác giả gốc cập nhật.
📊 4. Workflow: Luồng khởi tạo và Tiêm mã (Injection)
Sơ đồ dưới đây mô tả cách Pear Desktop khởi động và "chiếm quyền" điều khiển trang web YouTube Music:
⚖️ 5. So sánh chiến lược
| Tiêu chí | Pear Desktop | YT Music (Browser) | YT Music Official (PWA) |
|---|---|---|---|
| Hiệu suất | Cao (Tối ưu bởi SolidJS) | Trung bình | Trung bình |
| Tính năng mở rộng | Rất mạnh (Plugin-based) | Không có | Hạn chế |
| Trải nghiệm Desktop | Native (Phím tắt, Tray, RPC) | Phụ thuộc trình duyệt | Cơ bản |
| Quảng cáo | Tích hợp Adblocker | Phụ thuộc Extension | Có quảng cáo |
✅ Kết luận: Tại sao Pear Desktop là hình mẫu?
Pear Desktop không chỉ là một trình nghe nhạc đơn thuần, nó là một bài học mẫu mực về cách xây dựng ứng dụng Electron hiện đại. Thay vì tạo ra một ứng dụng nặng nề, dự án đã khéo léo "đứng trên vai người khổng lồ" (YouTube Music), tận dụng sức mạnh của Vite để tối ưu hóa quá trình phát triển và SolidJS để đảm bảo trải nghiệm mượt mà.
Đối với các developer đang muốn tìm hiểu về:
- Cách xây dựng hệ thống Plugin linh hoạt.
- Kỹ thuật can thiệp và điều khiển trang web bên thứ ba.
- Quản lý dự án Monorepo/Multi-process với Vite.
...thì Pear Desktop chính là kho tài liệu thực chiến không thể bỏ qua.
Hy vọng bài phân tích này mang lại cho bạn những kiến thức hữu ích về thế giới Electron. Đừng quên Upvote và Follow mình để theo dõi thêm các dự án mã nguồn mở thú vị khác!
All rights reserved
