How to create a frameless window in Electron project

WEB TMS Web Core VSC
2

Hi,

No direct support for these but you can freely modify the main.js file to your liking.

  1. Add frame: false to you main form, this will make sure no border is added to it:
if (os.type() === 'Linux') {
    let icoPath = path.resolve(__dirname, './$(IconFileLinux)');
    mainWindow = new BrowserWindow({ width: 0, height: 0, frame: false, show: false, webPreferences: { nodeIntegration: true, contextIsolation: false }, useContentSize: true, icon: icoPath})
  } else {
    mainWindow = new BrowserWindow({ width: 0, height: 0, frame: false, show: false, webPreferences: { nodeIntegration: true, contextIsolation: false }, useContentSize: true})
  }
  1. Example to minimize (you can also maximize or restore the window, check the Electron API for that).
    In your application add libelectron unit, then:
type
  TForm4 = class(TElectronForm)
    WebButton1: TWebButton;
    procedure WebButton1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure MinimizeForm;
  end;

var
  Form4: TForm4;

implementation

{$R *.dfm}

procedure TForm4.MinimizeForm;
begin
  Electron.IPCRenderer.invoke('ipc-custom-window-minimize');
end;

procedure TForm4.WebButton1Click(Sender: TObject);
begin
  MinimizeForm;
end;

In the main.js file add at the bottom:

ipcMain.handle("ipc-custom-window-minimize", (event, args) => {
  let senderBW = BrowserWindow.fromWebContents(event.sender);
  senderBW.minimize();
});
  1. Same as above. You can either directly disable things on the main form (or all child forms) by modifying the main.js and setting minimizable and maximizable or use the setters to apply them.