Plugin API
English
English简体中文繁體中文日本語
English
English简体中文繁體中文日本語
  • Getting Started
    • Introduction
    • Your First Plugin
    • File Structure Overview
    • Plugin Types
      • Window
      • Background Service
      • Format Extension
      • Inspector
    • Debug Plugin
  • Distribution
    • Prepare Plugin
    • Package Plugin
    • Publish Plugin
    • Update Plugin
    • Developer Policies
    • Plugin Icon Template
  • Developer Guide
    • manifest.json Configuration
    • Retrieve Data
    • Modify Data
    • Access Local Files
    • Issue Network Requests
    • Using Node.js Native API
    • Using Third-Party Modules
    • Multilingual (i18n)
    • Frameless Window
  • API Reference
    • event
    • item
    • folder
    • tag
    • tagGroup
    • library
    • window
    • app
    • os
    • screen
    • notification
    • contextMenu
    • dialog
    • clipboard
    • drag
    • shell
    • log
  • Extra Moudle
    • FFmpeg
Powered by GitBook
On this page
  • Create a Borderless Window​
  • Draggable Area
  1. Developer Guide

Frameless Window

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.

Create a Borderless Window​

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
    }
}

Draggable Area

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:

<body style="-webkit-app-region: drag">
</body>

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:

button {
  -webkit-app-region: no-drag;
}

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.

PreviousMultilingual (i18n)Nextevent

Last updated 1 year ago