# 檢查器

{% 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-tw/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.
