# 窗口

绝大部分的插件都应该使用这种方式开发。它提供了一个浏览器窗口，你可以在这个窗口中开发想要达成的功能，当用户点击插件时，这个窗口会自动弹出。

<figure><img src="/files/X1epHVQ3qFwlqWiDusGD" alt=""><figcaption></figcaption></figure>

我们可以在 `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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script type="text/javascript" src="js/plugin.js"></script>
</head>

<body>
    <div id="message"></div>
</body>
</html>
```

{% endtab %}

{% tab title="plugin.js" %}

```javascript
eagle.onPluginCreate((plugin) => {
    console.log('eagle.onPluginCreate');
    console.log(plugin);
    document.querySelector('#message').innerHTML = `
    <ul>
        <li>id: ${plugin.manifest.id}</li>
        <li>version: ${plugin.manifest.version}</li>
        <li>name: ${plugin.manifest.name}</li>
        <li>logo: ${plugin.manifest.logo}</li>
        <li>path: ${plugin.path}</li>
    </ul>
`;
});

eagle.onPluginShow(() => {
    console.log('eagle.onPluginShow');
});

eagle.onPluginHide(() => {
    console.log('eagle.onPluginHide');
});

eagle.onPluginBeforeExit((event) => {
    console.log('eagle.onPluginBeforeExit');
});
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**看看这段示例代码！**

想要获得灵感吗？快来查看我们的示例代码，这里有更多精彩内容等着你！

<https://github.com/eagle-app/eagle-plugin-examples/tree/main/Window>
{% endhint %}

{% hint style="info" %}
**多语言 + 多主题示例代码**

对于那些想要实现多语言国际化（i18n）的开发者来说，这个 GitHub 项目就是你最佳的学习伙伴！点击下面的链接，探索如何巧妙结合 i18n 与多主题设计，为你的应用程序增添多语言支持的魔力。

<https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n+theme>
{% endhint %}

{% hint style="info" %}
注：你可以查看这篇文章，[了解 `manifest.json`的所有配置方式](/plugin-api/zh-cn/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-cn/get-started/plugin-types/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.
