# 检查器

{% hint style="info" %}
注意：检查器插件需要 Eagle 4.0 Beta 17 以上的版本才能支持。
{% endhint %}

你可以针对特定格式的文件，开发专属于该格式的额外检查器工具，当用户选择该文件时，就可以在右侧检查器直接使用该插件。例如：可以针对 JPG/Raw 文件开发 EXIF 属性的检查器插件，每当用户选择该文件时，就可以轻松在右侧查看到「拍摄时间、焦距、光圈、经纬度」等额外数据。

检查器插件其实是格式扩展插件的变体，其定义方式非常类似，检查器插件在 `manifest.json` 中不需要定义 `main` 属性，而是需要设置 `preview` 属性。以下是一个范例代码：

```json
{
    "preview": {}
}
```

在 `preview` 中可以定义要扩展的文件扩展名。例如，如果想开发一个针对 jpg, png 格式的额外插件，可以输入 `"`jpg,png`": {}`：

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

接着设定以下属性：

* `path`: 该插件的 HTML 文件路径
* `height`: 该插件的默认高度
* `multiSelect`: 多选时是否要显示（非特殊情况建议设置为 `false`）

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

设置其它 `metadata.json` 字段后，最终代码如下：

{% tabs %}
{% tab title="manifest.json" %}

```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
            }
        }
    }
}
```

{% endtab %}

{% tab title="index.html" %}

```html
<!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>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**完整示例代码：**\
<https://github.com/eagle-app/eagle-plugin-examples/tree/main/Inspector>
{% endhint %}

### 如何调试检插件

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.eagle.cool/plugin-api/zh-cn/get-started/plugin-types/inspector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
