拡張機能のチュートリアルを作成する(パート 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
形式を使用ICO
BMP
GIF
することもできます。 - 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.json
browser_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"
}
}
次の手順
これは、作業拡張機能を開発するために必要なすべてです。 次に、引き続き拡張機能をサイドロードしてテストします。 詳細については、「 拡張機能のサイドロード」を参照してください。