How to customize the window title bar of an Electron app?

Question

I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:

Answer 1

Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need.

Electron/webkit provides CSS properties that allows you to make any element draggable, like a titlebar:

.titlebar {   -webkit-user-select: none;   -webkit-app-region: drag; }