electron has blue outline/frame when launch - electron

Question

I want to use the same window outline like vscode:
but here is my window at launch
my window config
new BrowserWindow({
minHeight: 400,
minWidth: 600,
center: true,
frame: false,
backgroundColor: "#fff",
webPreferences: {
spellcheck: false,
webSecurity: true,
nodeIntegration: true,
contextIsolation: false,
enableWebSQL: false,
images: false,
webgl: false,
},
});
deps:
"electron": "17.0.0",
"electron-builder": "^22.14.13"

Answer 1

OMG, I did it!!!!
// #ts-check
const { BrowserWindow, app } = require("electron");
const path = require("path");
const { Library } = require("ffi-napi");
app.disableHardwareAcceleration();
function createWindow() {
return new BrowserWindow({
minHeight: 400,
minWidth: 600,
center: true,
frame: false,
show: true,
backgroundColor: "#fff",
webPreferences: {
spellcheck: false,
webSecurity: true,
nodeIntegration: true,
contextIsolation: false,
},
});
}
async function openWindow() {
const win = createWindow();
// ffi - napi;
var ffi = Library("user32.dll", {
SetWindowLongA: ["int", ["int", "int", "long"]],
SetWindowPos: ["int", ["int", "int", "int", "int", "int", "int", "int"]],
});
// THICK frame
const WS_THICKFRAME = 0x00040000;
// show window
const SWP_SHOWWINDOW = 0x0040;
// draw a thick frame
ffi.SetWindowLongA(win.getNativeWindowHandle().readUint32LE(), -16, WS_THICKFRAME);
// show window
ffi.SetWindowPos(win.getNativeWindowHandle().readUint32LE(), 0, 0, 0, 0, 0, SWP_SHOWWINDOW);
win.center();
if (app.isPackaged) {
await win.loadFile("public/index.html");
} else {
await win.loadURL("http://localhost:3000");
}
return win;
}
exports.createWindow = createWindow;
exports.openWindow = openWindow;