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
Powered by GitBook
On this page
  1. 入門
  2. 插件類型

視窗

這篇文章將闡述視窗插件的基本概念。

Previous插件類型Next背景服務

Last updated 9 months ago

絕大部分的插件都應該使用這種方式開發。它提供了一個瀏覽器視窗,你可以在這個視窗中開發想要達成的功能,當使用者點擊插件時,這個視窗會自動彈出。

我們可以在 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的所有設定方式