拡張機能のデモを使用して、Microsoft Edge 用の拡張機能を開発する方法を学習します。
サンプルの一覧
| デモ名 | 説明 | Repo ディレクトリ | ドキュメント |
|---|---|---|---|
| 画像ビューアーのポップアップ Web ページ | JavaScript を使用しないブラウザー拡張機能。これは、Microsoft Edge タブのポップアップの小さな Web ページに stars.jpeg イメージを表示します。 |
/picture-viewer-popup-web/in microsoft / MicrosoftEdge-Extensions リポジトリ | サンプル: 画像ビューアーのポップアップ Web ページ |
| コンテンツ スクリプトを使用した画像挿入ツール | JavaScript コードを使用して、<body> 要素内の現在の Web ページの上部にstars.jpegイメージを挿入します。 |
/picture-inserter-content-script/in microsoft / MicrosoftEdge-Extensions リポジトリ | サンプル: コンテンツ スクリプトを使用した画像挿入ツール |
| Basic | 基本的な DevTools 拡張機能。 | /devtools-extension/sample 1/in MicrosoftEdge / Demos repo | 手順 1: DevTools 拡張機能の作成で DevTools Web ページを持つ基本的な Microsoft Edge拡張機能を作成し、カスタム ツール タブとパネルを追加します。 |
| Panel | パネルを備えた基本的な DevTools 拡張機能。 | /devtools-extension/sample 2/in MicrosoftEdge / Demos repo | 手順 2: DevTools 拡張機能の作成で DevTools にカスタム ツールを追加し、カスタム ツール タブとパネルを追加します。 |
| CDP | Chrome Developer Protocol (CDP) API を呼び出す基本的な DevTools 拡張機能。 | /devtools-extension/sample 3/in MicrosoftEdge / Demos repo | 手順 3: DevTools 拡張機能の作成で拡張機能 API を呼び出し、カスタム ツール タブとパネルを追加して、メモリ情報を表示します。 |
| Inspect | 検査済みページと対話する基本的な DevTools 拡張機能。 | /devtools-extension/sample 4/in MicrosoftEdge / Demos repo | 手順 4:カスタム ツール タブとパネルを追加して、「DevTools 拡張機能を作成する」の Web ページと DevTools の間で対話します。 |
関連項目
- DevTools のサンプル コードで Edge Demos リポジトリをドライブに複製します。