# Frameless Window

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.

```json
{
    "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 <a href="#ke-tuo-ye-qu" id="ke-tuo-ye-qu"></a>

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:

```html
<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:

```css
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.eagle.cool/plugin-api/tutorial/frameless-window.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
