# 无边框窗口

无边框窗口是一种特殊的窗口模式，它不带有外壳（包括窗口边框、标题栏、工具栏等），只含有网页内容。使用无边框窗口模式可以让您完全自定义窗口界面，让您的应用程序在所有操作系统上的风格都保持一致。不过，由于无边框窗口没有系统自带的外壳，因此在使用时需要注意，以免影响用户体验。

## 创建无边框窗口​

在 `manifest.json` 文件中，将 `window` 对象的 `frame` 属性设置为 `false`，即可启用无边框窗口模式。

```json
{
    "id": "LB5UL2P0Q9FFF",
    "version": "1.0.0",
    "name": "Hello World",
    "logo": "/logo.png",
    "keywords": ["keywrod1", "keywrod2"],
    "main":
    {
        "frame": false,        // 👈 无边框模式
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}
```

## 可拖拽区 <a href="#ke-tuo-ye-qu" id="ke-tuo-ye-qu"></a>

您可以在应用程序中使用 `-webkit-app-region` 属性，来控制应用程序窗口的可拖拽区域。

默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 `-webkit-app-region: drag` 来告诉插件哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 `-webkit-app-region: no-drag` 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。

要使整个窗口可拖拽, 您可以添加 `-webkit-app-region: drag` 作为 `body` 的样式:

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

请注意，如果您使整个窗口都可拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击它们：

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

如果只将自定义标题栏设置为可拖拽，还需要使标题栏中的所有按钮都不可拖拽。


---

# 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/zh-cn/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.
