# ウィンドウ
ほとんどのプラグインは、この方法で開発する必要があります。これにより、ブラウザウィンドウが提供され、このウィンドウ内で目的の機能を開発できます。ユーザーがプラグインをクリックすると、このウィンドウが自動的にポップアップ表示されます。
`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
```
{% 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`のすべての設定方法](https://developer.eagle.cool/plugin-api/ja-jp/tutorial/manifest) を確認できます。
{% endhint %}