# ウィンドウ

ほとんどのプラグインは、この方法で開発する必要があります。これにより、ブラウザウィンドウが提供され、このウィンドウ内で目的の機能を開発できます。ユーザーがプラグインをクリックすると、このウィンドウが自動的にポップアップ表示されます。

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2Fgit-blob-5482ce44c514c2a64ef03fe01eff8854d54c95fa%2Fimage.png?alt=media" 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
    }
}
```

他の `manifest.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`のすべての設定方法](https://developer.eagle.cool/plugin-api/ja-jp/tutorial/manifest) を確認できます。
{% 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/ja-jp/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.
