electron has blue outline/frame when launch

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;