In Electron, how to preserve the original traffic light buttons?

When developing an Electron application on macOS, I want to set the window to have no frame and use the system's default traffic light buttons.

I initially planned to build one using HTML, but I realized that the one in VS Code is built-in. I couldn't find how to set it up.

I looked through the Electron documentation, but I didn't find the answer I'm seeking. I want to achieve the same effect as in VS Code. Have others also encountered this kind of requirement?

You can use a package I made about last year called Electron-Trubar and customize background color, text, text color, seam color, and traffic light position.

First install it:

npm install electron-trubar

Then use it like this (setting traffic light position):

const TruBar = require("electron-trubar");

TruBar(mainWindow, {
  trafficLightX: 6.5,
  trafficLightY: 6.5
});

And if you want a transparent window frame, BUT you also want traffic light buttons, set the "backgroundColor" property to "transparent" when setting up TruBar.

Make sure to use the TruBar() function after initialization.

Note that you don't need this package to do this. It is just an easier and more simple method to customizing the window's taskbar.

Electron has a built-in funtion just for doing this:

mainWindow.setTrafficLightPosition({ x: 6.5, y: 6.5 });