Eagleのプラグインを作る

素材管理アプリのEagleが4.0以降Pluginに対応したらしいのですが、日本語でも英語でも公式ドキュメント以外のがほとんど見つからなかったので基本的な部分だけまとめました。
まだあまりわかってないので随時更新します。

tl;dr

• 新規ウィンドウを開かないUI拡張ならインスペクタ
• デフォルトでサポートされていない拡張子のプレビューに対応したいならフォーマット拡張
• それ以外ならウィンドウプラグイン、自動起動させたかったらバックグラウンドサービス
• 種類による差は描画領域の違い。基本ブラウザが動くだけなので普通にWebアプリ作ればOK

プラグインの種類

Eagleには2024/12/23現在、4つの形式のプラグインが存在します。

• ウィンドウ
• バックグラウンドサービス
• フォーマット拡張
• インスペクタ

ウィンドウとバックグラウンドサービスの違いは自動起動の有無となっており、基本的にはウィンドウプラグインで作れば問題ないです。
また、フォーマット拡張とインスペクタに関しては特定拡張子のみに対してUIを追加するものとなっており、フォーマット拡張ではプレビュー画面、インスペクタではインスペクタ領域に描画されます。

ウィンドウプラグイン

名前の通り、新規ブラウザウィンドウが表示され、そのウィンドウ内で独自機能を提供できるものとなっています。
大体の機能はこの形式で作ることになります。
プラグインによって作成されるウィンドウに関してはmanifest.jsonのmainで定義されており、以下のようになっています。

{
    "main":
    {
        "url": "index.html", //新規ウィンドウで描画されるhtml
        "width": 640, //幅
        "height": 480, //高さ
        "minWidth": 640, //最小の幅
        "minHeight": 480, //最小の高さ
        "maxWidth": 640, //最大の幅
        "maxHeight": 480, //最大の高さ
        "alwaysOnTop": false, //trueで常に最上面に表示
        "frame": true, //falseでフレームレスウィンドウに
        "fullscreenable": true, //フルスクリーン表示が可能かどうか
        "maximizable": true, //最大化が可能かどうか
        "minimizable": true, //最小化が可能かどうか
        "resizable": true, //サイズ変更が可能かどうか
        "backgroundColor": "#ffffff", //背景色
        "shortcut": "", //起動用のショートカットキー
        "multiple": false, //複数ウィンドウを許可するかどうか
        "runAfterInstall": false, //インストール時に自動起動するかどうか
        "serviceMode": true` //Eagleの起動時に自動起動するかどうか(バックグラウンドサービス)
    }
}

動作としてはエントリページが新規ウィンドウで立ち上がるというものであるため、ブラウザで実現できることならおそらくなんでもできます。(要検証)
また、Eagle側で用意されているUIはおそらく通知とダイアログだけなので画面はすべて自前で用意する必要があります。

バックグラウンドサービス

Eagleの起動時に自動起動するプラグインがバックグラウンドサービスです。
ウィンドウプラグインからの変更点はmanifest.jsonのmainに"serviceMode": trueを追記するのみであり、自動起動の有無以外はウィンドウプラグインと同様のものになっています。

フォーマット拡張プラグイン

特定拡張子のプレビュー画面を作成できます。基本的にはウィンドウプラグインでは新規ウィンドウで描画されていたものがプレビュー画面に描画されるようになったものと考えて問題ないです。
また、フォーマット拡張とインスペクタではmainではなくpreviewを定義する必要があり、内容としては以下のようなものになっています。

{
    "preview":
    {
        "ico": { //対応したい拡張子(フォーマット拡張)
            "thumbnail": {
                "path": "thumbnail/icns.js", //サムネイル画像の解析用jsファイル
                "size": 400, //サムネイル画像のサイズ
                "allowZoom": false //拡大が可能かどうか
            },
            "viewer": {
                "path": "viewer/icns.html" //プレビュー画面に描画されるhtml
            }
        }
        "jpg": { //対応したい拡張子(インスペクタ)
            "inspector": {
                "path": "index.html",　//インスペクタに描画されるhtml
                "height": 100, //デフォルトの高さ
                "multiSelect": false //複数選択時に表示するか
            }
        }
    }
}

インスペクタプラグイン

インスペクタ領域に新しい項目を追加できます。基本的にはウィンドウプラグインでは新規ウィンドウで描画されていたものがインスペクタに描画されるようになったものと考えて問題ないです。
このプラグインで追加された要素はインスペクタのフォルダとインフォメーションの間の領域に描画されます。

参考

https://developer.eagle.cool/plugin-api/ja-jp