# 視窗 絕大部分的插件都應該使用這種方式開發。它提供了一個瀏覽器視窗，你可以在這個視窗中開發想要達成的功能，當使用者點擊插件時，這個視窗會自動彈出。
我們可以在 `manifest.json` 檔案中設定 `main` 欄位來設定視窗屬性。 {% code lineNumbers="true" %} ```json { "main": {} } ``` {% endcode %} 為視窗設定預設開啓連結`url`： ```json { "main": { "url": "index.html" } } ``` 設定視窗預設寬度 `width`及高度`height`： ```json { "main": { "url": "index.html", "width": 640, "height": 480 } } ``` 設定其它 `metadata.json` 欄位後，最終程式碼如下： {% tabs %} {% tab title="manifest.json" %} ```json { "id": "LBCZE8V6LPCKD", "version": "1.0.0", "name": "視窗插件", "logo": "/logo.png", "keywords": [], "main": { "url": "index.html", "width": 640, "height": 480 } } ``` {% endtab %} {% tab title="index.html" %} ```html
``` {% endtab %} {% tab title="plugin.js" %} ```javascript eagle.onPluginCreate((plugin) => { console.log('eagle.onPluginCreate'); console.log(plugin); document.querySelector('#message').innerHTML = ` `; }); eagle.onPluginShow(() => { console.log('eagle.onPluginShow'); }); eagle.onPluginHide(() => { console.log('eagle.onPluginHide'); }); eagle.onPluginBeforeExit((event) => { console.log('eagle.onPluginBeforeExit'); }); ``` {% endtab %} {% endtabs %} {% hint style="info" %} **看看這段範例程式碼！** 想要獲得靈感嗎？快來查看我們的範例程式碼，這裡有更多精彩內容等著你！ {% endhint %} {% hint style="info" %} **多國語言 + 多主題範例程式碼** 對於那些想要實現多國語言國際化(i18n)的開發者來說，這個 GitHub 專案就是你最佳的學習夥伴！點擊下面的連結，探索如何巧妙結合 i18n 與多主題設計，為你的應用程式增添多國語言支援的魔力。 {% endhint %} {% hint style="info" %} 注：你可以查看這篇文章，[瞭解 `manifest.json`的所有設定方式](/plugin-api/zh-tw/tutorial/manifest.md)。 {% endhint %} --- # 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/get-started/plugin-types/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.