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. 插件類型

檢查器

這篇文章將闡述檢查器擴充的基本概念。

注意:檢查器擴充需要 Eagle 4.0 Beta 17 以上的版本才能支援。

你可以針對特定格式的檔案,開發專屬於該格式的額外檢查器工具,當使用者選擇該檔案時,就可以在右側檢查器直接使用該擴充。例如:可以針對 JPG/Raw 檔案開發 EXIF 屬性的檢查器擴充,每當使用者選擇該檔案時,就可以輕鬆在右側查看到「拍攝時間、焦距、光圈、經緯度」等額外資料。

檢查器擴充其實是格式擴充擴充的變體,其定義方式非常類似,檢查器擴充在 manifest.json 中不需要定義 main 屬性,而是需要設定 preview 屬性。以下是一個範例程式碼:

{
    "preview": {}
}

在 preview 中可以定義要擴充的檔案副檔名。例如,如果想開發一個針對 jpg, png 格式的額外擴充,可以輸入 "jpg,png": {}:

{
    "preview": {
        "jpg,png": {}
    }
}

接著設定以下屬性:

  • path: 該擴充的 HTML 檔案路徑

  • height: 該擴充的預設高度

  • multiSelect: 多選時是否要顯示(非特殊情況建議設定為 false)

{
    "preview": {
        "jpg,png": {
            "inspector": {
                "path": "index.html",
                "height": 100,
                "multiSelect": false
            }
        }
    }
}

設定其它 metadata.json 欄位後,最終程式碼如下:

{
    "id": "cc41e899-5fc3-445c-a113-2d9573d6edcc",
    "version": "1.0.0",
    "platform": "all",
    "arch": "all",
    "name": "Inspector Plugin",
    "logo": "/logo.png",
    "keywords": [],
    "devTools": true,
    "preview": {
        "jpg,png": {
            "inspector": {
                "path": "index.html",
                "height": 100,
                "multiSelect": false
            }
        }
    }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Inspector Plugin Example</title>
    <style>
        html {
            font-size: 11px;
            font-family: sans-serif;
            border-radius: 6px;
            overflow: hidden;
        }

        body {
            padding: 0;
            margin: 0;
            color: transparent;
        }

        /* colors for different themes */

        body[theme="LIGHT"],
        body[theme="LIGHTGRAY"] {
            color: black;
        }

        body[theme="GRAY"],
        body[theme="BLUE"],
        body[theme="PURPLE"],
        body[theme="DARK"] {
            color: white;
        }
    </style>
</head>

<body>
    Inspector Plugin Example
    <script>
        // Listen to plugin creation
        eagle.onPluginCreate(async (plugin) => {

            // Get the current theme
            const theme = await eagle.app.theme;
            document.body.setAttribute('theme', theme);

            // Get the selected item
            const item = await eagle.item.getSelected();

            console.log(item);
            console.log(theme);
        });

        // Listen to theme changes
        eagle.onThemeChanged((theme) => {
            document.body.setAttribute('theme', theme);
        });
    </script>
</body>

</html>

如何除錯檢擴充

除錯檢查器擴充的方式很簡單,你可以點擊畫面中的檢查器擴充右鍵,接著選擇「開發者工具」,就可以進行除錯了。

Previous格式擴充Next除錯插件

Last updated 1 year ago

完整範例程式碼:

https://github.com/eagle-app/eagle-plugin-examples/tree/main/Inspector