Frameless Window
Open a window without toolbars, borders, and other graphical shells.
Last updated
Open a window without toolbars, borders, and other graphical shells.
A borderless window is a special type of window mode that does not have a shell (including window borders, title bars, toolbars, etc.), containing only the web content. Using a borderless window mode allows you to fully customize the window interface, making your application look consistent across all operating systems. However, since borderless windows do not have a system-provided shell, care must be taken while using them to avoid affecting the user experience.
In the manifest.json file, set the frame property of the window object to false to enable borderless window mode.
{
"id": "LB5UL2P0Q9FFF",
"version": "1.0.0",
"name": "Hello World",
"logo": "/logo.png",
"keywords": ["keywrod1", "keywrod2"],
"main":
{
"frame": false, // 👈 Borderless mode
"url": "index.html",
"width": 640,
"height": 480
}
}You can use the -webkit-app-region property in your application to control the draggable area of the application window.
By default, borderless windows are non-draggable. The application needs to specify -webkit-app-region: drag in CSS to tell the plugin which areas are draggable (like standard title bars of the operating system). Use -webkit-app-region: no-drag within the draggable area to exclude some parts. Please note that currently only rectangular shapes are supported.
To make the entire window draggable, you can add -webkit-app-region: drag as the body style:
Please note that if you make the entire window draggable, you must mark the buttons inside as not draggable, otherwise users will not be able to click on them:
If you only set the custom title bar to be draggable, you also need to make all the buttons within the title bar non-draggable.
Last updated
<body style="-webkit-app-region: drag">
</body>button {
-webkit-app-region: no-drag;
}