# 檢查器

{% 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 %}

### 如何除錯檢擴充

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