拡張機能のチュートリアルを作成する(パート 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形式を使用することをお勧めしますが、BMP、GIF、ICO、またはJPEG形式を使用することもできます。 - 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 という名前のディレクトリに popup.html という名前の HTML ファイルを作成します。 ユーザーがアイコンを選択して拡張機能を起動すると、 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) またはaction (マニフェスト V3) の下にポップアップを登録します。
{
"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"
}
}
次の手順
これは、作業拡張機能を開発するために必要なすべてです。 次に、引き続き拡張機能をサイドロードしてテストします。 詳細については、「 拡張機能のサイドロード」を参照してください。