Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -567,6 +567,7 @@ See also:
<!-- ====================================================================== -->
## See also

* [Samples for Microsoft Edge extensions](../samples.md)
* [Manifest V3](https://developer.chrome.com/docs/extensions/mv3)
* [Extending DevTools](https://developer.chrome.com/docs/extensions/mv3/devtools/)
* [CDP API Reference](https://developer.chrome.com/docs/extensions/reference/)
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,8 @@ To develop your own Microsoft Edge extension, you can copy and modify the sample

* [Sample: Picture viewer pop-up webpage](./picture-viewer-popup-webpage.md)
* [Sideload an extension to install and test it locally](extension-sideloading.md)
* [Samples for Microsoft Edge extensions](../samples.md)

GitHub:
* [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo.
* [/picture-inserter-content-script/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/picture-inserter-content-script) - source code of this sample.
* [/picture-inserter-content-script/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-inserter-content-script) - source code of this sample.
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,8 @@ After running and testing this extension sample, you can continue on to [Sample:

* [Sideload an extension to install and test it locally](./extension-sideloading.md)
* [Sample: Picture inserter using content script](./picture-inserter-content-script.md)
* [Samples for Microsoft Edge extensions](../samples.md)

GitHub:
* [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo.
* [/picture-viewer-popup-webpage/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/picture-viewer-popup-webpage) - source code of this sample.
* [/picture-viewer-popup-webpage/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-viewer-popup-webpage) - source code of this sample.
28 changes: 14 additions & 14 deletions microsoft-edge/extensions/samples.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,30 @@ ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
ms.date: 01/27/2023
ms.date: 07/03/2025
---
# Samples for Microsoft Edge extensions

Use the extensions demos in the [Demos](https://github.com/MicrosoftEdge/Demos#readme) repo to learn how to develop extensions for Microsoft Edge.
Use the extensions demos to learn how to develop extensions for Microsoft Edge.


<!-- ====================================================================== -->
## List of samples

<!--
sync'd with table in https://github.com/MicrosoftEdge/Demos#extensions

in https://github.com/MicrosoftEdge/Demos, keep prefix https://learn.microsoft.com
in https://github.com/MicrosoftDocs/edge-developer repo, remove prefix https://learn.microsoft.com
sync:
https://learn.microsoft.com/microsoft-edge/extensions/samples#list-of-samples
https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/README.md#code
https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-extensions
-->

| Demo name | Description | Repo directory | Live demo page |
|:---|:---|:---|:---|
| Learn to build a Microsoft Edge extension that extends DevTools. | Used for [Create a DevTools extension, adding a custom tool tab and panel](./developer-guide/devtools-extension.md). | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a |
| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) | n/a |
| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) | n/a |
| CDP | A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs. | [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) | n/a |
| Inspect | A basic DevTools extension that interacts with the Inspected page. | [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) | n/a |
| Demo name | Description | Repo directory | 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/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-viewer-popup-webpage) in **microsoft / MicrosoftEdge-Extensions** repo | [Sample: Picture viewer pop-up webpage](./getting-started/picture-viewer-popup-webpage.md) |
| 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/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension-samples/picture-inserter-content-script) in **microsoft / MicrosoftEdge-Extensions** repo | [Sample: Picture inserter using content script](./getting-started/picture-inserter-content-script.md) |
| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) in **MicrosoftEdge / Demos** repo | [Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage](./developer-guide/devtools-extension.md#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/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) in **MicrosoftEdge / Demos** repo | [Step 2: Add a custom tool in DevTools](./developer-guide/devtools-extension.md#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/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) in **MicrosoftEdge / Demos** repo | [Step 3: Display memory information by calling extension APIs](./developer-guide/devtools-extension.md#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/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) in **MicrosoftEdge / Demos** repo | [Step 4: Interact between the webpage and DevTools](./developer-guide/devtools-extension.md#step-4-interact-between-the-webpage-and-devtools) in _Create a DevTools extension, adding a custom tool tab and panel_. |


<!-- ====================================================================== -->
Expand Down
109 changes: 25 additions & 84 deletions microsoft-edge/webview2/concepts/overview-features-apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ when adding an h4 heading, add nav link below the h2
* [Rendering WebView2 using Composition](#rendering-webview2-using-composition)
* [Connecting to the visual tree](#connecting-to-the-visual-tree)
* [Forwarding input](#forwarding-input)
* [Allow input event messages to pass through the browser window](#allow-input-event-messages-to-pass-through-the-browser-window)
* [Drag and drop](#drag-and-drop)
* [Accessibility](#accessibility)
* [Environment options](#environment-options)
Expand Down Expand Up @@ -170,13 +171,6 @@ See also:

The Microsoft Edge WebView2 control lets you embed web content into native applications. You can communicate between native code and web code using simple messages, JavaScript code, and native objects. The following are the main APIs for communicating between web and native code.

**Subsections below:**
* [Host/web object sharing](#hostweb-object-sharing)
* [Script execution](#script-execution)
* [Web messaging](#web-messaging)
* [Script dialogs](#script-dialogs)
* [Shared buffer](#shared-buffer)

Common use cases for web/native interop:
* Update the native host window title after navigating to a different website.
* Send a native camera object and use its methods from a web app.
Expand Down Expand Up @@ -546,38 +540,6 @@ See also:

The WebView2 control gives your app access to many browser features. You can modify these browser features and turn them on or off.

**Subsections below:**
* [Printing](#printing)
* [Cookies](#cookies)
* [Image capture](#image-capture)
* [Control whether the screen capture UI is shown](#control-whether-the-screen-capture-ui-is-shown)
* [Downloads](#downloads)
* [Save as](#save-as)
* [Web notification handling](#web-notification-handling)
* [Permissions](#permissions)
* [Context menus](#context-menus)
* [Status bar](#status-bar)
* [Fluent overlay scrollbars](#fluent-overlay-scrollbars)
* [User Agent](#user-agent)
* [Autofill](#autofill)
* [Audio](#audio)
* [Hit-testing of mouse-clicks in regions](#hit-testing-of-mouse-clicks-in-regions)
* [Swipe gesture navigation](#swipe-gesture-navigation)
* [Enable or disable the browser responding to accelerator keys (shortcut keys)](#enable-or-disable-the-browser-responding-to-accelerator-keys-shortcut-keys)
* [Fullscreen](#fullscreen)
* [PDF toolbar](#pdf-toolbar)
* [Theming](#theming)
* [Language](#language)
* [New window](#new-window)
* [Close window](#close-window)
* [Document title](#document-title)
* [Favicon](#favicon)
* [Security and privacy](#security-and-privacy)
* [Tracking prevention](#tracking-prevention)
* [SmartScreen](#smartscreen)
* [Custom crash reporting](#custom-crash-reporting)
* [Browser extensions](#browser-extensions)


<!-- ------------------------------ -->
#### Printing
Expand Down Expand Up @@ -1963,9 +1925,6 @@ See also:

Get information about running WebView2 processes, exiting processes, and failed processes, so that your app can take action accordingly.

**Subsections below:**
* [Frame process info](#frame-process-info)

##### [.NET/C#](#tab/dotnetcsharp)

* `CoreWebView2` Class:
Expand Down Expand Up @@ -2104,18 +2063,6 @@ The Frame Process Info API, including `GetProcessExtendedInfos`, provides a snap

Through the WebView2 control, your app can manage navigation to webpages and manage content that's loaded in the webpages.

**Subsections below:**
* [Manage content loaded into WebView2](#manage-content-loaded-into-webview2)
* [Navigation history](#navigation-history)
* [Navigation kind](#navigation-kind)
* [Block unwanted navigating](#block-unwanted-navigating)
* [Navigation events](#navigation-events)
* [Manage network requests in WebView2](#manage-network-requests-in-webview2)
* [Custom scheme registration](#custom-scheme-registration)
* [Client certificates](#client-certificates)
* [Server certificates](#server-certificates)
* [Launch an external URI scheme](#launch-an-external-uri-scheme)


<!-- ------------------------------ -->
#### Manage content loaded into WebView2
Expand Down Expand Up @@ -2671,17 +2618,6 @@ Use these APIs to set up the WebView2 rendering system if your host app doesn't

* **No UI framework, and using Composition** - If your app UI is built using [DirectComposition](/windows/win32/directcomp/directcomposition-portal) or [Windows.UI.Composition](/uwp/api/Windows.UI.Composition), you should use `CoreWebView2CompositionController` rather than using these APIs; see [Rendering WebView2 using Composition](#rendering-webview2-using-composition), below.


**Subsections below:**
* [Sizing, positioning, and visibility](#sizing-positioning-and-visibility)
* [Zooming](#zooming)
* [Rasterization scale](#rasterization-scale)
* [Focus and tabbing](#focus-and-tabbing)
* [Parent window](#parent-window)
* [Keyboard accelerators](#keyboard-accelerators)
* [Default background color](#default-background-color)


##### [.NET/C#](#tab/dotnetcsharp)

* `CoreWebView2Controller` Class:
Expand Down Expand Up @@ -2962,13 +2898,6 @@ See also:

For composition-based WebView2 rendering, use `CoreWebView2Environment` to create a `CoreWebView2CompositionController`. `CoreWebView2CompositionController` provides the same APIs as `CoreWebView2Controller`, but also includes APIs for composition-based rendering.

**Subsections below:**
* [Connecting to the visual tree](#connecting-to-the-visual-tree)
* [Forwarding input](#forwarding-input)
* [Drag and drop](#drag-and-drop)
* [Accessibility](#accessibility)


##### [.NET/C#](#tab/dotnetcsharp)

* [CoreWebView2CompositionController Class](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller)
Expand Down Expand Up @@ -3066,6 +2995,30 @@ https://learn.microsoft.com/microsoft-edge/webview2/reference/winrt/microsoft_we
---


<!-- ------------------------------ -->
#### Allow input event messages to pass through the browser window

Allows user input event messages (keyboard, mouse, touch, or pen) to pass through the browser window, to be received by an app process window.

##### [.NET/C#](#tab/dotnetcsharp)

* `CoreWebView2ControllerOptions` Class:
* [CoreWebView2ControllerOptions.AllowHostInputProcessing Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controlleroptions.allowhostinputprocessing)

##### [WinRT/C#](#tab/winrtcsharp)

* `CoreWebView2ControllerOptions` Class:
* [CoreWebView2ControllerOptions.AllowHostInputProcessing Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controlleroptions)

##### [Win32/C++](#tab/win32cpp)

* [ICoreWebView2ControllerOptions4](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions4)
* [ICoreWebView2ControllerOptions4::get_AllowHostInputProcessing](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions4#get_allowhostinputprocessing)
* [ICoreWebView2ControllerOptions4::put_AllowHostInputProcessing](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions4#put_allowhostinputprocessing)

---


<!-- ------------------------------ -->
#### Drag and drop

Expand Down Expand Up @@ -3125,20 +3078,12 @@ Not applicable.
<!-- ====================================================================== -->
## Environment options

**Subsections below:**
* [User data](#user-data)
* [Runtime selection](#runtime-selection)


<!-- ------------------------------ -->
#### User data

Manage the user data folder (UDF), which is a folder on the user's machine. The UDF contains data related to the host app and WebView2. WebView2 apps use user data folders to store browser data, such as cookies, permissions, and cached resources.

**Subsections below:**
* [Multiple profiles](#multiple-profiles)
* [Delete a profile](#delete-a-profile)

See also:
* [Manage user data folders](./user-data-folder.md)
* [Clear browsing data from the user data folder](./clear-browsing-data.md)
Expand Down Expand Up @@ -3374,10 +3319,6 @@ See also:

Analyze and debug performance, handle performance-related events, and manage memory usage to increase the responsiveness of your app.

**Subsections below:**
* [Memory usage target](#memory-usage-target)


##### [.NET/C#](#tab/dotnetcsharp)

* `CoreWebView2` Class:
Expand Down
Loading