この記事では、ウィンドウプラグインの基本的な概念について説明します。
ほとんどのプラグインは、この方法で開発する必要があります。これにより、ブラウザウィンドウが提供され、このウィンドウ内で目的の機能を開発できます。ユーザーがプラグインをクリックすると、このウィンドウが自動的にポップアップ表示されます。
manifest.json ファイルで main フィールドを設定して、ウィンドウ属性を設定できます。
{
"main": {}
}ウィンドウにデフォルトの開かれたリンク url を設定します：
ウィンドウのデフォルトの幅 width および高さ height を設定します：
他の metadata.json フィールドを設定した後、最終コードは以下のようになります：
最終更新
{
"main": {
"url": "index.html"
}
}{
"main": {
"url": "index.html",
"width": 640,
"height": 480
}
}{
"id": "LBCZE8V6LPCKD",
"version": "1.0.0",
"name": "ウィンドウプラグイン",
"logo": "/logo.png",
"keywords": [],
"main":
{
"url": "index.html",
"width": 640,
"height": 480
}
}<!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>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');
});