次の方法で共有

サンプル: 画像ビューアーのポップアップ Web ページ

  • [アーティクル]

このサンプルは、JavaScript を使用しないブラウザー拡張機能で、Microsoft Edge タブのポップアップにある小さな Web ページに stars.jpeg 画像を表示します。

実行中の

MicrosoftEdge-Extensions リポジトリを複製する

さまざまなツールを使用して、GitHub リポジトリを複製できます。 選択したディレクトリをダウンロードするか、リポジトリ全体を複製できます。

次のように、 MicrosoftEdge-Extensions リポジトリをローカル ドライブに複製し、作業ブランチに切り替えます。

  1. コマンド プロンプトで、「git」と入力して、git がインストールされているかどうかをチェックします。

  2. まだ完了していない場合は、 git をダウンロード してインストールします。

  3. まだ完了していない場合は、git がインストールされているコマンド プロンプトを起動します。

  4. MicrosoftEdge-Extensions リポジトリを複製するディレクトリに移動します。 以下に例を示します。

    cd C:/Users/localAccount/GitHub/

  5. Microsoft Edge で、 MicrosoftEdge-Extensions リポジトリに移動します。

  6. 緑色の [コード] ボタンの右側にある下矢印をクリックし、[Web URL を使用して複製する] セクションで、https://github.com/microsoft/MicrosoftEdge-Extensions.gitの横にある [クリップボードに URL をコピー] ボタンをクリックします。

  7. コマンド プロンプト ウィンドウで、次のコマンドを入力します。

    git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git

    /MicrosoftEdge-Extensions/ ディレクトリは、指定したディレクトリ内に追加されます。

作業ブランチを作成してそれに切り替える

  1. ディレクトリの一覧を確認します。

    ls

    /MicrosoftEdge-Extensions/ ディレクトリが一覧表示されます。

  2. 新しいディレクトリに切り替えます。

    cd MicrosoftEdge-Extensions

  3. 作業ブランチを作成します。

    git branch test

  4. 作業ブランチに切り替えます。

    git switch test

    収益： Switched to branch 'test'

リポジトリの "メイン" ブランチにあるコードを変更することなく、作業ブランチのコードを自由に変更できるようになりました。 後で、"メイン" ブランチに戻すか、"メイン" ブランチに基づいて別のブランチを作成することもできます。

サンプルをローカルにインストールする

ストアからサンプルをインストールする代わりに、サンプルをローカルにインストールして、変更して変更をすばやくテストできるようにします。 ローカルへのインストールは、拡張機能の サイドローディング と呼ばれることもあります。

  1. Microsoft Edge で、このアイコンが表示されている場合は、アドレス バーの横にある [ 拡張機能 ] (拡張機能アイコン) ボタンをクリックします。 または、[ 設定など] ([設定など] アイコン) >Extensions を選択します。 [拡張機能] ポップアップが開きます。

    拡張機能がインストールされていない場合の [拡張機能] ポップアップ

  2. [ 拡張機能の管理] をクリックします。 [ 拡張機能 の管理] ページが新しいタブで開きます。

    開発者モードを有効にする

  3. [開発者モード] トグルをオンにします。

  4. 拡張機能を初めてインストールするときは、[ 開梱された読み込み ] ([開梱された読み込み] アイコン) ボタンをクリックします。 [ 拡張機能ディレクトリの選択 ] ダイアログが開きます。

  5. manifest.jsonなど、拡張機能のソース ファイルを含むディレクトリを選択します。

    パスの例:

    C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

  6. [ フォルダーの選択 ] ボタンをクリックします。

    [ 拡張機能ディレクトリの選択 ] ダイアログが閉じます。

    拡張機能は、ストアからインストールされている拡張機能と同様に、ブラウザーにインストールされます。

    サイドロードされた拡張機能が表示されている [インストールされている拡張機能] ページ

サンプルを実行する

  1. 新しいウィンドウまたはタブで、 TODO アプリなどの Web ページに移動します。このサンプルでは、この手順は省略可能であり、スクリーンショットと一致するだけです。このサンプルでは、Web ページを開く必要はありません。

  2. Web ページを更新します。 これは、拡張機能を再読み込みした後に必要な場合があります。

  3. アドレス バーの右側にある Microsoft Edge で、このアイコンが表示されている場合は、 拡張機能 (拡張機能アイコン) ボタンをクリックします。 または、[ 設定など] ([設定など] アイコン) >Extensions を選択します。

    [拡張機能] ポップアップが開きます。

    [拡張機能] ポップアップ

  4. 拡張機能のアイコンまたは名前 (画像ビューアーのポップアップ Web ページ) をクリックします。

    拡張機能が開き、アドレス バーと 拡張機能 (拡張機能 アイコン) アイコンの横に拡張機能のアイコンが追加されます。 拡張機能は、stars.jpegを含むpopup.htmlをポップアップに表示します。

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

  5. アドレス バーの横にある拡張機能のボタンをクリックします。 ポップアップ ウィンドウが閉じます。

関連項目:

サンプルを調査する

次のセクションでは、サンプルを調査します。 その後、独自の Microsoft Edge 拡張機能を開発するために、サンプルのディレクトリをコピーして変更し、結果の拡張機能をインストールしてテストできます。

ファイルとディレクトリ

このサンプルには、次のディレクトリ構造があります。

サンプルのパスの例:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

/picture-viewer-popup-webpage/ ディレクトリ内のディレクトリとファイル:

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json
  • /icons/ ディレクトリには、ブラウザーのアドレス バーの近くの拡張子を表すために使用される.png ファイルのバージョンが含まれています。
  • /images/ ディレクトリには、拡張機能のポップアップに表示されるstars.jpegが含まれています。
  • /popup/ ディレクトリには、拡張機能のポップアップに表示される Web ページコンテンツを定義するpopup.htmlが含まれています。
  • manifest.json には、拡張機能に関する基本情報が含まれています。

マニフェスト ファイル (manifest.json)

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

manifest.json には、次の行が含まれています。

{
  "name": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up webpage.",
  "icons": {
      "16": "icons/extension-icon16x16.png",
      "32": "icons/extension-icon32x32.png",
      "48": "icons/extension-icon48x48.png",
      "128": "icons/extension-icon128x128.png"
  },
  "action": {
      "default_popup": "popup/popup.html"
  }
}

拡張機能を起動するためのアイコン

/icons/ ディレクトリには、アイコン イメージ ファイルが含まれています。 アイコンは、拡張機能を起動するためにクリックしたボタンの背景画像として使用されます。

[拡張機能] ポップアップ リストの拡張機能のアイコン

拡張機能を実行すると、ツール バーの [アドレス] バーの横にいずれかのアイコンが表示されます。

ツール バーのアイコン

拡張機能を閉じるには、ツール バーの拡張機能のアイコンをクリックするか、[ 拡張機能 ] (拡張機能アイコン) ボタンをクリックします。

アイコンの推奨事項:

  • PNG形式を使用しますが、BMP、GIF、ICO、またはJPEG形式を使用することもできます。
  • 1 つのアイコン ファイルを指定する場合は、128 x 128 px を使用します。これは、必要に応じてブラウザーでサイズを変更できます。

ポップアップ ダイアログ (popup.html)

popup.html 拡張機能を起動すると、 /popup/ ディレクトリで が実行されます。 アイコンをクリックして拡張機能を起動すると、このファイルがモーダル ダイアログとして表示されます。

popup.html には、タイトルと星の画像を表示する次のコードが含まれています。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Picture viewer pop-up webpage</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Stars" />
        </div>
    </body>
</html>

ポップアップ Web ページ (popup.html) は、manifest.jsonの [action キー] セクションの"default_popup"として登録されます。

manifest.json (部分)

{
    "action": {
        "default_popup": "popup/popup.html"
    }
}

次の手順

独自の Microsoft Edge 拡張機能を開発するには、サンプルのディレクトリをコピーして変更し、結果の拡張機能をインストールしてテストします。

この拡張機能のサンプルを実行してテストした後は、 コンテンツ スクリプトを使用して Sample: Picture inserter に進み、ブラウザー タブでコンテンツとして実行されている JavaScript を動的に挿入できます。

関連項目

GitHub: