POC · custom-electron-titlebar

Barre de titre 100 % custom dans Electron, avec un vrai toolchain electron-vite (build séparé main / preload / renderer, HMR en dev).

Lib : custom-electron-titlebar

Lancer

npm install
npm run dev      # dev + HMR
npm run build    # bundle dans out/
npm start        # aperçu du build

Ce que ça montre

• Barre de titre non-native : menu applicatif (Fichier / Édition / Thème / Aide), titre centré et boutons de fenêtre dessinés par la lib.
• Menu Thème → change la couleur de la barre en live (updateBackground).
• Menu Fichier ▸ Nouveau / Ouvrir → IPC vers le renderer.
• Bouton « Tester l'IPC » → ipcRenderer.invoke('ping') vers le main.

Structure

src/
├── main/index.js       setupTitlebar() + attachTitlebarToWindow() + menu
├── preload/index.js    new Titlebar(...)  ← instancié ICI (pattern officiel)
└── renderer/           UI (Vite)
electron.vite.config.mjs

Points clés

• titleBarStyle: 'hidden' + sandbox: false dans les webPreferences.
• La Titlebar s'instancie dans le preload, pas dans le bundle renderer : le preload a accès au DOM et au module electron. Instancier dans le renderer provoque l'erreur path.join is not a function (Vite pré-bundle et externalise les modules node côté navigateur).
• custom-electron-titlebar@4.4.x exige Electron > 36 (peer dependency).
• electron-vite 5 : on externalise les deps via build.externalizeDeps (l'ancien externalizeDepsPlugin() est déprécié).
• setupTitlebar() doit être appelé avant la création de la fenêtre ; attachTitlebarToWindow(win) après.