> 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-cn/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-cn/tutorial/manifest.md)。
{% endhint %}