# 無邊框視窗無邊框視窗是一種特殊的視窗模式，它不帶有外殼（包括視窗邊框、標題欄、工具欄等），只含有網頁內容。使用無邊框視窗模式可以讓您完全自定視窗介面，讓您的應用程式在所有作業系統上的風格都保持一致。不過，由於無邊框視窗沒有系統自帶的外殼，因此在使用時需要注意，以免影響使用者體驗。 ## 新增無邊框視窗在 `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 } } ``` ## 可拖曳區您可以在應用程式中使用 `-webkit-app-region` 屬性，來控制應用程式視窗的可拖曳區域。預設情況下, 無邊框視窗是不可拖曳的。應用程式需要在 CSS 中指定 `-webkit-app-region: drag` 來告訴插件哪些區域是可拖曳的（如作業系統的標準標題欄），在可拖曳區域內部使用 `-webkit-app-region: no-drag` 則可以將其中部分區域排除。請注意, 當前只支援矩形形狀。要使整個視窗可拖曳, 您可以新增 `-webkit-app-region: drag` 作為 `body` 的樣式: ```html ``` 請注意，如果您使整個視窗都可拖曳，則必須將其中的按鈕標記為不可拖曳，否則使用者將無法點擊它們： ```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-tw/tutorial/frameless-window.md?ask= ``` 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.