| title | Samples for Microsoft Edge extensions |
|---|---|
| description | Samples for Microsoft Edge extensions. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | article |
| ms.service | microsoft-edge |
| ms.subservice | extensions |
| ms.date | 07/03/2025 |
Use the extensions demos to learn how to develop extensions for Microsoft Edge.
| Demo name | Description | Source code & Readme | Docs |
|---|---|---|---|
| Picture viewer pop-up webpage | A browser extension, without JavaScript, that displays the stars.jpeg image in a small webpage in a pop-up in any Microsoft Edge tab. |
/picture-viewer-popup-webpage/ | Sample: Picture viewer pop-up webpage |
| Picture inserter using content script | Uses JavaScript code to insert the stars.jpeg image at the top of the current webpage, inside the <body> element. |
/picture-inserter-content-script/ | Sample: Picture inserter using content script |
| Demo name | Description | Source code & Readme | Docs |
|---|---|---|---|
| DevTools extension | Includes the following demos. | /devtools-extension/ | Create a DevTools extension, adding a custom tool tab and panel |
| Basic | A basic DevTools extension. | /devtools-extension/sample 1/ in MicrosoftEdge / Demos repo | Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage in Create a DevTools extension, adding a custom tool tab and panel. |
| Panel | A basic DevTools extension with a panel. | /devtools-extension/sample 2/ in MicrosoftEdge / Demos repo | Step 2: Add a custom tool in DevTools in Create a DevTools extension, adding a custom tool tab and panel. |
| CDP | A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs. | /devtools-extension/sample 3/ in MicrosoftEdge / Demos repo | Step 3: Display memory information by calling extension APIs in Create a DevTools extension, adding a custom tool tab and panel. |
| Inspect | A basic DevTools extension that interacts with the Inspected page. | /devtools-extension/sample 4/ in MicrosoftEdge / Demos repo | Step 4: Interact between the webpage and DevTools in Create a DevTools extension, adding a custom tool tab and panel. |
- Clone the Edge Demos repo to your drive in Sample code for DevTools.