Plugin API
日本語
日本語
  • 入門
    • 概要
    • あなたの最初のプラグイン
    • ファイル構造概要
    • プラグインタイプ
      • ウィンドウ
      • バックグラウンドサービス
      • フォーマット拡張
      • インスペクター
    • プラグインのデバッグ
  • 配布
    • プラグインの準備
    • プラグインパッケージ
    • プラグインを公開する
    • プラグインを更新する
    • 開発者ポリシー
    • Plugin Icon Teamplate
  • 開発ガイド
    • manifest.json 設定
    • データ取得
    • データ変更
    • ローカルファイルへのアクセス
    • ネットワークリクエストの送信
    • Node.js ネイティブ API の使用
    • サードパーティモジュールの使用
    • 多言語対応(i18n)
    • フレームレスウィンドウ
  • API 参照
    • event(イベント)
    • item(項目)
    • folder(フォルダー)
    • tag(タグ)
    • tagGroup(タグ グループ)
    • library(ライブラリ)
    • window(ウィンドウ)
    • app(アプリケーション)
    • os(オペレーティングシステム)
    • screen(スクリーン)
    • notification(通知)
    • contextMenu(コンテキストメニュー)
    • dialog(ダイアログ)
    • clipboard(クリップボード)
    • drag(ドラッグファイル)
    • shell(シェル)
    • log(ログ)
  • 追加モジュール
    • FFmpeg
GitBook提供
このページ内
  1. 入門
  2. プラグインタイプ

ウィンドウ

この記事では、ウィンドウプラグインの基本的な概念について説明します。

前へプラグインタイプ次へバックグラウンドサービス

最終更新 9 か月前

ほとんどのプラグインは、この方法で開発する必要があります。これにより、ブラウザウィンドウが提供され、このウィンドウ内で目的の機能を開発できます。ユーザーがプラグインをクリックすると、このウィンドウが自動的にポップアップ表示されます。

manifest.json ファイルで main フィールドを設定して、ウィンドウ属性を設定できます。

{
    "main": {}
}

ウィンドウにデフォルトの開かれたリンク url を設定します:

{
    "main": {
        "url": "index.html"
    }
}

ウィンドウのデフォルトの幅 width および高さ height を設定します:

{
    "main": {
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}

他の metadata.json フィールドを設定した後、最終コードは以下のようになります:

{
    "id": "LBCZE8V6LPCKD",
    "version": "1.0.0",
    "name": "ウィンドウプラグイン",
    "logo": "/logo.png",
    "keywords": [],
    "main":
    {
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script type="text/javascript" src="js/plugin.js"></script>
</head>

<body>
    <div id="message"></div>
</body>
</html>
eagle.onPluginCreate((plugin) => {
    console.log('eagle.onPluginCreate');
    console.log(plugin);
    document.querySelector('#message').innerHTML = `
    <ul>
        <li>id: ${plugin.manifest.id}</li>
        <li>version: ${plugin.manifest.version}</li>
        <li>name: ${plugin.manifest.name}</li>
        <li>logo: ${plugin.manifest.logo}</li>
        <li>path: ${plugin.path}</li>
    </ul>
`;
});

eagle.onPluginShow(() => {
    console.log('eagle.onPluginShow');
});

eagle.onPluginHide(() => {
    console.log('eagle.onPluginHide');
});

eagle.onPluginBeforeExit((event) => {
    console.log('eagle.onPluginBeforeExit');
});

このサンプルコードをチェック!

インスピレーションを探していますか?私たちのサンプルコードを見に来てください。興味深いコンテンツがたくさん待っていますよ!

多言語 + 多テーマのサンプルコード

多言語国際化(i18n)を実現したい開発者にとって、このGitHubプロジェクトは最高の学習パートナーです!以下のリンクをクリックして、i18nと多テーマデザインを巧みに組み合わせる方法を探り、あなたのアプリケーションに多言語サポートの魔法を加えましょう。

注:この記事を参照して、 を確認できます。

https://github.com/eagle-app/eagle-plugin-examples/tree/main/Window
https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n+theme
manifest.jsonのすべての設定方法