检查器

这篇文章将阐述檢查器插件的基本概念。

注意：检查器插件需要 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>

完整示例代码： https://github.com/eagle-app/eagle-plugin-examples/tree/main/Inspector

如何调试检插件

调试检查器插件的方式很简单，你可以点击画面中的检查器插件右键，接着选择「开发者工具」，就可以进行调试了。

最后更新于7个月前