Die Grundlagen von BrowserWindow sind im Einstiegs-Kapitel beschrieben. Hier geht's um die Tiefe: alle relevanten Konstruktor-Optionen, das webPreferences-Objekt mit Sicherheits-Defaults, frameless Windows mit Custom-Titlebar und plattform-spezifische Effekte wie macOS-Vibrancy.

01 · Abschnitt

Sicherheits-relevantes webPreferences

JavaScript 
const win = new BrowserWindow({
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        contextIsolation: true,        // PFLICHT (Default seit v12)
        sandbox: true,                 // empfohlen (Default seit v20)
        nodeIntegration: false,        // PFLICHT (Default false seit v5)
        webSecurity: true,             // CORS und Co. — nicht ausschalten
        allowRunningInsecureContent: false,
        experimentalFeatures: false,
        navigateOnDragDrop: false      // Drag-Drop löst keine Navigation aus
    }
});

Die mit „PFLICHT" markierten sind kritisch — wer sie umstellt, öffnet die App für Web-Schwachstellen aus jedem geladenen Inhalt.

OptionDefaultRisiko bei Abweichung
contextIsolationtrueRenderer hat direkten Zugriff auf Preload-Scope
sandboxfalse (true mit --enable-sandbox)Renderer kann Node-Builtins laden
nodeIntegrationfalseRenderer hat require/process direkt
webSecuritytrueSame-Origin-Policy aus — XSS-Vektoren überall
02 · Abschnitt

Frame und Title-Bar

JavaScript 
// Standard: native Title-Bar
new BrowserWindow({ frame: true });

// Frameless — komplett ohne Title-Bar
new BrowserWindow({ frame: false });

// macOS: native Buttons, Inhalt unter Titlebar
new BrowserWindow({
    titleBarStyle: 'hiddenInset',
    trafficLightPosition: { x: 12, y: 18 }
});

// Cross-Platform Custom-Titlebar (ab Electron 30)
new BrowserWindow({
    titleBarStyle: 'hidden',
    titleBarOverlay: {
        color: '#1a1a1a',
        symbolColor: '#ffffff',
        height: 32
    }
});

titleBarOverlay ist die moderne Cross-Platform-Lösung: native Buttons in der Ecke, restliche Bar gehört dir. Im HTML sorgst du dann für eine 32px-Drag-Region:

CSS renderer.css 
.titlebar {
    height: 32px;
    -webkit-app-region: drag;     /* hier kann das Fenster gegriffen werden */
}
.titlebar button {
    -webkit-app-region: no-drag;  /* Buttons NICHT als Drag-Zone */
}
03 · Abschnitt

Transparenz und Vibrancy

JavaScript 
// Transparent (Cross-Platform)
new BrowserWindow({
    transparent: true,
    frame: false,
    backgroundColor: '#00000000'
});

// macOS Vibrancy (Blur-Effekt)
new BrowserWindow({
    vibrancy: 'sidebar',           // 'titlebar', 'menu', 'popover' …
    visualEffectState: 'active'
});

// Windows: Mica/Acrylic (ab Electron 32)
new BrowserWindow({
    backgroundMaterial: 'mica'     // 'acrylic', 'tabbed'
});

vibrancy macht macOS-typische Hintergrund-Blur-Effekte. backgroundMaterial ist das Windows-11-Pendant. Beide brauchen transparent: true oder ähnliches Setup.

04 · Abschnitt

Vollbild und Kiosk

JavaScript 
// Initial im Vollbild
new BrowserWindow({ fullscreen: true });

// Vollbild-Toggle erlauben
new BrowserWindow({ fullscreenable: true });

// Kiosk-Modus (kein Verlassen, keine Menüs, ESC blockiert)
new BrowserWindow({ kiosk: true });

// Vollbild zur Laufzeit
win.setFullScreen(true);
win.setKiosk(true);

Kiosk-Modus: typisch für Info-Terminals, Digital-Signage. Vollbild + alle Standard-Shortcuts deaktiviert.

05 · Abschnitt

Always-on-Top und Floating

JavaScript 
new BrowserWindow({
    alwaysOnTop: true,
    // Optional: Level (macOS)
    // 'normal' | 'floating' | 'pop-up-menu' | 'screen-saver'
});

// Zur Laufzeit ändern
win.setAlwaysOnTop(true, 'floating');

Use-Case: kleine Tool-Fenster, die immer sichtbar bleiben sollen (Picture-in-Picture, Mini-Player, Sticky-Notes).

06 · Abschnitt

Größen-Constraints

JavaScript 
new BrowserWindow({
    width: 1200, height: 800,
    minWidth: 600, minHeight: 400,
    maxWidth: 1920, maxHeight: 1080,
    resizable: true,
    useContentSize: true   // width/height bezieht sich auf Inhalt, nicht Frame
});

useContentSize ist subtil: ohne ist width: 1200 die Fenster-Außengröße inkl. Frame, mit ist es die Inhalts-Größe. Bei UI-Layout meist letzteres gewünscht.

07 · Abschnitt

Icon und Anzeige

JavaScript 
new BrowserWindow({
    icon: path.join(__dirname, 'assets/icon.png'),
    backgroundColor: '#1a1a1a',         // Fallback-Farbe vor Renderer-Frame
    opacity: 0.95,                      // halbtransparent
    hasShadow: true,
    roundedCorners: true                // macOS automatisch, Windows 11
});

backgroundColor ist wichtig — wenn der Renderer kurz braucht (langsame App, große JS-Bundles), sieht der User nicht „weiß", sondern direkt deinen Theme-Farbton.

08 · Abschnitt

Besonderheiten

contextIsolation: false ist die rote Linie.

Es gibt keinen guten Grund mehr, das auszuschalten. Ältere Tutorials zeigen es noch, weil contextBridge eine Lernhürde war. Heute ist contextIsolation: true Pflicht — wer es ändert, sollte einen Audit-Bericht haben.

sandbox: true bricht manche Preload-Patterns.

Im Sandbox-Modus kann der Preload nur einen kleinen Subset von Node-APIs nutzen — electron-Modul und events, sonst kaum was. Wer im Preload Filesystem oder eigene Funktionen braucht: über IPC zum Main delegieren, nicht im Preload erledigen.

titleBarOverlay ist die moderne Cross-Plat-Lösung.

Bis Electron 30 brauchten Cross-Platform-Custom-Titlebars Workarounds (separate Konfig pro Plattform). Heute: ein Setup, funktioniert auf macOS, Windows, Linux. Native Buttons bleiben nativ, Custom-UI rundherum.

transparent: true verhindert manche Effekte.

Bei aktivem transparent ignoriert macOS vibrancy teilweise, Windows zeigt keine Schatten. Für Designs mit Blur eher vibrancy/backgroundMaterial nutzen, nicht reines Transparent.

useContentSize ändert was width bedeutet.

Default ist die Außengröße inkl. Frame. Mit useContentSize: true ist es die Renderer-Inhalts-Größe — was meist intuitiver ist (du designst ja UI in CSS-Pixeln, nicht in „Fenster minus Titelleiste").

Multi-Monitor: screen-Modul nutzen, nicht hardcoden.

Position-Optionen wie x: 100, y: 100 beziehen sich auf den primären Bildschirm. Bei Multi-Monitor: erst screen.getPrimaryDisplay() oder screen.getDisplayNearestPoint() fragen, dann positionieren — sonst landet das Fenster auf macOS auf einem off-screen-Display.

09 · Abschnitt

Weiterführende Ressourcen

Externe Quellen

/ Weiter

Zurück zu Main-Prozess

Zur Übersicht