Plugin API
简体中文
简体中文
  • 入門
    • 简介
    • 你的第一个插件
    • 文件结构概述
    • 插件类型
      • 窗口
      • 背景服務
      • 格式扩展
      • 检查器
    • 调试插件
    • 开发交流群
  • 部署
    • 准备插件
    • 打包插件
    • 发布插件
    • 更新插件
    • 开发者政策
    • 插件图标模板
  • 开发指南
    • manifest.json 完整配置
    • 取得数据
    • 修改数据
    • 存取本地文件
    • 发出网路请求
    • 使用 Node.js 原生 API
    • 使用第三方模快
    • 多国语言(i18n)
    • 无边框窗口
  • API 参考
    • event(事件)
    • item(项目)
    • folder(文件夾)
    • tag(标签)
    • tagGroup(标签群组)
    • library(资源库)
    • window(窗口)
    • app(应用)
    • os(操作系统)
    • screen(屏幕)
    • notification(通知)
    • contextMenu(右鍵菜單)
    • dialog(对话框)
    • clipboard(剪贴板)
    • drag(拖拽文件)
    • shell(壳)
    • log(日志)
  • 额外组件
    • FFmpeg
由 GitBook 提供支持
在本页
  1. 入門
  2. 插件类型

窗口

这篇文章将阐述窗口插件的基本概念。

上一页插件类型下一页背景服務

最后更新于10个月前

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

我们可以在 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');
});

看看这段示例代码!

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

多语言 + 多主题示例代码

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

注:你可以查看这篇文章,。

https://github.com/eagle-app/eagle-plugin-examples/tree/main/Window
https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n+theme
了解 manifest.json的所有配置方式