窗口
这篇文章将阐述窗口插件的基本概念。
最后更新于
绝大部分的插件都应该使用这种方式开发。它提供了一个浏览器窗口,你可以在这个窗口中开发想要达成的功能,当用户点击插件时,这个窗口会自动弹出。
我们可以在 manifest.json
文件中设置 main
字段来设置窗口属性。
{
"main": {}
}
为窗口设置默认打开链接url
:
{
"main": {
"url": "index.html"
}
}
设置窗口默认宽度 width
及高度height
:
{
"main": {
"url": "index.html",
"width": 640,
"height": 480
}
}
设置其它 metadata.json
字段后,最终代码如下:
{
"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');
});
看看这段示例代码!
想要获得灵感吗?快来查看我们的示例代码,这里有更多精彩内容等着你!
https://github.com/eagle-app/eagle-plugin-examples/tree/main/Window
多语言 + 多主题示例代码
对于那些想要实现多语言国际化(i18n)的开发者来说,这个 GitHub 项目就是你最佳的学习伙伴!点击下面的链接,探索如何巧妙结合 i18n 与多主题设计,为你的应用程序增添多语言支持的魔力。
https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n+theme
注:你可以查看这篇文章,了解 manifest.json
的所有配置方式。