diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension.md b/microsoft-edge/extensions/developer-guide/devtools-extension.md index 4eca4e8367..755c6cf6bf 100644 --- a/microsoft-edge/extensions/developer-guide/devtools-extension.md +++ b/microsoft-edge/extensions/developer-guide/devtools-extension.md @@ -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/) diff --git a/microsoft-edge/extensions/getting-started/picture-inserter-content-script.md b/microsoft-edge/extensions/getting-started/picture-inserter-content-script.md index 230d63cecf..8d37541d09 100644 --- a/microsoft-edge/extensions/getting-started/picture-inserter-content-script.md +++ b/microsoft-edge/extensions/getting-started/picture-inserter-content-script.md @@ -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. diff --git a/microsoft-edge/extensions/getting-started/picture-viewer-popup-webpage.md b/microsoft-edge/extensions/getting-started/picture-viewer-popup-webpage.md index ab8322c1a6..de3a623e2a 100644 --- a/microsoft-edge/extensions/getting-started/picture-viewer-popup-webpage.md +++ b/microsoft-edge/extensions/getting-started/picture-viewer-popup-webpage.md @@ -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. diff --git a/microsoft-edge/extensions/samples.md b/microsoft-edge/extensions/samples.md index 73379da526..cf6afb971e 100644 --- a/microsoft-edge/extensions/samples.md +++ b/microsoft-edge/extensions/samples.md @@ -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 - -| 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 `` 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_. | diff --git a/microsoft-edge/webview2/concepts/overview-features-apis.md b/microsoft-edge/webview2/concepts/overview-features-apis.md index 65a8c2712f..0d3a91180c 100644 --- a/microsoft-edge/webview2/concepts/overview-features-apis.md +++ b/microsoft-edge/webview2/concepts/overview-features-apis.md @@ -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) @@ -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. @@ -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 @@ -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: @@ -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 @@ -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: @@ -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) @@ -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 @@ -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) @@ -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: