次の方法で共有

チュートリアル パート 1: ポップアップに画像を表示する

  • [アーティクル]

パート 1 のサンプル: ポップアップに画像を表示する方法は、JavaScript を使用しない単純な静的拡張機能で、Microsoft Edge タブのポップアップの小さな Web ページに画像を表示stars.jpegします。

実行されている単純な拡張機能

この種類の拡張機能を作成するには、次の手順を実行します。

  1. manifest.json ファイルを作成します。
  2. 拡張機能を起動するためのアイコンを追加します。
  3. 既定のポップアップ ダイアログを開きます。

途中で、拡張機能をインストール (または更新) してテストします。

完了した拡張機能をすぐにインストールして実行する場合、または完成したコードを表示する場合は、次のいずれかを実行します。

  • MicrosoftEdge-Extensions リポジトリをローカル ドライブに複製します。 ディレクトリ を使用します /extension-getting-started-part1/。
  • MicrosoftEdge-Extensions リポジトリの /part1/ フォルダーからソース コードをダウンロードします。

その後、リポジトリにある完成した拡張機能をインストールして実行できます。 サイドロードによって拡張機能をインストールし、ローカルでテストできます。

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

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

この記事のすべてのコーディング手順は、 MicrosoftEdge-Extensions リポジトリのパート 1 デモで既に行われています。 まずリポジトリを複製し、パート 1 デモをインストールして実行してから、空のディレクトリから始めてから手動でディレクトリを作成し、ファイルを作成し、コードをファイルに貼り付ける前に実行することをお勧めします。

この手順は、MicrosoftEdge-Extensions リポジトリの manifest.json で既に行われています。 空のディレクトリから始めてパート 1 拡張機能を手動で作成する場合:

  • コンピューター上のディレクトリで、Visual Studio Code などのエディターを使用して、次の行を含むファイルを作成 manifest.json します。

    {
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
}

手順 2: 拡張機能を起動するためのアイコンを追加する

この手順は、 MicrosoftEdge-Extensions リポジトリのパート 1 デモで既に行われています。 パート 1 拡張機能を手動で作成する場合は、次の手順に進みます。

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

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

    アイコンの場合:

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

  2. プロジェクトのディレクトリが次の構造に似ているかどうかを確認します。

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

  3. リポジトリからファイルを .png 取得します。

    • nasapod16x16.png
    • nasapod32x32.png
    • nasapod48x48.png
    • nasapod128x128.png

    たとえば、MicrosoftEdge-Extensions リポジトリの /icons/ フォルダーからファイルを個別にダウンロードし、ディレクトリに /icons/ 配置します。

  4. ファイル内のアイコンを manifest.json 次のように一覧表示します。

    {
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    }
}

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

この手順は、MicrosoftEdge-Extensions リポジトリの popup.html で既に行われています。 パート 1 拡張機能を手動で作成する場合は、次の手順に進みます。

ユーザーが拡張機能を HTML 起動したときに実行するファイルを作成します。 ユーザーがアイコンをクリックして拡張機能を起動すると、このファイルがモーダル ダイアログとして表示されます。

  1. という名前 popup.html の HTML ファイルを という名前 popupのディレクトリに作成します。

  2. 星の画像を表示するには、 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="Stars" />
        </div>
    </body>
</html>

  3. フォルダーにファイル stars.jpeg を images 追加します。 たとえば、MicrosoftEdge-Extensions リポジトリから stars.jpeg をダウンロードします。

  4. プロジェクトのディレクトリが次の構造に似ているかどうかを確認します。

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

  5. でポップアップmanifest.jsonactionを登録します。次のようにします。

    {
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}

これは、単純な拡張機能を開発するために必要なすべてです。

手順 4: 拡張機能をインストールしてテストする

拡張機能をインストールして実行します。 「拡張機能をサイドロードしてローカルにインストールしてテストする」を参照してください。 拡張機能には、 popup.htmlを含む stars.jpegがポップアップに表示されます。

実行されている単純な拡張機能

このパート 1 デモ拡張機能は、空のタブや [拡張機能の管理] タブなど、任意のタブで開くことができます。

拡張機能を実行してテストした後は、「 チュートリアル パート 2: JavaScript を使用して Web ページに画像を挿入する」に進むことができます。

関連項目

GitHub: