拡張機能のチュートリアルを作成する(パート 1)

このチュートリアルの目的は、空のディレクトリから始まる Microsoft Edge 拡張機能を構築することです。 あなたは、その日のNASAの写真をポップアップ拡張機能を構築しています。 このチュートリアルでは、次の方法で拡張機能を作成する方法について説明します。

  • ファイルの manifest.json 作成。
  • アイコンの追加。
  • 既定のポップアップ ダイアログを開きます。

開始する前に

このチュートリアルでビルドしている完成した拡張機能をテストするには、 MicrosoftEdge-Extensions リポジトリ > extension-getting-started-part1 からソース コードをダウンロードします。 ソース コードがマニフェスト V2 からマニフェスト V3 に更新されました。

手順 1: manifest.json ファイルを作成する

すべての拡張パッケージには、ルートに manifest.json ファイルが必要です。 マニフェストは、拡張機能、拡張機能パッケージのバージョン、拡張機能の名前と説明などの詳細を提供します。

次のコードは、ファイルに必要な基本情報の概要を manifest.json 示しています。

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day."
}

手順 2: アイコンを追加する

まず、プロジェクトに icons ディレクトリを作成して、アイコン イメージ ファイルを格納します。 アイコンは、ユーザーが拡張機能を起動するために選択したボタンの背景画像に使用されます。

ツール バーのアイコンで拡張機能を開く

アイコンの場合:

  • 形式を使用PNGすることをお勧めしますが、またはJPEG形式を使用 ICOBMPGIFすることもできます。
  • 128 x 128 ピクセルの画像を使用することをお勧めします。これは、必要に応じてブラウザーによってサイズ変更されます。

プロジェクトのディレクトリは、次の構造のようになります。

└── part1
    ├── manifest.json
    └── icons
        ├── nasapod16x16.png
        ├── nasapod32x32.png
        ├── nasapod48x48.png
        └── nasapod128x128.png

次に、ファイルにアイコンを manifest.json 追加します。 次のコードと一致するように、アイコン情報を使用してファイルを更新します manifest.json 。 次のコードに記載されているファイルは png 、この記事で前述したダウンロード ファイルで入手できます。

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    }
}

手順 3: 既定のポップアップ ダイアログを開く

次に、ユーザーが拡張機能を HTML 起動したときに実行するファイルを作成します。 という名前 popup.html の HTML ファイルを という名前 popupのディレクトリに作成します。 ユーザーがアイコンを選択して拡張機能を起動すると、 popup/popup.html モーダル ダイアログとして表示されます。

次の一覧のコードを に popup.html 追加して、星の画像を表示します。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>NASA picture of the day</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Display the stars image" />
        </div>
    </body>
</html>

イメージ ファイル images/stars.jpeg を images フォルダーに追加していることを確認します。 プロジェクトのディレクトリは、次の構造のようになります。

└── part1
    ├── manifest.json
    ├── icons
    │   ├── nasapod16x16.png
    │   ├── nasapod32x32.png
    │   ├── nasapod48x48.png
    │   └── nasapod128x128.png
    ├── images
    │   └── stars.jpeg
    └── popup
        └── popup.html

最後に、次のコードに manifest.jsonbrowser_action 示すように、(マニフェスト V2 の) または (マニフェスト V3 の) の下 action にポップアップを登録します。

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}

次の手順

これは、作業拡張機能を開発するために必要なすべてです。 次に、引き続き拡張機能をサイドロードしてテストします。 詳細については、「 拡張機能のサイドロード」を参照してください。