> For the complete documentation index, see [llms.txt](https://developer.eagle.cool/plugin-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.eagle.cool/plugin-api/zh-tw/get-started/plugin-types/window.md).
# 視窗
絕大部分的插件都應該使用這種方式開發。它提供了一個瀏覽器視窗，你可以在這個視窗中開發想要達成的功能，當使用者點擊插件時，這個視窗會自動彈出。
我們可以在 `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 = `
- id: ${plugin.manifest.id}
- version: ${plugin.manifest.version}
- name: ${plugin.manifest.name}
- logo: ${plugin.manifest.logo}
- path: ${plugin.path}
`;
});
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 %}