diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 277a4623c6..60c962201a 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -4,6 +4,6 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope Resources: -* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct) -* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq) -* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns +* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct) +* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq) +* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index af29e0a26f..8240df888a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -124,6 +124,6 @@ Be sure to include the topic title and the URL for the page. ## See also -* [Getting started with writing and formatting on GitHub](https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github) -* [Docs Contributor Guide](https://learn.microsoft.com/contribute/) -* [README](README.md) +* [Getting started with writing and formatting on GitHub](https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github) +* [Docs Contributor Guide](https://learn.microsoft.com/contribute/) +* [README](README.md) diff --git a/README.md b/README.md index b5b3ee9310..260b01118a 100644 --- a/README.md +++ b/README.md @@ -31,11 +31,11 @@ For the latest implementation status and future plans for web platform features ### File names and directories -* When adding a webpage (an article implemented as a .md file), you must add an entry for the new webpage in [toc.yml](microsoft-edge/toc.yml), for the article to appear in the Table of Contents. +* When adding a webpage (an article implemented as a .md file), you must add an entry for the new webpage in [toc.yml](microsoft-edge/toc.yml), for the article to appear in the Table of Contents. -* A directory can contain more directories or `readme.md` files. +* A directory can contain more directories or `readme.md` files. -* Folder/directory names are dash-separated (for example, `f12-tools`) and lowercase. Directories are used in URLs on the `learn.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase. +* Folder/directory names are dash-separated (for example, `f12-tools`) and lowercase. Directories are used in URLs on the `learn.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase. diff --git a/microsoft-edge/accessibility/build/index.md b/microsoft-edge/accessibility/build/index.md index 27689bf830..f2c13645de 100644 --- a/microsoft-edge/accessibility/build/index.md +++ b/microsoft-edge/accessibility/build/index.md @@ -24,8 +24,8 @@ Visit [HTML5Accessibility](https://html5accessibility.com) for information on wh Assistive technologies add capabilities that computers don't usually have. For example, a user who has low vision might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen. For applications on Microsoft platforms and on the web, the assistive technology interacts with any combination of: -* Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise). -* An application-specific object model such as the Document Object Model (DOM) in Microsoft Edge. +* Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise). +* An application-specific object model such as the Document Object Model (DOM) in Microsoft Edge. For web developers, certain HTML elements are mapped to UI Automation objects, so in selecting those HTML elements, the developer can use the accessibility properties and events built in to those elements. While developing your website, you usually only need to make sure that the API is correctly written to, or that the appropriate element is specified, for the application to be accessible. @@ -77,8 +77,8 @@ Verifying that the website you are building works with real assistive technologi Once you are confident that your website works well with a keyboard, try it with other assistive technologies, such as screen readers. This testing can uncover issues in the following: -* Your HTML, ARIA, and CSS. -* The level of support of an assistive technology for a feature or technique. +* Your HTML, ARIA, and CSS. +* The level of support of an assistive technology for a feature or technique. Different browsers might map elements to the platform accessibility APIs differently than Microsoft Edge maps them. While building your interface, it's important to consider each difference. @@ -116,7 +116,7 @@ Under macOS, if you want to test with an assistive technology only available for If an assistive technology isn't available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing. -* [Assistiv Labs](https://assistivlabs.com) (a commercial product) enables you to manually test with assistive technologies through any modern web browser. Select an assistive technology and browser and it connects you with a virtual machine, emulator, or real device that you can interact with. +* [Assistiv Labs](https://assistivlabs.com) (a commercial product) enables you to manually test with assistive technologies through any modern web browser. Select an assistive technology and browser and it connects you with a virtual machine, emulator, or real device that you can interact with. See also [Cloud-based emulators and simulators](../../devtools/device-mode/testing-other-browsers.md#cloud-based-emulators-and-simulators). diff --git a/microsoft-edge/accessibility/design.md b/microsoft-edge/accessibility/design.md index 384684f920..a374e04733 100644 --- a/microsoft-edge/accessibility/design.md +++ b/microsoft-edge/accessibility/design.md @@ -30,13 +30,13 @@ Users who are blind or who have low vision rely on screen readers to interpret a Many accessibility users rely on the keyboard to navigate and operate the UI by: -* Moving focus among elements by pressing the **Tab** key or **Shift+Tab** keys. +* Moving focus among elements by pressing the **Tab** key or **Shift+Tab** keys. -* Navigating in container elements such as lists, grids, and tree views by using the arrow keys. +* Navigating in container elements such as lists, grids, and tree views by using the arrow keys. -* Invoking actions by pressing the **Enter** key or **Spacebar**. +* Invoking actions by pressing the **Enter** key or **Spacebar**. -* Using shortcut keys to efficiently access other app functionality. +* Using shortcut keys to efficiently access other app functionality. @@ -50,10 +50,10 @@ Many common accessibility issues on the web can be solved through good coding pr ## Resources -* [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) - Designing for Inclusion by the W3C Web Accessibility Initiative provides resources to help you better understand users with disabilities and how to design your website with them in mind. +* [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) - Designing for Inclusion by the W3C Web Accessibility Initiative provides resources to help you better understand users with disabilities and how to design your website with them in mind. -* [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) - Designing inclusive software discusses Microsoft design principles and practices for the Universal Windows Platform (UWP). +* [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) - Designing inclusive software discusses Microsoft design principles and practices for the Universal Windows Platform (UWP). -* [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) - This resource by the W3C introduces how people with disabilities, including people with age-related impairments, use the Web. +* [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) - This resource by the W3C introduces how people with disabilities, including people with age-related impairments, use the Web. -* [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) - Microsoft developed the Inclusive Design Toolkit to show how human diversity can create better design constraints and how to connect seemingly niche solutions to broader markets. +* [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) - Microsoft developed the Inclusive Design Toolkit to show how human diversity can create better design constraints and how to connect seemingly niche solutions to broader markets. diff --git a/microsoft-edge/accessibility/index.md b/microsoft-edge/accessibility/index.md index f7ba0b4a46..7688e455d2 100644 --- a/microsoft-edge/accessibility/index.md +++ b/microsoft-edge/accessibility/index.md @@ -26,11 +26,11 @@ The articles in this Accessibility section present some best practices, code sam Microsoft Edge DevTools is built into the Microsoft Edge browser, and includes many accessibility-testing features, to test aspects of webpages including: -* Alt-text for images, and screen reader support. -* Keyboard support. -* Text contrast. -* Usability with vision deficiencies. -* Usability when the browser is narrow. +* Alt-text for images, and screen reader support. +* Keyboard support. +* Text contrast. +* Usability with vision deficiencies. +* Usability when the browser is narrow. See: diff --git a/microsoft-edge/accessibility/test.md b/microsoft-edge/accessibility/test.md index 0b8c210e9e..3ab34cb2e1 100644 --- a/microsoft-edge/accessibility/test.md +++ b/microsoft-edge/accessibility/test.md @@ -58,20 +58,20 @@ You can also use the assessment feature of [Accessibility Insights](https://acce ## External articles and websites -* [Assistive technology compatibility tests](http://www.powermapper.com/tests) - Test results showing how different content types and standards behave in assistive technologies (AT) such as screen readers. +* [Assistive technology compatibility tests](http://www.powermapper.com/tests) - Test results showing how different content types and standards behave in assistive technologies (AT) such as screen readers. -* [HTML5Accessibility](https://html5accessibility.com) - This site tests which new HTML5 features are accessibly supported by major browsers. +* [HTML5Accessibility](https://html5accessibility.com) - This site tests which new HTML5 features are accessibly supported by major browsers. -* [webhint](https://webhint.io) - Use webhint to check for out-of-date libraries, security improvements, performance problems, and accessibility issues. +* [webhint](https://webhint.io) - Use webhint to check for out-of-date libraries, security improvements, performance problems, and accessibility issues. -* [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) - A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. +* [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) - A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. ## The Web Accessibility Initiative (WAI) -* [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility. +* [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility. -* [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a webpage. +* [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a webpage. -* [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) - A quick reference to Web Content Accessibility Guidelines (WCAG), requirements, success criteria, and techniques. +* [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) - A quick reference to Web Content Accessibility Guidelines (WCAG), requirements, success criteria, and techniques. diff --git a/microsoft-edge/develop-web-microsoft-edge.md b/microsoft-edge/develop-web-microsoft-edge.md index 81a818f0e4..a1bb7fea9c 100644 --- a/microsoft-edge/develop-web-microsoft-edge.md +++ b/microsoft-edge/develop-web-microsoft-edge.md @@ -46,15 +46,15 @@ The Microsoft Edge browser comes with built-in web development tools, called Mic With DevTools, you can do the following: -* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats. +* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats. -* Emulate how your webpage behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems. +* Emulate how your webpage behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems. -* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps. +* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps. -* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found. +* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found. -* Use a development environment to sync changes in DevTools with the file system and from the web. +* Use a development environment to sync changes in DevTools with the file system and from the web. @@ -70,9 +70,9 @@ You can create a Microsoft Edge extension if you have an idea or product that is A Microsoft Edge extension is structured similarly to a regular web app, and usually includes: -* An app manifest JSON file that contains basic platform information. -* A JavaScript file that defines the behavior of the browser extension. -* HTML and CSS files that define the user interface. +* An app manifest JSON file that contains basic platform information. +* A JavaScript file that defines the behavior of the browser extension. +* HTML and CSS files that define the user interface. See [Overview of Microsoft Edge extensions](./extensions/index.md). @@ -111,12 +111,12 @@ See [Introduction to Microsoft Edge WebView2](./webview2/index.md). The following are tools to automate testing in Microsoft Edge: -* **DevTools Protocol** is used to instrument, inspect, debug, and profile browsers. -* Use **origin trials** to try experimental APIs. -* **Playwright** provides cross-browser automation through a single API. -* **Puppeteer**'s API controls Microsoft Edge via DevTools Protocol. -* **WebDriver** simulates user interaction with Microsoft Edge. -* **webhint** linting checks code for errors and best practices. +* **DevTools Protocol** is used to instrument, inspect, debug, and profile browsers. +* Use **origin trials** to try experimental APIs. +* **Playwright** provides cross-browser automation through a single API. +* **Puppeteer**'s API controls Microsoft Edge via DevTools Protocol. +* **WebDriver** simulates user interaction with Microsoft Edge. +* **webhint** linting checks code for errors and best practices. See [Test and automation in Microsoft Edge](./test-and-automation/test-and-automation.md). diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml index 5fd9d93e06..d2cf357b08 100644 --- a/microsoft-edge/developer/index.yml +++ b/microsoft-edge/developer/index.yml @@ -114,9 +114,12 @@ landingContent: - text: Overview of Microsoft Edge extensions url: ../extensions/index.md - - text: Extension concepts and architecture + - text: Get started developing an extension url: ../extensions/getting-started/index.md + - text: Extension concepts and architecture + url: ../extensions/getting-started/architecture.md + - linkListType: sample links: - text: "Sample: Picture viewer pop-up webpage" diff --git a/microsoft-edge/devtools/network-request-blocking/network-request-blocking-tool.md b/microsoft-edge/devtools/network-request-blocking/network-request-blocking-tool.md index 9ac4cd870d..cab872051f 100644 --- a/microsoft-edge/devtools/network-request-blocking/network-request-blocking-tool.md +++ b/microsoft-edge/devtools/network-request-blocking/network-request-blocking-tool.md @@ -65,13 +65,13 @@ See also: To delete a specific network blocking request pattern: -* In the **Network request blocking** table, hover over a network blocking request pattern, and then click the **Remove** (![Remove blocked request icon](./network-request-blocking-tool-images/remove-blocked-request-icon.png)) button: +* In the **Network request blocking** table, hover over a network blocking request pattern, and then click the **Remove** (![Remove blocked request icon](./network-request-blocking-tool-images/remove-blocked-request-icon.png)) button: ![Removing a blocked request](./network-request-blocking-tool-images/remove-blocked-request.png) To delete all network blocking requests at once: -* In the toolbar, click the **Remove all patterns** (![Remove all blocked requests icon](./network-request-blocking-tool-images/remove-all-blocked-requests-icon.png)) button. +* In the toolbar, click the **Remove all patterns** (![Remove all blocked requests icon](./network-request-blocking-tool-images/remove-all-blocked-requests-icon.png)) button. @@ -79,7 +79,7 @@ To delete all network blocking requests at once: To change an existing blocked network request: -* In the **Network request blocking** table, hover over a blocked network request, and then click **Edit** (![edit blocked request icon](./network-request-blocking-tool-images/edit-blocked-request-icon.png)): +* In the **Network request blocking** table, hover over a blocked network request, and then click **Edit** (![edit blocked request icon](./network-request-blocking-tool-images/edit-blocked-request-icon.png)): ![Editing a blocked request](./network-request-blocking-tool-images/edit-blocked-request.png) @@ -89,7 +89,7 @@ To change an existing blocked network request: To toggle network request blocking without having to delete and re-create all of the blocked network requests: -* In the toolbar, select or clear the **Enable network request blocking** checkbox: +* In the toolbar, select or clear the **Enable network request blocking** checkbox: ![Toggling network request blocking](./network-request-blocking-tool-images/toggle-request-blocking.png) diff --git a/microsoft-edge/devtools/overview.md b/microsoft-edge/devtools/overview.md index 3b3afde799..6ee38790aa 100644 --- a/microsoft-edge/devtools/overview.md +++ b/microsoft-edge/devtools/overview.md @@ -69,15 +69,15 @@ DevTools provides a powerful way to inspect and debug webpages and web apps. Yo With DevTools, you can do the following: -* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats. +* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats. -* Emulate how your website behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems. +* Emulate how your website behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems. -* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps. +* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps. -* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found. +* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found. -* Use a development environment to sync changes in DevTools with the file system and from the web. +* Use a development environment to sync changes in DevTools with the file system and from the web. @@ -130,9 +130,9 @@ hit counts: **Ctrl+Shift+I** 21 (in 11) **Ctrl+Shift+C** 7 (in 6) -**Command+Option+J** 21 (in 12) +**Command+Option+J** 21 (in 12) **Command+Option+I** 15 (in 6) -**Command+Option+C** 3 (in 2) +**Command+Option+C** 3 (in 2) --> @@ -247,9 +247,9 @@ To zoom the rendered page, click the page, and then use the same keyboard shortc 1. Click the **Customize and control DevTools** (![Customize icon](./overview-images/customize-devtools-icon-light-theme.png)) menu button, and then select **Run command**. 1. In the **Command Menu**, start typing **zoom**, and then select a zoom command: - * **Reset zoom level** - * **Zoom in** - * **Zoom out** + * **Reset zoom level** + * **Zoom in** + * **Zoom out** @@ -267,31 +267,31 @@ The DevTools user interface has the following main areas: By default, the **Activity Bar** contains the following tools: -* **Inspect** tool (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. +* **Inspect** tool (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. -* **Device Emulation** tool (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. +* **Device Emulation** tool (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. -* **Welcome** tool (![Welcome tool icon](./overview-images/welcome.png)). +* **Welcome** tool (![Welcome tool icon](./overview-images/welcome.png)). -* **Elements** tool (![Elements tool icon](./overview-images/elements.png)). +* **Elements** tool (![Elements tool icon](./overview-images/elements.png)). -* **Console** tool (![Console tool icon](./overview-images/console.png)). +* **Console** tool (![Console tool icon](./overview-images/console.png)). -* **Sources** tool (![Sources tool icon](./overview-images/sources.png)). +* **Sources** tool (![Sources tool icon](./overview-images/sources.png)). -* **Network** tool (![Network tool icon](./overview-images/network.png)). +* **Network** tool (![Network tool icon](./overview-images/network.png)). -* **Performance** tool (![Performance tool icon](./overview-images/performance.png)). +* **Performance** tool (![Performance tool icon](./overview-images/performance.png)). -* **Memory** tool (![Memory tool icon](./overview-images/memory.png)). +* **Memory** tool (![Memory tool icon](./overview-images/memory.png)). -* **Application** tool (![Application tool icon](./overview-images/application.png)). +* **Application** tool (![Application tool icon](./overview-images/application.png)). By default, the **Quick View** toolbar contains the following tools: -* **Console** tool (![Console tool icon](./overview-images/console.png)). +* **Console** tool (![Console tool icon](./overview-images/console.png)). -* **Issues** tool (![Issues tool icon](./overview-images/issues.png)). +* **Issues** tool (![Issues tool icon](./overview-images/issues.png)). In the **Activity Bar**, tool tabs either contain the tool name and icon, or just the tool icon, depending on the width of the DevTools window. If the window is wide enough, the tool name and icon appear. If the window is too narrow, only the tool icon appears and the tool name appears when you hover over the tool icon. @@ -336,28 +336,28 @@ There are two toolbars: the **Activity Bar** at the top of DevTools, and the **Q The **Activity Bar** contains the following features: * Icon tools: - * **Inspect tool** (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. - * **Device Emulation** (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. + * **Inspect tool** (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. + * **Device Emulation** (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. * Tool tabs: - * **Welcome** tool. - * **Elements** tool. Permanent. - * **Console** tool. Permanent. - * **Sources** tool. Permanent. - * **Network** tool. - * **Performance** tool. - * **Memory** tool. - * **Application** tool. + * **Welcome** tool. + * **Elements** tool. Permanent. + * **Console** tool. Permanent. + * **Sources** tool. Permanent. + * **Network** tool. + * **Performance** tool. + * **Memory** tool. + * **Application** tool. * Icons: - * **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button. - * **Customize and control DevTools** (![Customize icon](./overview-images/customize-devtools-icon-light-theme.png)) menu button. - * **Help** (![Help icon](./overview-images/help-icon.png)) button. - * **Close** DevTools (![Close DevTools icon](./overview-images/close-devtools-icon-light-theme.png)) button. + * **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button. + * **Customize and control DevTools** (![Customize icon](./overview-images/customize-devtools-icon-light-theme.png)) menu button. + * **Help** (![Help icon](./overview-images/help-icon.png)) button. + * **Close** DevTools (![Close DevTools icon](./overview-images/close-devtools-icon-light-theme.png)) button. ![The Activity Bar, with labels that identify its features](./overview-images/menu-bar.png) @@ -421,8 +421,8 @@ The **Elements** tool is always present on the **Activity Bar**. In the **Console** tool, you can: -* View and filter logged messages from network requests or from JavaScript log statements. -* Enter JavaScript statements to evaluate in realtime. Expressions are evaluated in the current context, such as when the JavaScript debugger in the **Sources** tool is paused at a breakpoint. +* View and filter logged messages from network requests or from JavaScript log statements. +* Enter JavaScript statements to evaluate in realtime. Expressions are evaluated in the current context, such as when the JavaScript debugger in the **Sources** tool is paused at a breakpoint. The **Console** tool is always present on the **Activity Bar** and on the **Quick View** toolbar. @@ -549,9 +549,9 @@ The **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) b In addition to **Activity Bar** and **Quick View** tools, DevTools includes the following tools: -* The **Inspect** tool. See [Use the Inspect tool to detect accessibility issues by hovering over the webpage](accessibility/test-inspect-tool.md). -* The **Device Emulation** tool. See [Emulate mobile devices (Device Emulation)](device-mode/index.md). -* The **Command Menu**. See [Run commands with the Microsoft Edge DevTools Command Menu](command-menu/index.md). +* The **Inspect** tool. See [Use the Inspect tool to detect accessibility issues by hovering over the webpage](accessibility/test-inspect-tool.md). +* The **Device Emulation** tool. See [Emulate mobile devices (Device Emulation)](device-mode/index.md). +* The **Command Menu**. See [Run commands with the Microsoft Edge DevTools Command Menu](command-menu/index.md). @@ -571,8 +571,8 @@ In the **Command Menu**, the tools are called "panels"; for example, the **Eleme 1. To open the **Command Menu**, do either of the following: - * Click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select **Run command**. - * Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). + * Click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select **Run command**. + * Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The **Command Menu** allows you to type commands to display, hide, or run features in DevTools. @@ -601,12 +601,12 @@ In the **Settings** > **Preferences** page, you can change several parts of DevT You can also change the settings of advanced features, such as: -* Add local files to a [Workspace](workspaces/index.md). -* Filter library code by using the **Ignore List**. -* Define the **Devices** you want to include in the device simulation and test mode. For more information, see [Emulate mobile devices (Device Emulation)](device-mode/index.md). -* Select a network **Throttling** profile. -* Define simulated **Locations**. -* Customize keyboard **Shortcuts**. For example, to use the same shortcuts in DevTools as in Visual Studio Code, select **Match shortcuts from preset** > **Visual Studio Code**. +* Add local files to a [Workspace](workspaces/index.md). +* Filter library code by using the **Ignore List**. +* Define the **Devices** you want to include in the device simulation and test mode. For more information, see [Emulate mobile devices (Device Emulation)](device-mode/index.md). +* Select a network **Throttling** profile. +* Define simulated **Locations**. +* Customize keyboard **Shortcuts**. For example, to use the same shortcuts in DevTools as in Visual Studio Code, select **Match shortcuts from preset** > **Visual Studio Code**. ![All the keyboard shortcuts and the menu to match each to the shortcuts in Visual Studio Code](./overview-images/match-keys.png) diff --git a/microsoft-edge/devtools/performance-monitor/performance-monitor-tool.md b/microsoft-edge/devtools/performance-monitor/performance-monitor-tool.md index d8ce548b25..78b1be7b3d 100644 --- a/microsoft-edge/devtools/performance-monitor/performance-monitor-tool.md +++ b/microsoft-edge/devtools/performance-monitor/performance-monitor-tool.md @@ -13,9 +13,9 @@ ms.date: 11/22/2023 Use the **Performance monitor** tool to get a real-time view of the runtime performance of a webpage. The **Performance monitor** tool helps determine where performance problems come from. There are various reasons why a website might run slowly. This tool provides clues to understand whether the problems are related to causes such as the following: -* High memory or CPU usage. -* Too frequent layout and style calculations. -* Too many DOM nodes and event listeners. +* High memory or CPU usage. +* Too frequent layout and style calculations. +* Too many DOM nodes and event listeners. diff --git a/microsoft-edge/devtools/performance/index.md b/microsoft-edge/devtools/performance/index.md index f8b67f8e44..4b8a5eff55 100644 --- a/microsoft-edge/devtools/performance/index.md +++ b/microsoft-edge/devtools/performance/index.md @@ -307,7 +307,7 @@ Record the optimized code performance, as follows: ## Step 9: Analyze the optimized code's performance -* Using the workflows and tools that you just learned, analyze the results in the performance, like in [Step 5: Analyze the unoptimized code's performance](#step-5-analyze-the-unoptimized-codes-performance), above. +* Using the workflows and tools that you just learned, analyze the results in the performance, like in [Step 5: Analyze the unoptimized code's performance](#step-5-analyze-the-unoptimized-codes-performance), above. From the improved framerate to the reduction in events in the flame chart in the **Main** section, the optimized version of the app does much less work, resulting in better performance. diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index a13cad0f52..cc6a30f1f3 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -704,11 +704,11 @@ The chart collapses ignored scripts, marks them as **On ignore list**, and adds After recording a page, in addition to the **Main** section to analyze activities, DevTools also provides three tabular views for analyzing activities. Each view gives you a different perspective on the activities: -* To view the activities where the most time was directly spent, use the [Bottom-up](#the-bottom-up-tab) tab. +* To view the activities where the most time was directly spent, use the [Bottom-up](#the-bottom-up-tab) tab. -* To view the root activities that cause the most work, use the [Call tree](#the-call-tree-tab) tab. +* To view the root activities that cause the most work, use the [Call tree](#the-call-tree-tab) tab. -* To view the activities in the order in which they occurred during the recording, use the [Event log](#the-event-log-tab) tab. +* To view the activities in the order in which they occurred during the recording, use the [Event log](#the-event-log-tab) tab. To help you find what you are looking for faster, all three tabs have buttons for advanced filtering next to the **Filter** bar: @@ -909,9 +909,9 @@ View raster activity in the **Thread Pool** section. DevTools provides two ways to analyze frames per second: -* Use the **Frames** section to view how long a particular frame took. See [The Frames section](#the-frames-section), below. +* Use the **Frames** section to view how long a particular frame took. See [The Frames section](#the-frames-section), below. -* Use the **FPS meter** for a realtime estimate of FPS as the page runs. See [View frames per second in realtime with the FPS meter](#view-frames-per-second-in-realtime-with-the-fps-meter), below. +* Use the **FPS meter** for a realtime estimate of FPS as the page runs. See [View frames per second in realtime with the FPS meter](#view-frames-per-second-in-realtime-with-the-fps-meter), below. @@ -1062,7 +1062,7 @@ To view advanced information about a paint event: To view statistics about the selectors of the CSS rules that got recalculated during a performance recording: -* In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. +* In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. DevTools displays aggregate information about the selectors of the CSS rules that were recalculated during the recording in the **Selector Stats** tab: @@ -1274,13 +1274,13 @@ When **Disable local fonts** is selected, DevTools ignores the `local()` fonts a ![Emulate missing local fonts](./reference-images/disable-local-fonts.png) This feature is useful if you use two different copies of the same font during development, such as: -* A local font for your design tools. -* A web font for your code. +* A local font for your design tools. +* A web font for your code. Use **Disable local fonts** to make it easier to: -* Debug and measure loading performance and optimization of web fonts. -* Verify accuracy of your CSS `@font-face` rules. -* Discover differences between local versions installed on your device and a web font. +* Debug and measure loading performance and optimization of web fonts. +* Verify accuracy of your CSS `@font-face` rules. +* Discover differences between local versions installed on your device and a web font. diff --git a/microsoft-edge/devtools/progressive-web-apps/index.md b/microsoft-edge/devtools/progressive-web-apps/index.md index b4c249867a..d8da30a8bf 100644 --- a/microsoft-edge/devtools/progressive-web-apps/index.md +++ b/microsoft-edge/devtools/progressive-web-apps/index.md @@ -93,7 +93,7 @@ The **App Manifest** pane contains the following sections: * **Screenshot #2** * To view the manifest source file, click the link below the **App Manifest** label. In the previous figure, that link is `manifest.json`, which opens `https://airhorner.com/manifest.json`, for [Airhorner.com](https://airhorner.com). - + * The **Identity** and **Presentation** sections display fields from the manifest source in a more user-friendly display. diff --git a/microsoft-edge/devtools/quick-source/quick-source-tool.md b/microsoft-edge/devtools/quick-source/quick-source-tool.md index c7106f3bbb..bbb4e05177 100644 --- a/microsoft-edge/devtools/quick-source/quick-source-tool.md +++ b/microsoft-edge/devtools/quick-source/quick-source-tool.md @@ -187,7 +187,7 @@ Continue with the next section. Suppose you want to continue viewing the **Elements** tool, but you want to simultaneously view and edit the source files that were opened via the **Sources** tool. -1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements** (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool. +1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements** (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool. 1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**. diff --git a/microsoft-edge/devtools/recorder/index.md b/microsoft-edge/devtools/recorder/index.md index 0639bc6856..2fc3d4e8ed 100644 --- a/microsoft-edge/devtools/recorder/index.md +++ b/microsoft-edge/devtools/recorder/index.md @@ -118,7 +118,7 @@ To see what's happening in the rendered page while the user interactions are bei To slow down the replay speed: -* Click the dropdown arrow next to **Replay** in the top-right corner of the **Recorder** tool, and then select a speed from the dropdown menu, such as **Slow**, **Very slow**, or **Extremely slow**: +* Click the dropdown arrow next to **Replay** in the top-right corner of the **Recorder** tool, and then select a speed from the dropdown menu, such as **Slow**, **Very slow**, or **Extremely slow**: ![The Replay button and the Speed dropdown menu](./index-images/replay-slow.png) diff --git a/microsoft-edge/devtools/remote-debugging/index.md b/microsoft-edge/devtools/remote-debugging/index.md index fe4df6dc54..816dbfdb0b 100644 --- a/microsoft-edge/devtools/remote-debugging/index.md +++ b/microsoft-edge/devtools/remote-debugging/index.md @@ -25,11 +25,11 @@ ms.date: 05/04/2021 Remote debug live content on an Android device from your Windows or macOS computer. The following tutorial page teaches you how to: -* Set up your Android device for remote debugging, and discover it from your development machine. +* Set up your Android device for remote debugging, and discover it from your development machine. -* Inspect and debug live content on your Android device from your development machine. +* Inspect and debug live content on your Android device from your development machine. -* Screencast content from your Android device onto a DevTools instance on your development machine. +* Screencast content from your Android device onto a DevTools instance on your development machine. . @@ -133,16 +133,16 @@ Click the **Toggle Screencast** (![Toggle Screencast](./index-images/toggle-scre You can interact with the screencast in multiple ways: -* Clicks are translated into taps, firing proper touch events on the device. -* Keystrokes on your computer are sent to the device. -* To simulate a pinch gesture, hold **Shift** while dragging. -* To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer. +* Clicks are translated into taps, firing proper touch events on the device. +* Keystrokes on your computer are sent to the device. +* To simulate a pinch gesture, hold **Shift** while dragging. +* To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer. Use the following tips to help you screencast: -* Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge Address bar, the Android status bar, or the Android keyboard. -* Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of the performance of your page. -* If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast. +* Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge Address bar, the Android status bar, or the Android keyboard. +* Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of the performance of your page. +* If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast. diff --git a/microsoft-edge/devtools/remote-debugging/surface-duo-emulator.md b/microsoft-edge/devtools/remote-debugging/surface-duo-emulator.md index fb53c61bc2..689f10d1b9 100644 --- a/microsoft-edge/devtools/remote-debugging/surface-duo-emulator.md +++ b/microsoft-edge/devtools/remote-debugging/surface-duo-emulator.md @@ -16,13 +16,13 @@ In this article, you walk through the process of remotely debugging your web con ## Before you begin -* Install the [Surface Duo SDK](https://www.microsoft.com/download/details.aspx?id=100847) before running the [Surface Duo emulator](/dual-screen/android/use-emulator). See [Get the Surface Duo SDK](/dual-screen/android/get-duo-sdk). +* Install the [Surface Duo SDK](https://www.microsoft.com/download/details.aspx?id=100847) before running the [Surface Duo emulator](/dual-screen/android/use-emulator). See [Get the Surface Duo SDK](/dual-screen/android/get-duo-sdk). ## Step 1: Go to edge://inspect -* Open a desktop instance of Microsoft Edge, and go to `edge://inspect`: +* Open a desktop instance of Microsoft Edge, and go to `edge://inspect`: > [!div class="mx-imgBorder"] > ![The edge://inspect page in Microsoft Edge on the desktop](./surface-duo-emulator-images/remote-debugging-surface-duo-inspect-page.png) @@ -33,7 +33,7 @@ If the `edge://inspect` page doesn't recognize the [Surface Duo emulator](/dual- ## Step 2: Launch the Surface Duo emulator -* Launch the [Surface Duo emulator](/dual-screen/android/use-emulator). The emulator displays two different screens running on the emulator: +* Launch the [Surface Duo emulator](/dual-screen/android/use-emulator). The emulator displays two different screens running on the emulator: ![The Surface Duo emulator](./surface-duo-emulator-images/remote-debugging-surface-duo-emulator.png) @@ -90,8 +90,8 @@ To understand how the hinge impacts the layout of your web content, use the [Sur The web is a great platform for the new class of foldable and dual-screen devices, because you can write your HTML, CSS, and JavaScript once, and have it look great across single-screen, dual-screen, and foldable devices. See the following additional resources to get started building web content for these new devices. -* [Surface Duo developer documentation](/dual-screen/index) - Documentation for creating apps on dual-screen devices. +* [Surface Duo developer documentation](/dual-screen/index) - Documentation for creating apps on dual-screen devices. -* [Web Platform Primitives for Enlightened Experiences on Foldable Devices](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md) - Microsoft Edge web platform explainer for new APIs, to build web experiences on foldable and dual-screen devices. +* [Web Platform Primitives for Enlightened Experiences on Foldable Devices](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md) - Microsoft Edge web platform explainer for new APIs, to build web experiences on foldable and dual-screen devices. -* [How to build dual-screen experiences for the website and web apps](https://youtu.be/DXrZWsqXPVc) - Recording of Microsoft 365 Developer Day session. +* [How to build dual-screen experiences for the website and web apps](https://youtu.be/DXrZWsqXPVc) - Recording of Microsoft 365 Developer Day session. diff --git a/microsoft-edge/devtools/remote-debugging/webviews.md b/microsoft-edge/devtools/remote-debugging/webviews.md index e9b5e9acb1..b2e384a326 100644 --- a/microsoft-edge/devtools/remote-debugging/webviews.md +++ b/microsoft-edge/devtools/remote-debugging/webviews.md @@ -24,9 +24,9 @@ ms.date: 05/04/2021 # Remotely debug Android WebViews Debug Android WebViews in your native Android apps using Microsoft Edge Developer Tools, as follows: -* Turn on Android WebView debugging in your native Android app; debug Android WebViews in Microsoft Edge DevTools. -* To display the list of the Android WebViews with debugging turned on, go to `edge://inspect`. -* Debug Android WebViews in the same way you debug a webpage through [remote debugging](index.md). +* Turn on Android WebView debugging in your native Android app; debug Android WebViews in Microsoft Edge DevTools. +* To display the list of the Android WebViews with debugging turned on, go to `edge://inspect`. +* Debug Android WebViews in the same way you debug a webpage through [remote debugging](index.md). Details are below. @@ -83,9 +83,9 @@ The gray graphics listed with the Android WebView represent its size and positio If your Android WebViews aren't displayed on the `edge://inspect` page: -* Verify that Android WebView debugging is turned on for your app. +* Verify that Android WebView debugging is turned on for your app. -* On your device, open the app with the Android WebView you want to debug. Then, refresh `edge://inspect`. +* On your device, open the app with the Android WebView you want to debug. Then, refresh `edge://inspect`. diff --git a/microsoft-edge/devtools/remote-debugging/windows.md b/microsoft-edge/devtools/remote-debugging/windows.md index f321a2f30b..f86a2393d7 100644 --- a/microsoft-edge/devtools/remote-debugging/windows.md +++ b/microsoft-edge/devtools/remote-debugging/windows.md @@ -14,11 +14,11 @@ Remote debug live content on a Windows 10 or later device from your Windows or m This tutorial teaches you the following tasks: -* Set up your Windows device for remote debugging and connect to it from your development machine. +* Set up your Windows device for remote debugging and connect to it from your development machine. -* Inspect and debug live content on your Windows device from your development machine. +* Inspect and debug live content on your Windows device from your development machine. -* Screencast content from your Windows device onto a DevTools instance on your development machine. +* Screencast content from your Windows device onto a DevTools instance on your development machine. @@ -178,15 +178,15 @@ By default, the DevTools instance on the client have screencasting turned on, wh ![The Toggle Screencast button in the Microsoft Edge DevTools on the client](./windows-images/remote-debugging-windows-media-toggle-screencast.png) You can interact with the screencast in multiple ways: -* Clicks are translated into taps, firing proper touch events on the device. -* Keystrokes on your computer are sent to the device. -* To simulate a pinch gesture, hold **Shift** while dragging. -* To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer. +* Clicks are translated into taps, firing proper touch events on the device. +* Keystrokes on your computer are sent to the device. +* To simulate a pinch gesture, hold **Shift** while dragging. +* To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer. Notes about screencasts: -* Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge Address bar, the Windows 10 or later taskbar, and the Windows 10 or later keyboard. +* Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge Address bar, the Windows 10 or later taskbar, and the Windows 10 or later keyboard. -* Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of the performance of your page. +* Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of the performance of your page. -* If your host device screen locks, the content of your screencast disappears. Unlock your host device screen to automatically resume the screencast. +* If your host device screen locks, the content of your screencast disappears. Unlock your host device screen to automatically resume the screencast. diff --git a/microsoft-edge/devtools/rendering-tools/index.md b/microsoft-edge/devtools/rendering-tools/index.md index 833fcc1669..e8318021de 100644 --- a/microsoft-edge/devtools/rendering-tools/index.md +++ b/microsoft-edge/devtools/rendering-tools/index.md @@ -31,13 +31,13 @@ Users expect interactive and smooth pages. Each stage in the pixel pipeline rep #### Summary -* Don't write JavaScript that forces the browser to recalculate layout. Separate read and write functions, and perform reads first. +* Don't write JavaScript that forces the browser to recalculate layout. Separate read and write functions, and perform reads first. -* Don't over-complicate your CSS. Use less CSS and keep your CSS selectors simple. +* Don't over-complicate your CSS. Use less CSS and keep your CSS selectors simple. -* Avoid layout as much as possible. Choose CSS that doesn't trigger layout at all. +* Avoid layout as much as possible. Choose CSS that doesn't trigger layout at all. -* Painting may take up more time than any other rendering activity. Watch out for paint bottlenecks. +* Painting may take up more time than any other rendering activity. Watch out for paint bottlenecks. diff --git a/microsoft-edge/devtools/rendering-tools/js-runtime.md b/microsoft-edge/devtools/rendering-tools/js-runtime.md index 3fe67d3a6a..cd053f4774 100644 --- a/microsoft-edge/devtools/rendering-tools/js-runtime.md +++ b/microsoft-edge/devtools/rendering-tools/js-runtime.md @@ -168,9 +168,9 @@ Hover on a function to display the name and timing data: | **Self size** | The size of the current invocation of the function, including only the statements in the function. | | **Total size** | The size of the current invocation of this function and any functions that it called. | | **URL** | The location of the function definition in the form of `base.js:261` where `base.js` is the name of the file where the function is defined and `261` is the line number of the definition. | - - - + + + ![View functions details in the profiles chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-hover.png) diff --git a/microsoft-edge/devtools/resources/index.md b/microsoft-edge/devtools/resources/index.md index dc36c32b5e..3aa69b3b9b 100644 --- a/microsoft-edge/devtools/resources/index.md +++ b/microsoft-edge/devtools/resources/index.md @@ -24,19 +24,19 @@ ms.date: 10/30/2023 # View the resource files that make up a webpage You can view the resources that make up a webpage from within several tools (or _panels_) in Microsoft Edge DevTools, including: -* **Network** tool -* **Sources** tool -* **Application** tool +* **Network** tool +* **Sources** tool +* **Application** tool Resources are the files that make up a webpage. Examples of resources include: -* CSS files -* JavaScript files -* HTML files -* Image files +* CSS files +* JavaScript files +* HTML files +* Image files See also: -* [Learn web development](https://developer.mozilla.org/docs/Learn) at Mozilla.org -* [Overview of DevTools](../../devtools/overview.md) +* [Learn web development](https://developer.mozilla.org/docs/Learn) at Mozilla.org +* [Overview of DevTools](../../devtools/overview.md) diff --git a/microsoft-edge/devtools/samples/index.md b/microsoft-edge/devtools/samples/index.md index bf49a4605a..9a8c0c1c66 100644 --- a/microsoft-edge/devtools/samples/index.md +++ b/microsoft-edge/devtools/samples/index.md @@ -11,9 +11,9 @@ ms.date: 07/17/2025 # Sample code for DevTools Use the [Demos](https://github.com/MicrosoftEdge/Demos#readme) repo to learn how to use Microsoft Edge to develop webpages and web apps. There are various ways to view, download, and modify these demo webpages, including: -* DevTools in Microsoft Edge. -* Visual Studio Code, with optional DevTools. -* Visual Studio, with optional DevTools. +* DevTools in Microsoft Edge. +* Visual Studio Code, with optional DevTools. +* Visual Studio, with optional DevTools. To view the source code for a rendered demo webpage in DevTools in Microsoft Edge: @@ -153,11 +153,11 @@ This is the source code repo and its directory which stores the files for this d * [MicrosoftEdge/Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) - Contains the files: - * `README.md` - Contains links to the rendered demo webpage and the in-depth tutorial article about using the demo webpage. + * `README.md` - Contains links to the rendered demo webpage and the in-depth tutorial article about using the demo webpage. - * `index.html` - The webpage with an input form that sends data to the JavaScript file, and that displays the result of the JavaScript. + * `index.html` - The webpage with an input form that sends data to the JavaScript file, and that displays the result of the JavaScript. - * `get-started.js` - The JavaScript file that's used by the form in the demo webpage. + * `get-started.js` - The JavaScript file that's used by the form in the demo webpage. @@ -442,9 +442,9 @@ In contrast, the desired GitHub.io URL pattern is: * `https://[org].github.io/[repo]/[path]` To fill in that GitHub.io URL pattern, in this example: -* [org] is `MicrosoftEdge`. -* [repo] is `Demos`. -* [path] is `demo-to-do`. +* [org] is `MicrosoftEdge`. +* [repo] is `Demos`. +* [path] is `demo-to-do`. Therefore, the resulting GitHub.io server URL for the rendered demo webpage is: * `https://MicrosoftEdge.github.io/Demos/demo-to-do/` diff --git a/microsoft-edge/devtools/search/search-tool.md b/microsoft-edge/devtools/search/search-tool.md index 79b668f78c..6930c2dc54 100644 --- a/microsoft-edge/devtools/search/search-tool.md +++ b/microsoft-edge/devtools/search/search-tool.md @@ -107,8 +107,8 @@ After doing a search, click a result line to open the corresponding file. The * A webpage can continue to request resources after it has finished loading, so the results displayed in the **Search** panel might become outdated after a while. To update the search results, do either of the following: -* Click the **Refresh** (![Refresh search button](./search-tool-images/search-tool-refresh.png)) button in the toolbar. -* Search again by typing a term in the search input field. +* Click the **Refresh** (![Refresh search button](./search-tool-images/search-tool-refresh.png)) button in the toolbar. +* Search again by typing a term in the search input field. diff --git a/microsoft-edge/devtools/sources/index.md b/microsoft-edge/devtools/sources/index.md index 80cd994b6b..6969752f53 100644 --- a/microsoft-edge/devtools/sources/index.md +++ b/microsoft-edge/devtools/sources/index.md @@ -148,10 +148,10 @@ To load a file into a new tab of the browser, or to display other actions, right ###### Icons in the Page tab The **Page** tab uses the following icons: -* The **window** icon, along with the label `top`, represents the main document frame, which is an [HTML frame](https://w3.org/TR/html401/present/frames.html): ![The window icon](./index-images/window-icon.png) -* The **cloud** icon represents an [origin](https://html.spec.whatwg.org/multipage/origin.html#origin): ![The cloud icon](./index-images/cloud-icon.png) -* The **folder** icon represents a directory: ![The folder icon](./index-images/folder-icon.png) -* The **page** icon represents a resource: ![The page icon](./index-images/file-icon.png) +* The **window** icon, along with the label `top`, represents the main document frame, which is an [HTML frame](https://w3.org/TR/html401/present/frames.html): ![The window icon](./index-images/window-icon.png) +* The **cloud** icon represents an [origin](https://html.spec.whatwg.org/multipage/origin.html#origin): ![The cloud icon](./index-images/cloud-icon.png) +* The **folder** icon represents a directory: ![The folder icon](./index-images/folder-icon.png) +* The **page** icon represents a resource: ![The page icon](./index-images/file-icon.png) @@ -268,8 +268,8 @@ document.head.appendChild(script); Instead, you can save this code in a **Snippet** and then easily run it whenever you need to. When you press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS), DevTools saves the **Snippet** to your file system. There are multiple ways to run a Snippet: -* In the **Navigator** pane, select the **Snippets** tab, and then select the snippets file to open it. Then at the bottom of the Editor pane, click the **Run** (![The Run button](./index-images/run-snippet-icon.png)) button. -* When DevTools has focus, press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to open the [Command Menu](../command-menu/index.md), and then type **!**. +* In the **Navigator** pane, select the **Snippets** tab, and then select the snippets file to open it. Then at the bottom of the Editor pane, click the **Run** (![The Run button](./index-images/run-snippet-icon.png)) button. +* When DevTools has focus, press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to open the [Command Menu](../command-menu/index.md), and then type **!**. Snippets are similar to bookmarklets. @@ -282,8 +282,8 @@ See also: To open a file, in addition to using the **Navigator** pane within the **Sources** tool, you can use the **Command Menu** from anywhere within DevTools. -* From anywhere in DevTools, press **Ctrl+P** on Windows/Linux or **Command+P** on macOS. The **Command Menu** appears, and lists all the resources that are in the tabs of the **Navigator** pane of the **Sources** tool. -* Or, next to the tabs of the **Navigator** pane in the **Sources** tool, click the **More options** (**...**) button, and then select **Open File**. +* From anywhere in DevTools, press **Ctrl+P** on Windows/Linux or **Command+P** on macOS. The **Command Menu** appears, and lists all the resources that are in the tabs of the **Navigator** pane of the **Sources** tool. +* Or, next to the tabs of the **Navigator** pane in the **Sources** tool, click the **More options** (**...**) button, and then select **Open File**. To display and pick from a list of all .js files, type **.js**. @@ -355,8 +355,8 @@ See also: For JavaScript changes to take effect, press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). If you change a file, an asterisk appears next to the file name. -* To save changes, press **Ctrl+S** on Windows/Linux or **Command+S** on macOS. -* To undo a change, press **Ctrl+Z** on Windows/Linux or **Command+Z** on macOS. +* To save changes, press **Ctrl+S** on Windows/Linux or **Command+S** on macOS. +* To undo a change, press **Ctrl+Z** on Windows/Linux or **Command+Z** on macOS. By default, your edits are discarded when you refresh the webpage. For more information about how to save the changes in your local file system, see [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md). @@ -393,8 +393,8 @@ See also: When you define a Workspace, changes inside a JavaScript function body take effect. DevTools doesn't re-run a script, so the only JavaScript changes that take effect are changes that you make within functions. For example, in the following figure, we added the following code to the JavaScript that is returned by the server: -* We added the statement `console.log('A')` outside of any function. -* We added the statement `console.log('B')` inside an `onClick` function. +* We added the statement `console.log('A')` outside of any function. +* We added the statement `console.log('B')` inside an `onClick` function. We then saved the changes, entered numbers into the form, and then selected the form button to send the form. After submitting the form, `console.log('A')`, which is at global scope, doesn't run, but `console.log('B')`, inside an `onClick` function, does run, outputting `B` to the **Console**: @@ -478,8 +478,8 @@ See also: #### Editing an HTML file There are two ways to edit HTML in DevTools: -* In the **Elements** tool, you work with one HTML element at a time, through user interface controls. -* In the **Sources** tool, you use a text editor. +* In the **Elements** tool, you work with one HTML element at a time, through user interface controls. +* In the **Sources** tool, you use a text editor. ![The HTML editor of the Sources tool](./index-images/sources-html-editor.png) @@ -548,11 +548,11 @@ With the debugger, you step through the code, while watching any JavaScript expr ![The Debugger pane of the Sources tool ](./index-images/sources-paused-breakpoint-highlight-debug-pane.png) The debugger supports standard debugging actions, such as: -* Setting breakpoints, to pause code. -* Stepping through code. -* Viewing and editing properties and variables. -* Watching the values of JavaScript expressions. -* Viewing the call stack (the sequence of function calls so far). +* Setting breakpoints, to pause code. +* Stepping through code. +* Viewing and editing properties and variables. +* Watching the values of JavaScript expressions. +* Viewing the call stack (the sequence of function calls so far). The debugger in DevTools is designed to look, feel, and work like [the debugger in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging) and [the debugger in Visual Studio](/visualstudio/debugger/navigating-through-code-with-the-debugger). @@ -627,11 +627,11 @@ See also: These three approaches are equivalent: -* Temporarily adding the statements `console.log(sum)` and `console.log(typeof sum)` in the code, where `sum` is in-scope. +* Temporarily adding the statements `console.log(sum)` and `console.log(typeof sum)` in the code, where `sum` is in-scope. -* Issuing the statements `sum` and `console.log(typeof sum)` in the **Console** pane of the DevTools, when the debugger is paused where `sum` is in-scope. +* Issuing the statements `sum` and `console.log(typeof sum)` in the **Console** pane of the DevTools, when the debugger is paused where `sum` is in-scope. -* Setting the **Watch** expressions `sum` and `typeof sum` in the **Debugger** pane. +* Setting the **Watch** expressions `sum` and `typeof sum` in the **Debugger** pane. When the variable `sum` is in-scope, `sum` and its value are automatically shown in the **Scope** section of the **Debugger** pane, and are also overlaid in the Editor pane where `sum` is calculated. So you probably wouldn't need to define a Watch expression for `sum`. diff --git a/microsoft-edge/devtools/speed/get-started.md b/microsoft-edge/devtools/speed/get-started.md index 7c7f70d9e1..679e8d032b 100644 --- a/microsoft-edge/devtools/speed/get-started.md +++ b/microsoft-edge/devtools/speed/get-started.md @@ -82,9 +82,9 @@ Whenever you set out to improve the load performance of a site, always start wit The audit has two important functions: -* It creates a **baseline** for you to measure subsequent changes against. +* It creates a **baseline** for you to measure subsequent changes against. -* It gives you **actionable tips** on what changes improve performance the most. +* It gives you **actionable tips** on what changes improve performance the most. @@ -99,11 +99,11 @@ The baseline is a record of how the site performed before you made any performan 1. Select the **Performance** category, and clear all the other categories. For now, keep the other default options. The options are: - * **Mode**: To run tests during the load of the webpage, set this option to **Navigation (default)**. To run tests during a period of time, set the option to **Timespan**. To run tests on the webpage as it appears now, set the option to **Snapshot**. + * **Mode**: To run tests during the load of the webpage, set this option to **Navigation (default)**. To run tests during a period of time, set the option to **Timespan**. To run tests on the webpage as it appears now, set the option to **Snapshot**. - * **Device**: To simulate a mobile user agent string and a mobile viewport, set this option to **Mobile**. To test the webpage without any simulation, set this option to **Desktop**. + * **Device**: To simulate a mobile user agent string and a mobile viewport, set this option to **Mobile**. To test the webpage without any simulation, set this option to **Desktop**. - * **Categories**: this option allows you to run only a subset of the tests available in **Lighthouse**. + * **Categories**: this option allows you to run only a subset of the tests available in **Lighthouse**. 1. Click **Analyze page load**: @@ -156,8 +156,8 @@ The **Metrics** section provides quantitative measurements of the performance of Each metric provides insight into a different aspect of the performance. For example: -* **First Contentful Paint** indicates when content first appears on the screen. This is an important milestone in the user's perception of the page load. -* **Time To Interactive** marks the point at which the rendered page is ready to handle user interactions. +* **First Contentful Paint** indicates when content first appears on the screen. This is an important milestone in the user's perception of the page load. +* **Time To Interactive** marks the point at which the rendered page is ready to handle user interactions. Click **Expand view** to display a description for each metric. Then click **Learn More** to read documentation about it: @@ -282,13 +282,13 @@ Now, the images on the webpage only require transferring 360 KB of data, instead For a small app, doing a one-off resize like this might be good enough. But for a large app, consider these strategies for managing images: -* Automatically resize images during your build process. +* Automatically resize images during your build process. -* Create multiple sizes of each image during the build process and then use `srcset` in your code. At runtime, the browser takes care of choosing which size is best for the device. +* Create multiple sizes of each image during the build process and then use `srcset` in your code. At runtime, the browser takes care of choosing which size is best for the device. -* Use an image CDN that lets you dynamically resize an image when you request it. +* Use an image CDN that lets you dynamically resize an image when you request it. -* At least, optimize each image. This can often create huge savings. +* At least, optimize each image. This can often create huge savings. _Optimization_ means running an image through a program that reduces the size of the image file. @@ -451,7 +451,7 @@ See also: #### Reduce layout shift by setting explicit width and height on images -In your **Lighthouse** report, the **Diagnostics** section suggests defining explicit `width` and `height` for image elements. Click on **Image elements do not have explicit width and height** to display more information: +In your **Lighthouse** report, the **Diagnostics** section suggests defining explicit `width` and `height` for image elements. Click on **Image elements do not have explicit width and height** to display more information: ![The Lighthouse diagnostics section about setting explicit width and height for images](./get-started-images/explicit-image-size.png) diff --git a/microsoft-edge/devtools/storage/indexeddb.md b/microsoft-edge/devtools/storage/indexeddb.md index 11107416df..436fb1d85b 100644 --- a/microsoft-edge/devtools/storage/indexeddb.md +++ b/microsoft-edge/devtools/storage/indexeddb.md @@ -67,9 +67,9 @@ To view and change [IndexedDB](https://developer.mozilla.org/docs/Web/API/Indexe IndexedDB values in the **Application** tool don't update in real-time. -* To refresh the data, view an object store and then click the **Refresh** (![Refresh](./indexeddb-images/reload-icon.png)) button. +* To refresh the data, view an object store and then click the **Refresh** (![Refresh](./indexeddb-images/reload-icon.png)) button. -* To refresh all data in an IndexedDB database, view a database and then click **Refresh database**: +* To refresh all data in an IndexedDB database, view a database and then click **Refresh database**: ![The database view, with the refresh button](./indexeddb-images/refresh-db.png) diff --git a/microsoft-edge/devtools/webauthn/index.md b/microsoft-edge/devtools/webauthn/index.md index bb36a9618a..13099c9e6d 100644 --- a/microsoft-edge/devtools/webauthn/index.md +++ b/microsoft-edge/devtools/webauthn/index.md @@ -16,9 +16,9 @@ Instead of debugging Web Authentication in your website or app with physical aut By using the **WebAuthn** tool, you can do the following without relying on physical authenticators: -* Emulate authenticators. -* Customize attributes of authenticators. -* Inspect states of authenticators. +* Emulate authenticators. +* Customize attributes of authenticators. +* Inspect states of authenticators. You can emulate authenticators and debug the [Web Authentication API](https://w3c.github.io/webauthn) by using the **WebAuthn** tool. diff --git a/microsoft-edge/devtools/welcome/welcome-tool.md b/microsoft-edge/devtools/welcome/welcome-tool.md index 89ca8821c9..348c0914c8 100644 --- a/microsoft-edge/devtools/welcome/welcome-tool.md +++ b/microsoft-edge/devtools/welcome/welcome-tool.md @@ -12,10 +12,10 @@ ms.date: 02/15/2022 The **Welcome** tool opens when you first open DevTools. It displays: -* Links to developer docs. -* Latest features. -* Release notes. -* Option to contact the Microsoft Edge DevTools team. +* Links to developer docs. +* Latest features. +* Release notes. +* Option to contact the Microsoft Edge DevTools team. The **Welcome** tool opens automatically after each update to Microsoft Edge. diff --git a/microsoft-edge/devtools/whats-new/2019/12/devtools.md b/microsoft-edge/devtools/whats-new/2019/12/devtools.md index 612bc52ded..8fb555ad3b 100644 --- a/microsoft-edge/devtools/whats-new/2019/12/devtools.md +++ b/microsoft-edge/devtools/whats-new/2019/12/devtools.md @@ -262,9 +262,9 @@ You can now view the initiators and dependencies of a network request as a neste After [logging network activity in the Network panel](../../../network/index.md), select a resource and then go to the **Initiator** panel to view the **Request Initiator Chain**: -* The **inspected resource** is bold. In the screenshot above, `ai.2.min.js` is the inspected resource. -* The resources above the inspected resource are the **initiators**. In the screenshot above, `https://www.microsoftedgeinsider.com` is the initiator of `ai.2.min.js`. In other words, `https://www.microsoftedgeinsider.com` caused the network request for `ai.2.min.js`. (The screenshot shows an outdated URL. The latest URL is `https://www.microsoft.com/edge/download/insider`.) -* The resources below the inspected resource are the **dependencies**. In the screenshot above, `https://dc.services.visualstudio.com/v2/track` is a dependency of `ai.2.min.js`. In other words, `ai.2.min.js` caused the network request for `https://dc.services.visualstudio.com/v2/track`. +* The **inspected resource** is bold. In the screenshot above, `ai.2.min.js` is the inspected resource. +* The resources above the inspected resource are the **initiators**. In the screenshot above, `https://www.microsoftedgeinsider.com` is the initiator of `ai.2.min.js`. In other words, `https://www.microsoftedgeinsider.com` caused the network request for `ai.2.min.js`. (The screenshot shows an outdated URL. The latest URL is `https://www.microsoft.com/edge/download/insider`.) +* The resources below the inspected resource are the **dependencies**. In the screenshot above, `https://dc.services.visualstudio.com/v2/track` is a dependency of `ai.2.min.js`. In other words, `ai.2.min.js` caused the network request for `https://dc.services.visualstudio.com/v2/track`. Initiator and dependency information can also be accessed by holding **Shift** and then hovering over network resources. See [Display initiators and dependencies](../../../network/reference.md#display-initiators-and-dependencies) in _Network features reference_. diff --git a/microsoft-edge/devtools/whats-new/2020/01/devtools.md b/microsoft-edge/devtools/whats-new/2020/01/devtools.md index 06ef78cd41..afafb6411e 100644 --- a/microsoft-edge/devtools/whats-new/2020/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/01/devtools.md @@ -228,7 +228,7 @@ Click [Show Device Frame](../../../device-mode/index.md#show-device-frame) to sh Related features: -* Open the [Command Menu](../../../command-menu/index.md) and run the `Capture screenshot` command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling **Show Device Frame**). +* Open the [Command Menu](../../../command-menu/index.md) and run the `Capture screenshot` command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling **Show Device Frame**). * [Throttle the network and CPU](../../../device-mode/index.md#throttle-the-network-and-cpu) to more accurately simulate a mobile user's web browsing conditions. Chromium issue [#924693](https://crbug.com/924693) diff --git a/microsoft-edge/devtools/whats-new/2020/03/devtools.md b/microsoft-edge/devtools/whats-new/2020/03/devtools.md index 2e564c1a5e..61ccb65727 100644 --- a/microsoft-edge/devtools/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/03/devtools.md @@ -162,10 +162,10 @@ See also: To emulate locales, in the **Sensors** tool, select a location from the **Location** dropdown list. (To access the **Sensors** tool, [open the **Command Menu**](../../../command-menu/index.md) and type `Sensors`.) After you select a location, DevTools modifies the current default locale, which affects the following code: -* `Intl.*` APIs, for example: `new Intl.NumberFormat().resolvedOptions().locale` -* Other locale-aware JavaScript APIs such as `String.prototype.localeCompare` and `*.prototype.toLocaleString`, for example: `123_456..toLocaleString()` -* DOM APIs such as `navigator.language` and `navigator.languages` -* The [Accept-Language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) HTTP request header +* `Intl.*` APIs, for example: `new Intl.NumberFormat().resolvedOptions().locale` +* Other locale-aware JavaScript APIs such as `String.prototype.localeCompare` and `*.prototype.toLocaleString`, for example: `123_456..toLocaleString()` +* DOM APIs such as `navigator.language` and `navigator.languages` +* The [Accept-Language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) HTTP request header > [!NOTE] > Updates to `navigator.language` and `navigator.languages` aren't visible immediately, but only after the next navigation or page refresh. Changes to the `Accept-Language` HTTP header are only reflected for subsequent requests. @@ -208,9 +208,9 @@ Update: As of 2022, breakpoints are now indicated by a blue rectangle, instead o The **Sources** panel has new icons for breakpoints, conditional breakpoints, and logpoints: -* Breakpoints (![Breakpoint icon, a red circle](./devtools-images/breakpoint.png)) are represented by red circles. -* Conditional Breakpoints (![Conditional Breakpoint icon, a circle half red and half black](./devtools-images/conditional.png)) are represented by half-red half-white circles. -* Logpoints (![Logpoint icon, a red circle with a black arrow](./devtools-images/logpoint.png)) are represented by red circles with Console icons. +* Breakpoints (![Breakpoint icon, a red circle](./devtools-images/breakpoint.png)) are represented by red circles. +* Conditional Breakpoints (![Conditional Breakpoint icon, a circle half red and half black](./devtools-images/conditional.png)) are represented by half-red half-white circles. +* Logpoints (![Logpoint icon, a red circle with a black arrow](./devtools-images/logpoint.png)) are represented by red circles with Console icons. The motivation for the new icons was to make the UI more consistent with other GUI debugging tools (which usually color breakpoints red) and to make it easier to distinguish between the 3 features at a glance. diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md index 10352c65d7..ffae15ce7a 100644 --- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md @@ -55,14 +55,14 @@ To help enhance your website or app for the dual-screen and foldable devices, us * [Rendering the seam](/dual-screen/introduction#how-to-work-with-the-seam), which is the space between the two screens. -* Enabling experimental Web Platform APIs to access the new [CSS media screen-spanning feature](/dual-screen/web/css-media-spanning) and [JavaScript getWindowSegments API](/dual-screen/web/javascript-getwindowsegments). +* Enabling experimental Web Platform APIs to access the new [CSS media screen-spanning feature](/dual-screen/web/css-media-spanning) and [JavaScript getWindowSegments API](/dual-screen/web/javascript-getwindowsegments). ![Device emulation for Surface Duo](./devtools-images/surface-duo-device-emulation.png) Update: This feature has been released and is no longer experimental. See also: -* [Emulate dual-screen and foldable devices in Microsoft Edge DevTools](../../../device-mode/dual-screen-and-foldables.md) +* [Emulate dual-screen and foldable devices in Microsoft Edge DevTools](../../../device-mode/dual-screen-and-foldables.md) Chromium issue: [#1054281](https://crbug.com/1054281) @@ -186,8 +186,8 @@ To open the new **Media** tool, select **Customize and control DevTools** (`...` Before the new **Media** tool in DevTools, the logging and debug information about video players was located under the **Recent Players** setting. To open the **Recent Players** setting, go to `edge://media-internals` and then select the **Players** tool. View live content and inspect potential issues more quickly, such as investigating: -* Why frames are dropped. -* Why JavaScript is interacting with the player in an unexpected way. +* Why frames are dropped. +* Why JavaScript is interacting with the player in an unexpected way. @@ -244,13 +244,13 @@ When **Disable local fonts** is selected, DevTools ignores the `local()` fonts a ![Emulate missing local fonts](./devtools-images/disable-font.png) This feature is useful if you use two different copies of the same font during development, such as: -* A local font for your design tools. -* A web font for your code. +* A local font for your design tools. +* A web font for your code. Use **Disable local fonts** to make it easier to: -* Debug and measure loading performance and optimization of web fonts. -* Verify accuracy of your CSS `@font-face` rules. -* Discover differences between local versions installed on your device and a web font. +* Debug and measure loading performance and optimization of web fonts. +* Verify accuracy of your CSS `@font-face` rules. +* Discover differences between local versions installed on your device and a web font. Chromium issue: [#384968](https://crbug.com/384968) @@ -482,8 +482,8 @@ See also: The following text boxes now have **Clear** buttons: -* The filter text boxes in the **Styles** pane and **Network** tool. -* The DOM search text box in the **Elements** tool. +* The filter text boxes in the **Styles** pane and **Network** tool. +* The DOM search text box in the **Elements** tool. Click the **Clear** button to remove any inputted text. diff --git a/microsoft-edge/devtools/whats-new/2020/10/devtools.md b/microsoft-edge/devtools/whats-new/2020/10/devtools.md index 3242b870fc..46e6973394 100644 --- a/microsoft-edge/devtools/whats-new/2020/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/10/devtools.md @@ -31,10 +31,10 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. To meet your translation needs, the Microsoft Edge DevTools team is focused on improving translation quality. Starting in Microsoft Edge version 87, several strings and terms are locked and don't change, even when the rest of the DevTools are displayed in other languages. The list of affected strings and terms include the following: -* The strings in the **Lighthouse** tool. -* The term `service worker`. -* Some of the **Network** tool filters such as `URL`, `XHR`, `JS`, and `CSS`. -* The [$0](../../../console/utilities.md#recently-selected-element-or-javascript-object-0-4) Console Utilities API. +* The strings in the **Lighthouse** tool. +* The term `service worker`. +* Some of the **Network** tool filters such as `URL`, `XHR`, `JS`, and `CSS`. +* The [$0](../../../console/utilities.md#recently-selected-element-or-javascript-object-0-4) Console Utilities API. [$0](../../../console/utilities.md#recently-selected-element-or-javascript-object-0-4) is now available in the [Console](../../../console/index.md) for users on localized versions of the DevTools. Thank you to the global developer community for helping improve localization of the Microsoft Edge DevTools. Continue to [send feedback on localization quality](../../../contact.md) to improve support for DevTools in all locales. For real-time updates on this feature in the Chromium open-source project, see Issue [#1136655](https://crbug.com/1136655). @@ -72,8 +72,8 @@ The **Network Console** tool now has improved compatibility with the [Postman v2 The **Network Console** tool now supports the following actions: -* Save and export Collections and Environments. -* Edit and export sets of environment variables within the **Network Console** tool. +* Save and export Collections and Environments. +* Edit and export sets of environment variables within the **Network Console** tool. Entering a name for the new environment: @@ -96,13 +96,13 @@ For history, in the Chromium open-source project, see Issue [#1093687](https://c The Microsoft Edge DevTools now support the following features for inspecting, viewing, and debugging your CSS grids. -* Display a simplified grid overlay using the **Inspect** tool, or get more detailed information with persistent overlays. +* Display a simplified grid overlay using the **Inspect** tool, or get more detailed information with persistent overlays. -* To enable persistent grid overlays, click the grid icon next to a grid container element in the **Elements** tool, or click the grid in the **Layout** tool. +* To enable persistent grid overlays, click the grid icon next to a grid container element in the **Elements** tool, or click the grid in the **Layout** tool. -* You can enable persistent overlays for multiple grids. +* You can enable persistent overlays for multiple grids. -* The new **Layout** tool allows you to easily toggle grid overlays and configure the appearance and the content for each. +* The new **Layout** tool allows you to easily toggle grid overlays and configure the appearance and the content for each. The features are turned on by default. @@ -138,9 +138,9 @@ For history, in the Chromium open-source project, see Issue [#174309](https://cr The **Elements for Visual Studio Code** and **Network for Visual Studio Code** extensions are now merged into the new [Microsoft Edge Developer Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools) extension. Use the Microsoft Edge DevTools for the following activities without leaving Microsoft Visual Studio Code. -* Debug the DOM -* Edit CSS -* Inspect network traffic +* Debug the DOM +* Edit CSS +* Inspect network traffic With the extension, launch Microsoft Edge, connect to an existing instance of the browser, or use a headless browser directly from your editor. To start contributing and filing issues with your feedback about this extension, see the [Microsoft Edge Developer Tools for Visual Studio Code](https://github.com/Microsoft/vscode-edge-devtools) repo on GitHub. @@ -166,9 +166,9 @@ The following sections announce additional features available in Microsoft Edge In earlier versions of Microsoft Edge, there was no native WebAuthn debugging support. You needed physical authenticators to test your web application with the [Web Authentication API](https://w3c.github.io/webauthn). With the new **WebAuthn** tool, you can do the following without the use of any physical authenticators: -* Emulate authenticators. -* Customize attributes of authenticators. -* Inspect states of authenticators. +* Emulate authenticators. +* Customize attributes of authenticators. +* Inspect states of authenticators. You can emulate authenticators and debug the [Web Authentication API](https://w3c.github.io/webauthn) with the new **WebAuthn** tool. To open the **WebAuthn** tool, click **the Customize and control DevTools** (`...`) icon > **More tools** > **WebAuthn**. For real-time updates on this feature in the Chromium open-source project, see Issue [#1034663](https://crbug.com/1034663). diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md index fa9c300eb4..4a5b5ff030 100644 --- a/microsoft-edge/devtools/whats-new/2020/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/11/devtools.md @@ -61,9 +61,9 @@ You can now filter out third-party issues using a new checkbox. The filter func To help you see issues that are found by [webhint](https://webhint.io), the **Issues** tool now displays the following information: -* Improved code snippets. -* Links to other relevant panels. -* Links to documentation to help you fix problems in your website. +* Improved code snippets. +* Links to other relevant panels. +* Links to documentation to help you fix problems in your website. ![Issues tool](./devtools-images/issues-webhints.png) @@ -160,10 +160,10 @@ See also: In the **Network** tool, you can debug network requests that are run by service workers. (You can also open network requests from within the **Application** tool, instead of the **Network** tool.) In the **Timing** pane of the **Network** tool, for each request, DevTools displays the following information: -* The start of a request and duration of the bootstrap. -* Changes to service worker registration. -* The runtime of a `fetch` event handler. -* The runtime of all `fetch` events for loading a client. +* The start of a request and duration of the bootstrap. +* Changes to service worker registration. +* The runtime of a `fetch` event handler. +* The runtime of all `fetch` events for loading a client. ![Timing pane of the Network tool](./devtools-images/network-timing-service-worker.png) @@ -196,8 +196,8 @@ See also: In the **Network** tool, copy the property value of a network request using the new **Copy value** option. The property value is copied as a decoded JSON value. In previous versions of Microsoft Edge, you had to copy a value using one of the following actions: -* Highlight the entire text and copy it. -* Store the value as global variable, as applicable, and copy it from the DevTools **Console**. +* Highlight the entire text and copy it. +* Store the value as global variable, as applicable, and copy it from the DevTools **Console**. To copy the property value to your clipboard, see [Copy formatted response JSON to the clipboard](../../../network/reference.md#copy-formatted-response-json-to-the-clipboard) in _Network features reference_. @@ -227,7 +227,7 @@ For example, the red highlight below shows a custom multi-press keyboard shortcu ![Chords keyboard shortcuts](./devtools-images/multi-press-keyboard-shortcuts.png) -Update: This feature has been released and is no longer experimental. +Update: This feature has been released and is no longer experimental. See also: * [Edit the keyboard shortcut for a DevTools action](../../../customize/shortcuts.md#edit-the-keyboard-shortcut-for-a-devtools-action) in _Customize keyboard shortcuts_. @@ -409,8 +409,8 @@ See also: DevTools now consistently uses `kB` for displaying sizes of files and memory. Previously, DevTools mixed `kB` and `KiB`. -* `kB` or kilobyte (10^3 or 1000 bytes) -* `KiB` or kibibyte (2^10 or 1024 bytes) +* `kB` or kilobyte (10^3 or 1000 bytes) +* `KiB` or kibibyte (2^10 or 1024 bytes) For example, the **Network** tool previously used `kB` in the labels, but used `KiB` in calculations. Your feedback showed that this inconsistency caused confusion. diff --git a/microsoft-edge/devtools/whats-new/2021/01/devtools.md b/microsoft-edge/devtools/whats-new/2021/01/devtools.md index 34f8f968e1..883f9a4387 100644 --- a/microsoft-edge/devtools/whats-new/2021/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/01/devtools.md @@ -58,10 +58,10 @@ When you work with fonts in CSS, use the new visual Font Editor. You can define The **Font Editor** helps you to: -* Switch between units for different font properties. -* Switch between keywords for different font properties. -* Convert units. -* Generate accurate CSS code. +* Switch between units for different font properties. +* Switch between keywords for different font properties. +* Convert units. +* Generate accurate CSS code. To turn on this experiment, see [Settings](../../../customize/index.md#settings) > **Experiments** and select the checkbox next to **Enable new Font Editor tools within Styles pane**. @@ -220,12 +220,12 @@ See also: The [Microsoft Edge Developer Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools) extension version 1.1.2 for Microsoft Visual Studio Code has the following changes since the previous release. Microsoft Visual Studio Code updates extensions automatically. To manually update to version 1.1.2, see [Update an extension manually](https://code.visualstudio.com/docs/editor/extension-gallery#_update-an-extension-manually). -* Added a **Close instance** button to each item on the target list ([#248](https://github.com/microsoft/vscode-edge-devtools/pull/248)) -* Bumped Microsoft Edge DevTools version from 84.0.522.63 to [85.0.564.40](../../2020/06/devtools.md) ([#235](https://github.com/microsoft/vscode-edge-devtools/pull/235)) -* Included "Debugger for Microsoft Edge" as a dependency ([#233](https://github.com/microsoft/vscode-edge-devtools/pull/233)). +* Added a **Close instance** button to each item on the target list ([#248](https://github.com/microsoft/vscode-edge-devtools/pull/248)) +* Bumped Microsoft Edge DevTools version from 84.0.522.63 to [85.0.564.40](../../2020/06/devtools.md) ([#235](https://github.com/microsoft/vscode-edge-devtools/pull/235)) +* Included "Debugger for Microsoft Edge" as a dependency ([#233](https://github.com/microsoft/vscode-edge-devtools/pull/233)). -* Implemented settings option to change extension themes ([#229](https://github.com/microsoft/vscode-edge-devtools/pull/229)) +* Implemented settings option to change extension themes ([#229](https://github.com/microsoft/vscode-edge-devtools/pull/229)) You can file issues and contribute to the extension on the [vscode-edge-devtools GitHub repo](https://github.com/microsoft/vscode-edge-devtools). @@ -499,9 +499,9 @@ The [Advanced Perceptual Contrast Algorithm (APCA)](https://w3c.github.io/silver APCA is a new way to compute contrast. It is based on modern research on color perception. Compared to AA/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the following spatial properties of the text, color, and context. -* Spatial properties of text that include font weight and size. -* Spatial properties of color that include perceived contrast between text and background. -* Spatial properties of context that include ambient light, surroundings, and intended purpose. +* Spatial properties of text that include font weight and size. +* Spatial properties of color that include perceived contrast between text and background. +* Spatial properties of context that include ambient light, surroundings, and intended purpose. To turn on this experiment, select **Settings** > **Experiments** and then select the checkbox next to **Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines**. To view the history of this feature in the Chromium open-source project, see Issue [1121900](https://crbug.com/1121900). diff --git a/microsoft-edge/devtools/whats-new/2021/02/devtools.md b/microsoft-edge/devtools/whats-new/2021/02/devtools.md index cd2e00a05c..9c5e35a3ef 100644 --- a/microsoft-edge/devtools/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/02/devtools.md @@ -48,9 +48,9 @@ To turn on the experiment, see [Turning an experiment on or off](../../../experi The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do one of the following: -* Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. -* Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). -* [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. +* Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. +* Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). +* [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. Then hover over each outlined region of DevTools: @@ -60,9 +60,9 @@ To turn off Tooltips, press **Esc**. Update: This feature has been released and is no longer experimental. Note: As of May 2022, tooltips aren't supported from the **Activity Bar**. diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md index 9cd28d96d2..a3d1662643 100644 --- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md @@ -61,9 +61,9 @@ See also: The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do any of the following: -* Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. -* Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). -* [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. +* Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. +* Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). +* [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. Then hover over each outlined region of DevTools: @@ -89,9 +89,9 @@ Note: As of May 2022, tooltips aren't supported from the **Activity Bar**. In Microsoft Edge version 91 or later, if you're a Progressive Web App or service worker developer, display the update lifecycle of your service workers as a timeline in the **Application** tool. This feature helps you understand the time your service worker spends in each of the following stages: -* **Install** -* **Wait** -* **Activate** +* **Install** +* **Wait** +* **Activate** ![View the Timeline in the Update Cycle for your service worker](./devtools-images/application-service-workers-update-cycle-version-73-focus.png) @@ -108,7 +108,7 @@ See also: -In [Microsoft Edge version 90](../02/devtools.md) or earlier, if the Web App Manifest of your PWA included a non-square icon, a warning was displayed in the **Errors and Warnings** section for each non-square icon. In Microsoft Edge version 91 or later, the **Manifest** section in the **Application** tool displays no warnings if you provide at least one square icon. If you don't provide any square icons, the following warning message appears: +In [Microsoft Edge version 90](../02/devtools.md) or earlier, if the Web App Manifest of your PWA included a non-square icon, a warning was displayed in the **Errors and Warnings** section for each non-square icon. In Microsoft Edge version 91 or later, the **Manifest** section in the **Application** tool displays no warnings if you provide at least one square icon. If you don't provide any square icons, the following warning message appears: ```console Most operating systems require square icons. Please include at least one square icon in the array. @@ -191,13 +191,13 @@ The [Microsoft Edge Tools for Visual Studio Code extension](https://marketplace. Version 1.1.7 includes the following bug fixes and improvements: -* Updated the reliability of target closure. +* Updated the reliability of target closure. -* Updated the side panel to automatically refreshes when you debug targets that are created or destroyed. +* Updated the side panel to automatically refreshes when you debug targets that are created or destroyed. -* Added a new right-click menu that gives you faster access to the extension settings and the latest Changelog. +* Added a new right-click menu that gives you faster access to the extension settings and the latest Changelog. -* Updated and simplified the release of extension documentation including the newest features. +* Updated and simplified the release of extension documentation including the newest features. To manually update to version 1.1.7, see [Update an extension manually](https://code.visualstudio.com/docs/editor/extension-gallery#_update-an-extension-manually). You can file issues and contribute to the extension on the [vscode-edge-devtools GitHub repo](https://github.com/microsoft/vscode-edge-devtools). @@ -269,11 +269,11 @@ See also: In the **Elements** tool, image previews have been enhanced to display more information, including the following details: -* Rendered size -* Rendered aspect ratio -* Intrinsic size -* Intrinsic aspect ratio -* File size +* Rendered size +* Rendered aspect ratio +* Intrinsic size +* Intrinsic aspect ratio +* File size ![Image preview with aspect ratio information in the Element tool](./devtools-images/elements-inspect-image-src-hover-preview.png) diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md index 51f4b934a8..af44df550d 100644 --- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md @@ -57,11 +57,11 @@ See also: Tabs for each tool have been reformatted to reduce the chance of accidentally closing a tool. On each tab in the main toolbar and in the toolbar of the **Drawer** (now **Quick View** panel), the following have been added: -* Spacing around the tab. -* Spacing around the close (`x`) button in the tab. -* A background color when hovering over the tab. -* A tooltip for the close (`x`) button of the tab. -* Higher contrast for the close (`x`) button of the tab. +* Spacing around the tab. +* Spacing around the close (`x`) button in the tab. +* A background color when hovering over the tab. +* A tooltip for the close (`x`) button of the tab. +* Higher contrast for the close (`x`) button of the tab. For example, when you are in the **Performance** tool and you hover over the **Network** tool's tab, these improvements help prevent accidentally closing the **Network** tool. @@ -151,11 +151,11 @@ You can file issues and contribute to the extension on the [vscode-edge-devtools Version 1.1.8 of the [Microsoft Edge Developer Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools) extension now features a simpler way to start a new instance of Microsoft Edge, by presenting instructions, buttons, links, and a documentation page to guide you. -* When you select the **Microsoft Edge Tools** button in the **Activity Bar** of Visual Studio Code, the **Microsoft Edge Tools: Targets** panel now presents explanatory text, buttons, and links to guide you, instead of a blank panel. +* When you select the **Microsoft Edge Tools** button in the **Activity Bar** of Visual Studio Code, the **Microsoft Edge Tools: Targets** panel now presents explanatory text, buttons, and links to guide you, instead of a blank panel. -* When you open a new instance of Microsoft Edge from within Visual Studio Code, Microsoft Edge now shows a start page that explains how to use the Developer Tools extension, instead of a blank page. +* When you open a new instance of Microsoft Edge from within Visual Studio Code, Microsoft Edge now shows a start page that explains how to use the Developer Tools extension, instead of a blank page. -* The **Microsoft Edge Tools: Targets** panel now has a **Generate launch.json** button and instructions, to help launch your project for debugging in Microsoft Edge. +* The **Microsoft Edge Tools: Targets** panel now has a **Generate launch.json** button and instructions, to help launch your project for debugging in Microsoft Edge. See also: * [Microsoft Edge DevTools extension for Visual Studio Code](../../../../visual-studio-code/microsoft-edge-devtools-extension.md) @@ -191,8 +191,8 @@ The Console now supports redeclaration of `const` variables across separate REPL Refer to the example below. `const` redeclaration is supported across separate REPL scripts (refer to variable `a`). Note that the following scenarios aren't supported, by design: -* `const` redeclaration of page scripts isn't allowed in REPL scripts. -* `const` redeclaration within the same REPL script isn't allowed (refer to variable `b`). +* `const` redeclaration of page scripts isn't allowed in REPL scripts. +* `const` redeclaration within the same REPL script isn't allowed (refer to variable `b`). ![Redeclaring a const variable is allowed in the console](./devtools-images/support-for-const-redeclaration.png) diff --git a/microsoft-edge/devtools/whats-new/2021/07/devtools.md b/microsoft-edge/devtools/whats-new/2021/07/devtools.md index d3e7ba6871..034629f959 100644 --- a/microsoft-edge/devtools/whats-new/2021/07/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/07/devtools.md @@ -36,17 +36,17 @@ In addition to the existing light and dark themes, Microsoft Edge DevTools now s The supported Visual Studio Code themes are: Light themes: -* Solarized Light -* Quiet Light +* Solarized Light +* Quiet Light Dark themes: -* Abyss -* Kimbie Dark -* Monokai -* Monokai Dimmed -* Solarized Dark -* Red -* Tomorrow Night Blue +* Abyss +* Kimbie Dark +* Monokai +* Monokai Dimmed +* Solarized Dark +* Red +* Tomorrow Night Blue @@ -82,9 +82,9 @@ If you use JavaScript debugging in Visual Studio Code, you can now launch the ** This feature integrates DOM and CSS debugging with JavaScript debugging in Visual Studio Code. If you don't have the DevTools extension installed, when you select the **Inspect** button, Visual Studio Code prompts you to install the extension. Other new features are: -* The tools refresh automatically when you switch between different debugging targets. -* Several bug fixes. -* More detailed documentation of the extension. +* The tools refresh automatically when you switch between different debugging targets. +* Several bug fixes. +* More detailed documentation of the extension. For more details about improvements and fixes, check the [changelog file](https://github.com/microsoft/vscode-edge-devtools/blob/main/CHANGELOG.md) in the `vscode-edge-devtools` repo. diff --git a/microsoft-edge/devtools/whats-new/2021/09/devtools.md b/microsoft-edge/devtools/whats-new/2021/09/devtools.md index 4707de6a34..88822341c5 100644 --- a/microsoft-edge/devtools/whats-new/2021/09/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/09/devtools.md @@ -39,11 +39,11 @@ See [Search the web for a Console error message string](../../../console/index.m In the latest version of the Microsoft Edge DevTools extension for Visual Studio Code, we released the following updates or new features: -* Shares the same codebase that's used for the browser-based DevTools. -* Supports themes that ship with Visual Studio Code. -* Adds a **Helpful Links** section in the **Microsoft Edge Tools** sidebar, with buttons for **Documentation**, **Report a Bug**, and **Request a Feature**. -* Adds a **Close instance** (`X`) button in the **Microsoft Edge Tools** > **Targets** pane, to close the browser that was opened by the extension. -* Adds support for JavaScript Debugger connections to remote workspaces. +* Shares the same codebase that's used for the browser-based DevTools. +* Supports themes that ship with Visual Studio Code. +* Adds a **Helpful Links** section in the **Microsoft Edge Tools** sidebar, with buttons for **Documentation**, **Report a Bug**, and **Request a Feature**. +* Adds a **Close instance** (`X`) button in the **Microsoft Edge Tools** > **Targets** pane, to close the browser that was opened by the extension. +* Adds support for JavaScript Debugger connections to remote workspaces. The extension running inside Visual Studio Code, matching the dark theme of Visual Studio Code, and a new Helpful Links sidebar: diff --git a/microsoft-edge/devtools/whats-new/2021/10/devtools.md b/microsoft-edge/devtools/whats-new/2021/10/devtools.md index 1941ca8859..312b8157af 100644 --- a/microsoft-edge/devtools/whats-new/2021/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/10/devtools.md @@ -59,8 +59,8 @@ See also: Starting with [Microsoft Edge version 92](../05/devtools.md#user-agent-client-hints-for-devices-in-the-network-conditions-tab), you can specify User-Agent Client Hints. You can specify User-Agent Client Hints in either of two places: -* [When defining the user agent string in the Network conditions tool](../../../device-mode/override-user-agent.md). -* [When adding a custom device to emulate in Settings](../../../device-mode/index.md#add-a-custom-mobile-device). +* [When defining the user agent string in the Network conditions tool](../../../device-mode/override-user-agent.md). +* [When adding a custom device to emulate in Settings](../../../device-mode/index.md#add-a-custom-mobile-device). In Microsoft Edge prior to version 95, when adding a custom device to emulate from the **Devices** section of **Settings**, selecting the **User agent client hints** button with the keyboard caused the incorrect UI item to be activated. Instead of expanding the **User agent client hints** section for you to fill it in, it selected the **Add** button. The device you were starting to define was immediately added, using empty fields in the **User agent client hints** section. @@ -109,8 +109,8 @@ The following are some of the additional features that are available in Microsof DevTools improves the display of properties by: -* Always bolding and sorting own properties first, in the **Console**, in the **Sources** tool, and in the **Properties** tab in the **Elements** tool. (An _own property_ is a property that's defined directly on the object.) -* Flattening the properties display in the **Properties** pane. +* Always bolding and sorting own properties first, in the **Console**, in the **Sources** tool, and in the **Properties** tab in the **Elements** tool. (An _own property_ is a property that's defined directly on the object.) +* Flattening the properties display in the **Properties** pane. For example, the snippet below creates an [URL](https://developer.mozilla.org/docs/Web/API/URL) object `link` with two own properties: `user` and `access`, and then updates the value of an inherited property, `search`: diff --git a/microsoft-edge/devtools/whats-new/2021/11/devtools.md b/microsoft-edge/devtools/whats-new/2021/11/devtools.md index 14ba560b15..0baa79934e 100644 --- a/microsoft-edge/devtools/whats-new/2021/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/11/devtools.md @@ -38,7 +38,7 @@ This UI is still in development and may change in future versions of Microsoft E ![Focus Mode, including the Activity Bar](./devtools-images/focus-mode.png) See also: -* [DevTools: Focus Mode UI](https://github.com/MicrosoftEdge/DevTools/blob/main/explainers/FocusMode/explainer.md) in the `MSEdgeExplainers` repo. +* [DevTools: Focus Mode UI](https://github.com/MicrosoftEdge/DevTools/blob/main/explainers/FocusMode/explainer.md) in the `MSEdgeExplainers` repo. @@ -133,11 +133,11 @@ In previous versions of Microsoft Edge, turning on the **Open source files in Vi In Microsoft Edge version 96, the **Open source files in Visual Studio Code** experiment now integrates better with the **Sources** tool. -* If the **Sources** tool is open and you then turn on the **Open source files in Visual Studio Code** experiment, setting breakpoints or opening files now opens the **Sources** tool, rather than directing you to Visual Studio Code or to documentation to configure the experiment correctly. +* If the **Sources** tool is open and you then turn on the **Open source files in Visual Studio Code** experiment, setting breakpoints or opening files now opens the **Sources** tool, rather than directing you to Visual Studio Code or to documentation to configure the experiment correctly. ![If the Sources tool is open, setting breakpoints or opening files opens the Sources tool, even if you then turn on the 'Open source files in Visual Studio Code' experiment](./devtools-images/sources-tool-versus-open-in-vs-code.png) -* As with earlier versions of Microsoft Edge, if the **Sources** tool isn't open in DevTools and you then turn on the **Open source files in Visual Studio Code** experiment, setting breakpoints or opening files from tools other than the **Sources** tool opens the file in Visual Studio Code. +* As with earlier versions of Microsoft Edge, if the **Sources** tool isn't open in DevTools and you then turn on the **Open source files in Visual Studio Code** experiment, setting breakpoints or opening files from tools other than the **Sources** tool opens the file in Visual Studio Code. See also: * [Opening source files in Visual Studio Code](../../../sources/opening-sources-in-vscode.md) - how DevTools integrates with Visual Studio Code. diff --git a/microsoft-edge/devtools/whats-new/2022/01/devtools.md b/microsoft-edge/devtools/whats-new/2022/01/devtools.md index 41d0117be4..30415761b2 100644 --- a/microsoft-edge/devtools/whats-new/2022/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2022/01/devtools.md @@ -58,13 +58,13 @@ For general information about this extension, see [Microsoft Edge DevTools exten The current version of the Microsoft Edge DevTools extension for Visual Studio Code fixes several issues that were reported by the community: -* The list of emulated devices in the screencast is now the same as the list of emulated devices in the browser. +* The list of emulated devices in the screencast is now the same as the list of emulated devices in the browser. -* Device emulation now adds the correct user agent string, to trigger the correct display. +* Device emulation now adds the correct user agent string, to trigger the correct display. -* You now get a warning when you use a deprecated launch version of Microsoft Edge, indicating that you'd miss out on features. +* You now get a warning when you use a deprecated launch version of Microsoft Edge, indicating that you'd miss out on features. -* You can now provide arguments for the launched browser instance, in case you need to have a special setup: +* You can now provide arguments for the launched browser instance, in case you need to have a special setup: ![Extension settings to specify launch arguments for Microsoft Edge](./devtools-images/extension-settings-launch-arguments.png) diff --git a/microsoft-edge/devtools/whats-new/2022/03/devtools.md b/microsoft-edge/devtools/whats-new/2022/03/devtools.md index 5b96b27609..087a855eaf 100644 --- a/microsoft-edge/devtools/whats-new/2022/03/devtools.md +++ b/microsoft-edge/devtools/whats-new/2022/03/devtools.md @@ -36,9 +36,9 @@ To try this feature: ![The 'Symbol Server' page in DevTools Settings, where you enter your Azure DevOps personal access token](./devtools-images/ado-pat-devtools.png) See also: -* [Map the processed code to your original source code, for debugging](../../../javascript/source-maps.md) -* [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) -* [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) +* [Map the processed code to your original source code, for debugging](../../../javascript/source-maps.md) +* [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) +* [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) diff --git a/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md b/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md index ba528b6289..5c6bacaff3 100644 --- a/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md +++ b/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md @@ -26,10 +26,10 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. The Console is one of the most popular tools in DevTools. You can now access the Console tool in the Microsoft Edge Developer Tools extension for Visual Studio Code. This integrated DevTools Console allows you to see your log messages right next to your code. Using the Console, you can also: -* Try out some JavaScript statements. -* Access the window object. -* Call the methods of the `Console` object, as described in [Console object API Reference](../../../console/api.md). -* Use the Console utilities to access the DOM, as described in [Console tool utility functions and selectors](../../../console/utilities.md). +* Try out some JavaScript statements. +* Access the window object. +* Call the methods of the `Console` object, as described in [Console object API Reference](../../../console/api.md). +* Use the Console utilities to access the DOM, as described in [Console tool utility functions and selectors](../../../console/utilities.md). You can use the Console as the main tool, or use it together with the **Elements** and **Network** tools. diff --git a/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md b/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md index d8b66384f7..776ba36f38 100644 --- a/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md +++ b/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md @@ -109,8 +109,8 @@ Also, you can now press **Ctrl** to hide the Inspect tool's overlay while you mo For the history of this feature in the Chromium open-source project, see Issue [1316208](https://crbug.com/1316208). See also: -* [Persisting the Inspect tool's tooltip and grid color overlay](../../../css/inspect.md#persisting-the-inspect-tools-tooltip-and-grid-color-overlay) in _Analyze pages using the Inspect tool_. -* [Persisting the Inspect tool's tooltip and grid color overlay](../../../accessibility/navigation.md#persisting-the-inspect-tools-tooltip-and-grid-color-overlay) in _Navigate DevTools with assistive technology_. +* [Persisting the Inspect tool's tooltip and grid color overlay](../../../css/inspect.md#persisting-the-inspect-tools-tooltip-and-grid-color-overlay) in _Analyze pages using the Inspect tool_. +* [Persisting the Inspect tool's tooltip and grid color overlay](../../../accessibility/navigation.md#persisting-the-inspect-tools-tooltip-and-grid-color-overlay) in _Navigate DevTools with assistive technology_. @@ -120,9 +120,9 @@ See also: In previous versions of Microsoft Edge, the following items didn't render correctly in high-contrast mode: -* Dropdown menus in the **Issues** tool. -* Buttons in the **Detached Elements** tool. -* The **Activity Bar** in Focus Mode. +* Dropdown menus in the **Issues** tool. +* Buttons in the **Detached Elements** tool. +* The **Activity Bar** in Focus Mode. In Microsoft Edge 102, these issues have been fixed. diff --git a/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md b/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md index f6d60f00ba..56c6c7e96c 100644 --- a/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md +++ b/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md @@ -26,8 +26,8 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. In Microsoft Edge 103, when taking a heap snapshot in the **Memory** tool, there are two new node types: -* **BigInt** - Used to represent and manipulate values that are too large to be represented by the **Number** node type. See [BigInt](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt). -* **Object shape** - Refers to the hidden classes and descriptor arrays that V8 (the JavaScript engine of Microsoft Edge) uses to understand and index the properties on objects. See [HiddenClasses and DescriptorArrays](https://v8.dev/blog/fast-properties#hiddenclasses-and-descriptorarrays) in _Fast properties in V8_. +* **BigInt** - Used to represent and manipulate values that are too large to be represented by the **Number** node type. See [BigInt](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt). +* **Object shape** - Refers to the hidden classes and descriptor arrays that V8 (the JavaScript engine of Microsoft Edge) uses to understand and index the properties on objects. See [HiddenClasses and DescriptorArrays](https://v8.dev/blog/fast-properties#hiddenclasses-and-descriptorarrays) in _Fast properties in V8_. ![BigInt and Object Shape memory node types](devtools-103-images/memory-node-types.png) @@ -63,12 +63,12 @@ See also: In the new **Focus Mode** DevTools UI, various bugs affecting controls and keyboard shortcuts for DevTools have been resolved: -* Improved behavior of collapsible panes such as **Styles** in the **Elements** tool. -* Fixed some instances in which the name of an open tool wasn't visible. -* Improved reliability of **Quick View** controls. -* Improved behavior of opening DevTools by using keyboard shortcuts. -* Fixed an issue with navigating to a specific line of code in the **Sources** tool by using keyboard shortcuts. -* Restored the keyboard shortcut to open **Search** in the **Quick View** panel, which is **Ctrl+Shift+F** (Windows, Linux) or **Command+Option+F** (macOS): +* Improved behavior of collapsible panes such as **Styles** in the **Elements** tool. +* Fixed some instances in which the name of an open tool wasn't visible. +* Improved reliability of **Quick View** controls. +* Improved behavior of opening DevTools by using keyboard shortcuts. +* Fixed an issue with navigating to a specific line of code in the **Sources** tool by using keyboard shortcuts. +* Restored the keyboard shortcut to open **Search** in the **Quick View** panel, which is **Ctrl+Shift+F** (Windows, Linux) or **Command+Option+F** (macOS): ![The Search keyboard shortcut opens the Search tool in the Quick View panel](devtools-103-images/focus-mode-search-shortcut.png) @@ -110,11 +110,11 @@ See also: In Microsoft Edge 103, the **Welcome** tool has a new, modern design with improved and expanded content. It's easier than ever to find documentation, videos, and information about new features and bug fixes. -* In the **Learn** section, use the links to quickly jump to documentation for common tasks in DevTools. +* In the **Learn** section, use the links to quickly jump to documentation for common tasks in DevTools. -* In the **What's New** section, find out about the latest changes, new features, and bug fixes. +* In the **What's New** section, find out about the latest changes, new features, and bug fixes. -* In both sections, learn about existing and new web development features through our new video series, [Videos about web development with Microsoft Edge](../../../../dev-videos/index.md). +* In both sections, learn about existing and new web development features through our new video series, [Videos about web development with Microsoft Edge](../../../../dev-videos/index.md). ![The redesigned Welcome tool](devtools-103-images/welcome-tool.png) diff --git a/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md b/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md index 36196e6c74..94aeee3d0e 100644 --- a/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md +++ b/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md @@ -82,8 +82,8 @@ See also: In previous versions of Microsoft Edge, when inspecting web socket traffic in the Network tool, the arrows representing whether a message was sent from the client or server were not rendering correctly. In Microsoft Edge 104, this issue has been fixed. Thank you for sending us your feedback about this issue! -* Green up-arrows (![Green up arrow](./devtools-104-images/green-up-arrow.png)) represent messages sent by the client. -* Red down-arrows (![Red down arrow](./devtools-104-images/red-down-arrow.png)) represent messages sent by the server. +* Green up-arrows (![Green up arrow](./devtools-104-images/green-up-arrow.png)) represent messages sent by the client. +* Red down-arrows (![Red down arrow](./devtools-104-images/red-down-arrow.png)) represent messages sent by the server. ![Network tool](./devtools-104-images/network-tool-ws-arrows.png) diff --git a/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md b/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md index 8ac5524e05..d0c19e8574 100644 --- a/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md +++ b/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md @@ -40,8 +40,8 @@ To enable the Command Palette experiment: Note the keyboard shortcut, which is shown in the **Command Palette** section on the `edge://flags` page. + * In Microsoft Edge 106 and most releases of 107, the keyboard shortcut is **Ctrl+Shift+Spacebar**. + * In Microsoft Edge 108 and later, the shortcut is **Ctrl+Q**. --> 1. Click the **Restart** button, which appears in the lower right when you select **Enabled**. diff --git a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md index 26ebe19da1..eab21b80cd 100644 --- a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md @@ -27,9 +27,9 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. In Microsoft Edge 109, you can turn on new settings to export enhanced traces from the **Performance** and **Memory** tools. These enhanced traces include more information, such as: -* Messages logged to the Console. -* The JavaScript that was running on the page at the time of recording. -* Snapshots of the DOM. +* Messages logged to the Console. +* The JavaScript that was running on the page at the time of recording. +* Snapshots of the DOM. When saving performance profiles, heap snapshots, allocation timelines, or allocation sampling, you can now export a new `.devtools` file format. When you then import the `.devtools` file, a new instance of DevTools opens, with the state of your **Elements**, **Console**, and **Sources** tools preserved. These enhanced traces offer a powerful new way to collaborate and share the information in your DevTools. @@ -105,9 +105,9 @@ See also: In Microsoft Edge 109, the **Allocation sampling** profiling type in the **Memory** tool now has two new options: -* **Include objects discarded by major GC**. +* **Include objects discarded by major GC**. -* **Include objects discarded by minor GC**. +* **Include objects discarded by minor GC**. Without selecting these options, the **Memory** tool will continue to work as it did before, reporting allocations that are still alive at the end of the profiling session. In this mode, objects that are generated and garbage-collected (GC'd) and then disappear aren't tracked by allocation sampling. diff --git a/microsoft-edge/dualengine/intro.md b/microsoft-edge/dualengine/intro.md index 36196c6886..dcf51bcdbe 100644 --- a/microsoft-edge/dualengine/intro.md +++ b/microsoft-edge/dualengine/intro.md @@ -24,13 +24,13 @@ See also: The following programming environments are supported: -* Win32 C/C++ +* Win32 C/C++ DualEngine APIs can be used on the following versions of Windows: -* Windows 11 -* Windows 10 -* Windows Server 2022 +* Windows 11 +* Windows 10 +* Windows Server 2022 diff --git a/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md b/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md index 7ade686a37..a80d9b9cea 100644 --- a/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md +++ b/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md @@ -52,8 +52,8 @@ The following examples use `1.0` as the version, and `aaaaaaaabbbbbbbbccccccccdd To distribute your extension using the Windows registry: 1. Find or create the following key in the registry: - * 32-bit Windows: `HKEY_LOCAL_MACHINE\Software\Microsoft\Edge\Extensions` - * 64-bit Windows: `HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Edge\Extensions` + * 32-bit Windows: `HKEY_LOCAL_MACHINE\Software\Microsoft\Edge\Extensions` + * 64-bit Windows: `HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Edge\Extensions` 1. Create a new key, or folder, under **Extensions** with the same name as the ID of your extension. For example, create the key with the name `aaaaaaaabbbbbbbbccccccccdddddddd`. @@ -84,7 +84,7 @@ To distribute your extension by using a preferences JSON file: 1. Depending on your operating system, save the JSON file to one of the following folders: - * **macOS** + * **macOS** * User-specific: `~USERNAME/Library/Application Support/Microsoft Edge/External Extensions/` * For all users: `/Library/Application Support/Microsoft/Edge/External Extensions/` @@ -97,13 +97,13 @@ To distribute your extension by using a preferences JSON file: * Every directory in the path isn't `world` writable. * The path must be free of symbolic links. - * **Linux** + * **Linux** * User-specific: `~/.config/microsoft-edge/External Extensions/` * For all users: `/usr/share/microsoft-edge/extensions/` 1. Depending on your scenario, copy the appropriate code that follows, into your preferences JSON file. - * Applies to Linux only. If you install from a file, specify the location and version in `external_crx` and `external_version`: + * Applies to Linux only. If you install from a file, specify the location and version in `external_crx` and `external_version`: ```json { @@ -112,7 +112,7 @@ To distribute your extension by using a preferences JSON file: } ``` - * Applies to macOS and Linux. If you install from an `update_url`, specify the update URL in `external_update_url`. + * Applies to macOS and Linux. If you install from an `update_url`, specify the update URL in `external_update_url`. Copy the following code into your preferences JSON file when installing from local `.crx` files on Linux only: @@ -122,7 +122,7 @@ To distribute your extension by using a preferences JSON file: } ``` - * Copy the following code to your preferences JSON file when installing from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) on macOS and Linux: + * Copy the following code to your preferences JSON file when installing from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) on macOS and Linux: ```json { diff --git a/microsoft-edge/extensions/developer-guide/api-support.md b/microsoft-edge/extensions/developer-guide/api-support.md index b4227adfd0..fd3c6fcc7b 100644 --- a/microsoft-edge/extensions/developer-guide/api-support.md +++ b/microsoft-edge/extensions/developer-guide/api-support.md @@ -112,11 +112,11 @@ These Extensions APIs are not supported for Microsoft Edge. ## Additional considerations for supported APIs -* The user must be signed into Microsoft Edge using a Microsoft account (MSA) or Microsoft Entra ID account to use `chrome.identity.getProfileUserInfo`. If the user is signed into Microsoft Edge using an on-premises Microsoft Entra ID account, the API returns `null` for the email and ID values. +* The user must be signed into Microsoft Edge using a Microsoft account (MSA) or Microsoft Entra ID account to use `chrome.identity.getProfileUserInfo`. If the user is signed into Microsoft Edge using an on-premises Microsoft Entra ID account, the API returns `null` for the email and ID values. A Microsoft account (MSA) is an Outlook.com, Live.com, or Hotmail.com account. -* Microsoft Edge doesn't support extensions that use Chrome Web Store payments because it uses `identity.getAuthtoken` to request tokens for signed-in users. These tokens are sent to the REST-based licensing API. +* Microsoft Edge doesn't support extensions that use Chrome Web Store payments because it uses `identity.getAuthtoken` to request tokens for signed-in users. These tokens are sent to the REST-based licensing API. diff --git a/microsoft-edge/extensions/developer-guide/csp.md b/microsoft-edge/extensions/developer-guide/csp.md index eeb978ddfe..ba503fa17b 100644 --- a/microsoft-edge/extensions/developer-guide/csp.md +++ b/microsoft-edge/extensions/developer-guide/csp.md @@ -131,11 +131,11 @@ The first restriction wipes out a huge class of cross-site scripting attacks by But three things must change in order to make this work the way you expect it to: -* The `clickHandler` definition must be moved into an external JavaScript file (`popup.js` may be a good target). +* The `clickHandler` definition must be moved into an external JavaScript file (`popup.js` may be a good target). -* The inline event handler definitions must be rewritten in terms of `addEventListener` and extracted into `popup.js`. If you're currently starting your program using code like ``, consider replacing it by hooking into the `DOMContentLoaded` event of the document, or the `load` event of the window, depending on your requirements. Use the former, since it generally triggers more quickly. +* The inline event handler definitions must be rewritten in terms of `addEventListener` and extracted into `popup.js`. If you're currently starting your program using code like ``, consider replacing it by hooking into the `DOMContentLoaded` event of the document, or the `load` event of the window, depending on your requirements. Use the former, since it generally triggers more quickly. -* The `setTimeout` call must be rewritten to avoid converting the string `"awesome(); totallyAwesome()"` into JavaScript for running. +* The `setTimeout` call must be rewritten to avoid converting the string `"awesome(); totallyAwesome()"` into JavaScript for running. Those changes could look something like the following: diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png new file mode 100644 index 0000000000..4c18fa0bd1 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png new file mode 100644 index 0000000000..81b2a7b1d9 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png deleted file mode 100644 index 31faa3a563..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png deleted file mode 100644 index af74fde60d..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png deleted file mode 100644 index 826bc55a51..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png deleted file mode 100644 index 9fb4391a2a..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png deleted file mode 100644 index 9c18e9be67..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png deleted file mode 100644 index fa4ea0a873..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png deleted file mode 100644 index 659cfed9d2..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png deleted file mode 100644 index 2249ad9b1c..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/icon.png new file mode 100644 index 0000000000..6635536171 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-images/icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png deleted file mode 100644 index bb0dd0a881..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png deleted file mode 100644 index a7bef75d8f..0000000000 Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png and /dev/null differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/alert.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/alert.png new file mode 100644 index 0000000000..be823e49e9 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/alert.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-icon.png new file mode 100644 index 0000000000..985f23d234 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-tool-coordinates.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-tool-coordinates.png new file mode 100644 index 0000000000..cc181893b0 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/console-tool-coordinates.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-icon.png new file mode 100644 index 0000000000..467fcbf8a7 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tab-activity-bar.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tab-activity-bar.png new file mode 100644 index 0000000000..81b2a7b1d9 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tab-activity-bar.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool-coordinates.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool-coordinates.png new file mode 100644 index 0000000000..b47d949307 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool-coordinates.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool.png new file mode 100644 index 0000000000..e47c01cc27 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/custom-tool.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/edge-extensions-page.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/edge-extensions-page.png new file mode 100644 index 0000000000..00fb8388f6 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/edge-extensions-page.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/load-unpacked-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/load-unpacked-icon.png new file mode 100644 index 0000000000..f1e0abd661 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/load-unpacked-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/memory-updating.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/memory-updating.png new file mode 100644 index 0000000000..4da1b21016 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/memory-updating.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/modified-custom-tool.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/modified-custom-tool.png new file mode 100644 index 0000000000..06c14f83b0 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/modified-custom-tool.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/more-tools-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/more-tools-icon.png new file mode 100644 index 0000000000..dd58c0da2a Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/more-tools-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/panel-html.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/panel-html.png new file mode 100644 index 0000000000..162ba39121 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/panel-html.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/reload-modified-sample.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/reload-modified-sample.png new file mode 100644 index 0000000000..bef45430cd Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/reload-modified-sample.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/settings-and-more-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/settings-and-more-icon.png new file mode 100644 index 0000000000..69fd7b1251 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/settings-and-more-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/show-in-folder-icon.png b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/show-in-folder-icon.png new file mode 100644 index 0000000000..6e80bf7214 Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-sample-images/show-in-folder-icon.png differ diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-sample.md b/microsoft-edge/extensions/developer-guide/devtools-extension-sample.md new file mode 100644 index 0000000000..45e6f3b7ef --- /dev/null +++ b/microsoft-edge/extensions/developer-guide/devtools-extension-sample.md @@ -0,0 +1,277 @@ +--- +title: "Sample: Custom DevTools tool" +description: Microsoft Edge extension that adds a Custom tool in DevTools. Sends messages between the inspected webpage and DevTools. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: extensions +ms.date: 05/06/2026 +--- +# Sample: Custom DevTools tool + + +The sample "Custom DevTools tool" is a Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools, which has its own tab in the **Activity Bar**. + + + +## Introduction + +The Custom DevTools Tool adds a **Custom** tool tab and panel in DevTools within Microsoft Edge: + +![Custom tool](./devtools-extension-sample-images/custom-tool.png) + +The **Custom** tool displays memory information, and sends messages between the inspected webpage and the panel in DevTools. + +The **Custom** DevTools tool calls the DevTools API to display memory information. + +The webpage under inspection, and the **Custom** DevTools tool, send messages to each other. + +Use this article to download, install, and run the sample. To learn more about the code in this sample, see [Add a custom tool in Microsoft Edge DevTools](./devtools-extension.md). + + + +## Step 1: Download the sample + +If not done yet, download the "main" branch of the Demos repo, or clone (or fork and clone) the repo. Downloading the repo is simplest, and is described below. + +Download the "main" branch of the Demos repo, as follows: + +1. In Microsoft Edge, go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo. + +1. Click the down arrow in the **Code** button, and then select **Download ZIP**. + +1. In Microsoft Edge, the **Downloads** dialog shows `Demos-main.zip`. "-main" is added, meaning a static snapshot of the "main" branch of the repo. + +1. Hover to the right of `Demos-main.zip`, and then click the **Show in folder** ![The Show in folder icon](./devtools-extension-sample-images/show-in-folder-icon.png) button. + + File Explorer opens, displaying the **Downloads** folder. + +1. Right-click `Demos-main.zip`, and then select **Extract all**. + + The **Extract Compressed (Zipped) Folders** dialog opens. + +1. Click the **Extract** button. + + The **% complete** dialog opens, and then finishes. + +1. Move the `Demos-main` folder to a GitHub repos location, such as `C:\Users\localAccount\GitHub`. + + + +## Step 2: Install the extension to add the tool in DevTools + +1. In Microsoft Edge, open a new window or tab. + +1. Select **Settings and more** (![The Settings and more icon](./devtools-extension-sample-images/settings-and-more-icon.png)), hover over **Extensions**, and then select **Manage extensions**. + + The **Extensions** tab and page opens (`edge://extensions`). + +1. Turn on the **Developer mode** toggle. + +1. Click ![The Load unpacked icon](./devtools-extension-sample-images/load-unpacked-icon.png) **Load unpacked**. + + The **Select the extension directory** dialog opens. + +1. Navigate to the `/Demos-main/devtools-extension` folder, such as `C:\Users\localAccount\GitHub\Demos-main\devtools-extension\`, and then click the **Select Folder** button. + + The **Custom DevTools Tool** card is displayed: + + ![Extensions page](./devtools-extension-sample-images/edge-extensions-page.png) + + + +## Step 3: Select the Custom tool in DevTools + +1. In Microsoft Edge, go to a webpage, such as the [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab. + + The **Custom** DevTools tool requires a webpage, not an empty tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In the **Activity Bar** of DevTools, click the **Custom** (![The Custom tool icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab. + + The **Custom** tool tab and panel are displayed: + + ![Custom tab](./devtools-extension-sample-images/custom-tab-activity-bar.png) + + If the **Custom** (![The Custom tool icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab isn't visible, do any of the following: + + * Click the **More tools** (![More tools icon](./devtools-extension-sample-images/more-tools-icon.png)) button, and then select ![Custom icon](./devtools-extension-sample-images/custom-icon.png) **Custom**. + + * Make DevTools wider, and then click the **Custom** (![Custom icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab. + + The custom DevTools page has several sections: + + * Memory display information. + + * A button to send a message from DevTools to the inspected webpage, to make the page display a JavaScript `alert` dialog. + + * A **Coordinates** display area, to send a message from the inspected webpage to the DevTools **Console** and **Custom** tools. + + + +## Step 4: View memory information by using an extension API call + +* In the **Custom** tool, next to **Available Memory Capacity**, observe the once-per-second updating of the value: + + ![Updating Available Memory Capacity](./devtools-extension-sample-images/memory-updating.png) + + + +## Step 5: Send message from DevTools to inspected page + +1. In the **Custom** tool, click the **Say Hello** button. + + A JavaScript `alert` dialog opens, displaying the message: "Hello from the DevTools extension!" + + ![The Alert](./devtools-extension-sample-images/alert.png) + + DevTools sends a message to the inspected webpage, causing JavaScript to display an alert. + +1. Click the **OK** button. + + The dialog closes. + + + +## Step 6: Send message from inspected page to DevTools + +1. In the inspected webpage, click various spots. + + In the **Custom** tool, next to **Coordinates**, the coordinates are displayed and updated while you click around: + + ![Coordinates in Custom tool](./devtools-extension-sample-images/custom-tool-coordinates.png) + +1. In DevTools, in the **Activity Bar**, select the **Console** (![Console icon](./devtools-extension-sample-images/console-icon.png)) tool. + +1. In the inspected webpage, click various spots. + + The clicked coordinates are displayed in the **Console**: + + ![Coordinates in Console tool](./devtools-extension-sample-images/console-tool-coordinates.png) + + + +## Step 7: Modify the Custom tool + +1. If not done already, install [Visual Studio Code](https://code.visualstudio.com). + +1. Open Visual Studio Code. + +1. Click the **File** menu, and then click **Open Folder**. + + The **Open Folder** dialog opens. + +1. Navigate to the `/Demos-main/devtools-extension/` folder, such as `C:\Users\localAccount\GitHub\Demos-main\devtools-extension\`, and then click the **Select Folder** button. + + In the **Explorer** pane, the `/devtools-extension/` folder is displayed. + +1. Click `panel.html`. + + `panel.html` is opened for editing: + + ![/devtools-extension/ folder in Visual Studio Code](./devtools-extension-sample-images/panel-html.png) + +1. Add "My" to the `

` heading; change from: + + ```html +

Custom DevTools Tool

+ ``` + + to: + + ```html +

My Custom DevTools Tool

+ ``` + +1. Save `panel.html`. + +1. In the **Explorer** pane, click `manifest.json`. + + `manifest.json` is opened for editing. + +1. Add "My" to the `name`; change from: + + ```json + "name": "Custom DevTools Tool", + ``` + + to: + + ```json + "name": "My Custom DevTools Tool", + ``` + +1. Save `manifest.json`. + + + +## Step 8: Reload the modified Custom tool + +1. In Microsoft Edge, select **Settings and more** (![The Settings and more icon](./devtools-extension-sample-images/settings-and-more-icon.png)), hover over **Extensions**, and then select **Manage extensions**. + + The **Extensions** tab and page opens (`edge://extensions`). + +1. In the **Custom DevTools Tool** card, click the **Reload** link. + + The card now shows **My Custom DevTools Tool** as the name of the extension: + + ![Reload](./devtools-extension-sample-images/reload-modified-sample.png) + + + +## Step 9: Use the modified Custom tool + +1. Go to a webpage, such as the [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab. + + The **Custom** DevTools tool requires a webpage, not an empty tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In the **Activity Bar** of DevTools, click the **Custom** (![The Custom tool icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab. + + The **Custom** tool is displayed, with the word **My** added to the heading in the panel: + + ![Modified Custom tool](./devtools-extension-sample-images/modified-custom-tool.png) + + If the title still says **Custom DevTools Tool** instead of **My Custom DevTools Tool**, close and reopen DevTools. + + If the **Custom** (![The Custom tool icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab isn't visible, do any of the following: + + * Click the **More tools** (![More tools icon](./devtools-extension-sample-images/more-tools-icon.png)) button, and then select ![Custom icon](./devtools-extension-sample-images/custom-icon.png) **Custom**. + + * Make DevTools wider, and then click the **Custom** (![Custom icon](./devtools-extension-sample-images/custom-icon.png)) tool's tab. + +This is the end of the steps to use and modify the DevTools Extension sample. + + + +## Troubleshooting + +If the **Custom** tab isn't visible in DevTools, or it's outdated and doesn't show your latest code changes: + +* Make DevTools wide, to show many tools in the **Activity Bar**. + +* Close and reopen DevTools. + +* Refresh or hard-refresh the inspected page. + +* In Microsoft Edge, in the **Extensions** page, click **Reload** for the extension. + +* If no icon is provided in such an extension, the tab when not selected is narrow and gray, on the right side of the **Activity Bar**. Click the narrow gray tab. + +* Go to a webpage, not an empty tab. The code in the sample "Custom DevTools tool" requires a webpage. + +When the **Activity Bar** is narrow, the Custom Devtools tool is added to the **More tools** menu on the **Activity Bar**. + +The **Custom** tab doesn't have a **Remove from Activity Bar** command on the right-click menu. + + + +## See also + diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension.md b/microsoft-edge/extensions/developer-guide/devtools-extension.md index 184c1bf2b8..a4e395b406 100644 --- a/microsoft-edge/extensions/developer-guide/devtools-extension.md +++ b/microsoft-edge/extensions/developer-guide/devtools-extension.md @@ -1,593 +1,407 @@ --- -title: Create a DevTools extension, adding a custom tool tab and panel -description: In this tutorial, you learn to build a Microsoft Edge extension that extends DevTools. At the end of the tutorial, you should have a working DevTools extension that creates its own panel and interacts with the DevTools extension APIs. +title: Add a custom tool in Microsoft Edge DevTools +description: Create a Microsoft Edge extension that adds a custom tool in DevTools, including a tool tab and panel. Communicate between DevTools and the inspected webpage, and call DevTools APIs. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: extensions -ms.date: 11/18/2024 +ms.date: 05/06/2026 --- -# Create a DevTools extension, adding a custom tool tab and panel +# Add a custom tool in Microsoft Edge DevTools + + -This article provides a sample and code walkthrough for a Microsoft Edge extension that adds a tool tab and panel in DevTools. +This article describes the code of the Custom DevTools sample. To first install and run the sample, see [Sample: Custom DevTools tool](./devtools-extension-sample.md). -This article first shows how to install and run the provided DevTools extension sample, which adds a **Sample Panel** tool tab in DevTools within Microsoft Edge. The sample is a working DevTools extension that creates its own panel, and interacts with the DevTools APIs. -This article then presents a tutorial that shows how you can optionally create that sample from scratch, and explains each step of developing the sample, and how the added code works. These tutorial steps are a good way to experience everything that's needed for typical development. + +## Introduction -See also: -* [Overview of DevTools](../../devtools/overview.md) +Like a regular extension, a DevTools extension has a manifest file. That's described in [Get started developing an extension](../getting-started/index.md), which presents a basic extension sample that you can start with. +An extension that extends DevTools additionally includes: +* A rendered HTML file to display in the tool's panel in DevTools. +* A non-rendered HTML file that runs when DevTools is opened, and which typically handles communication between the custom DevTools tool and the inspected webpage. - -## Download, install, and run the DevTools extension sample +This DevTools extension sample communicates between DevTools and the inspected webpage, and calls DevTools APIs. -To download, install, run, and test the provided, finished DevTools extension sample: +The DevTools Extension sample displays a custom tool in DevTools, including a **Custom** tab in the **Activity Bar** and a panel that's connected to the tab: -1. Download the final extension code by clicking [Demos-main.zip](https://codeload.github.com/MicrosoftEdge/Demos/zip/refs/heads/main) and then extracting its content to a folder on your computer. +![Custom tab](./devtools-extension-images/custom-tab-activity-bar.png) -1. Open Microsoft Edge and go to `edge://extensions/`. +A _panel_ is a tool page in Microsoft Edge DevTools, along with the tool's tab in the **Activity Bar**. -1. Turn on the **Developer mode** toggle. +See also: +* [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md) +* [Overview of DevTools](../../devtools/overview.md) -1. Click **Load unpacked** and navigate to the folder where you extracted the zip file. In this folder, select **Demos-main** > **devtools-extension** > **sample 4**, and then click **Select Folder**. - ![The edge://extensions page in Microsoft Edge, showing the Developer mode and Load unpacked buttons](./devtools-extension-images/edge-extensions-page.png) + +## Overview of files - The DevTools extension is loaded. +The DevTools extension sample has the following files: -1. In Microsoft Edge, open a new tab. +| File | Description | +|---|---| +| `manifest.json` | Information about the extension: name, description, version, manifest version, and HTML page to show in DevTools. | +| `panel.html` | Webpage to display in the custom panel in DevTools. | +| `devtools.html` | A non-rendered HTML file that's run when DevTools is opened, to load the extension's JavaScript files. | +| `devtools.js` | Main logic for the custom DevTools page. | +| `content_script.js` | Code which the extension injects in the inspected webpage. Adds a click event listener to the page that will send a message with the mouse-click position. `devtools.js` listens to this message and displays the position in the custom panel. | +| `icon.png` | Icon to display on the tool's tab in the Activity bar of DevTools and in the **More tools** menu. | +| `README.md` | Basic information for developers about how to use the sample. | -1. Open DevTools (**F12**). + -1. Select the **Sample Panel** tool (tab). +Details are below. - The **Sample Panel** tool opens: - ![Microsoft Edge, showing DevTools on the side, with the extension's Sample Panel selected](./devtools-extension-images/solution-sample-panel.png) + +## Interact between the webpage and DevTools -1. Click the **Say Hello to the inspected page** button. +Multiple files are needed to enable interaction between the inspected webpage and DevTools. These files run in different contexts: - An alert is displayed in the inspected page: +* `devtools.js` runs in the context of the custom tool panel, in DevTools. - ![Microsoft Edge, showing the new extension panel in DevTools on the side, and an alert dialog window](./devtools-extension-images/devtools-extension-show-greeting.png) +* `content_script.js` is a _content script_, which means that it runs in the context of the inspected webpage. In the same way that other scripts are loaded by the webpage, a content script has access to the DOM and can change it. -1. Click the **OK** button to close the alert. +The DevTools page, inspected page, and content script fit together in an extension: -1. Click anywhere in the inspected page. +![Diagram showing the anatomy of a DevTools extension](./devtools-extension-images/architecture.png) - A message is displayed in the extension panel: **You clicked on position (199, 509) in the inspected page**: +The `content_script.js` detects where the user clicks on the inspected webpage: - ![The sample panel in DevTools showing the clicked position message](./devtools-extension-images/devtools-extension-show-position.png) +```javascript +document.addEventListener("click", event => { + chrome.runtime.sendMessage({ + click: true, + xPosition: event.clientX + document.body.scrollLeft, + yPosition: event.clientY + document.body.scrollTop + }); +}); +``` -1. Select the **Console** tool. +The content script relays this info to the `devtools.js` file, where the data is displayed in DevTools in the **Custom** tool and in the **Console** tool. - A message appears in the **Console** tool: **Received response > _{xPosition: 199, yPosition: 509}_**: +Detect the user clicks on a webpage by using a content script. The content script relays this info to the `devtools.js` file, where the data is displayed in both the DevTools **Console** and the DevTools **Custom** tool that's a Microsoft Edge extension. - ![The DevTools Console tool showing the clicked position message](./devtools-extension-images/devtools-extension-show-position-in-console.png) -You downloaded, installed, ran, and tested the provided, finished DevTools extension sample. In the next steps, you create the same sample by starting from an empty directory. The following sections explain how the code works. + +## Code for Custom DevTools tool +The Custom DevTools sample consists of the following files and code. The code that interacts with the inspected webpage does the following: - -## Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage +* Displays memory information in the **Custom** DevTools tool. -If you want to create the files for each major step below, install a code editor such as [Visual Studio Code](https://code.visualstudio.com/), to follow the tutorial steps below to manually re-create the above sample DevTools extension. You can read the code walkthrough below, presented as four major steps or phases. +* Displays the mouse-click position in the **Custom** DevTools tool, when the webpage is clicked. -A basic extension for Microsoft Edge consists of a manifest file (`manifest.json`). Because this particular extension extends DevTools, this extension also includes a webpage file, `devtools.html`. The two files are provided in the `Microsoft Edge / Demos` repo > [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) directory. The directory contains the files: -* `devtools.html` -* `manifest.json` +* Displays a greeting alert in the inspected webpage, when the **Say Hello** button is clicked in the **Custom** DevTools tool. - -#### manifest.json + +## `manifest.json` -`manifest.json` is a manifest file, containing key/value pairs. The top-level keys are called _members_: +Information about the extension: name, description, version, manifest version, and HTML page to show in DevTools. -```json -{ - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension", - "manifest_version": 3, - "version": "1.0", - "devtools_page": "devtools.html" -} -``` +The manifest file contains key/value pairs. The top-level keys are called _members_. + +This file is required, for an extension. The manifest contains the following information about the extension: | Member | Description | |----------|-------------| | `name` | The name of the extension that will appear under `edge://extensions/`. | | `description` | The description of the extension that will be displayed under the name of the extension. | | `version` | The version of the extension that will appear next to the name of the extension. | -| `manifest_version` | Determines the set of features that the extension will be using, such as service workers or network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](./manifest-v3.md). | +| `manifest_version` | Determines the set of features that the extension will be using, such as network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](../developer-guide/manifest-v3.md). | | `devtools_page` | The path to an HTML file that's run every time DevTools is opened, and loads the extension's JavaScript files. This page isn't rendered in DevTools. | +| `content_scripts` | The JavaScript or CSS files to use when the user opens specified webpages. See [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in the Chrome docs. | +| `permissions` | The local device requires permissions to view its system memory capacity, since the script calls API for that. | +`manifest.json`: - -#### devtools.html - -`devtools.html` matches the `devtools_page` member in the manifest file: - -```html - - - - - - - A Basic DevTools Extension. - - +```json +{ + "name": "Custom DevTools Tool", + "description": "A DevTools extension interacting with the inspected page", + "manifest_version": 3, + "version": "1.0", + "devtools_page": "devtools.html", + "content_scripts": [{ + "matches": [ + "http://*/*", + "https://*/*" + ], + "run_at": "document_idle", + "js": [ + "content_script.js" + ] + }], + "permissions": [ + "system.memory" + ] +} ``` -In a later step, you'll add a ` - - - ``` - - In the manifest file (`manifest.json`), the `devtools_page` field specifies the above file (`devtools.html`). `devtools.html`, above, contains a ` + + +``` +See also: +* [devtools.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.html) - source file in repo. - **panel.html:** -1. In the `panel.html` file, add a `sayHello` button and a `youClickedOn` label, as follows: + +## `devtools.js` - ```html - -

- ``` +`devtools.js` contains the main logic for the custom DevTools page. `devtools.js` does the following: - The above two elements are used to demo the interaction between the inspected page, the DevTools panel, and the background service worker. When the user clicks the `sayHello` button in the DevTools extension, it will display a greeting message in the inspected window. When the user clicks anywhere in the inspected page, it will display a message to show the mouse click position in the DevTools extension panel. +1. Creates a new **Custom** tool tab and panel in DevTools by using `chrome.devtools.panels.create()`. +1. When the tool is displayed (`panel.onShown` listener), the `availableMemoryCapacity` and `totalMemoryCapacity` elements are retrieved from the DOM. - **devtools.js:** +1. Sets a timer to run code every second after the panel is shown. -1. In the `devtools.js` file (as shown below), use the `chrome.runtime.connect` method to create a connection to the background service worker, and then send the inspected window `tabId` to the service worker by using the `backgroundPageConnection.postMessage` method. Finally, add event listeners to the `sayHello` button and `youClickedOn` label that's defined in the `panel.html` file, as shown below: +1. When the timer fires, the `chrome.system.memory.getInfo` method is used to retrieve the available and total memory capacity of the device and these values are displayed in the corresponding DOM elements. - ```javascript - let youClickedOn; - chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { - // code invoked on panel creation - panel.onShown.addListener( (extPanelWindow) => { - let sayHello = extPanelWindow.document.querySelector('#sayHello'); - youClickedOn = extPanelWindow.document.querySelector('#youClickedOn'); - sayHello.addEventListener("click", () => { - // show a greeting alert in the inspected page - chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension");'); - }); +`devtools.js`: + +```javascript +let availableMemoryCapacity; +let totalMemoryCapacity; +let youClickedOn; + +chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => { + // Code invoked on panel creation. + panel.onShown.addListener( (extPanelWindow) => { + // Memory API. + availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); + totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); + // 2-way message sending. + let sayHello = extPanelWindow.document.querySelector('#sayHello'); + youClickedOn = extPanelWindow.document.querySelector('#youClickedOn'); + sayHello.addEventListener("click", () => { + // show a greeting alert in the inspected page + chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");'); }); }); +}); - chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { - // Messages from content scripts should have sender.tab set - if (sender.tab && request.click == true) { - console.log('I am here!'); - if (youClickedOn) { - youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`; - } - sendResponse({ - xPosition: request.xPosition, - yPosition: request.yPosition - }); +// Update the Memory display. +setInterval(() => { + chrome.system.memory.getInfo((data) => { + if (availableMemoryCapacity) { + availableMemoryCapacity.innerHTML = data.availableCapacity; + } + if (totalMemoryCapacity) { + totalMemoryCapacity.innerHTML = data.capacity; } }); +}, 1000); + +// Send a message from the inspected page to DevTools. +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + // Messages from content scripts should have sender.tab set. + if (sender.tab && request.click == true) { + console.log('I am here!'); + if (youClickedOn) { + youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`; + } + sendResponse({ + xPosition: request.xPosition, + yPosition: request.yPosition + }); + } +}); +``` - // Create a connection to the background service worker - const backgroundPageConnection = chrome.runtime.connect({ - name: "devtools-page" - }); - - // Relay the tab ID to the background service worker - backgroundPageConnection.postMessage({ - name: 'init', - tabId: chrome.devtools.inspectedWindow.tabId - }); - ``` - - When the user clicks the `sayHello` button, the DevTools extension will run a code snippet of `alert("Hello from the DevTools Extension");` in the inspected window by invoking the `eval()` method of the inspected window `chrome.devtools.inspectedWindow`. - - When the user clicks anywhere in the inspected window, the DevTools extension will receive a message, from the background service worker, with `request.click == true` and the mouse position information. - - - **background.js:** - -1. Create a file named `background.js`. - -1. Copy and paste the following code into `background.js`: - - ```javascript - let id = null; - const connections = {}; - - chrome.runtime.onConnect.addListener(devToolsConnection => { - // Assign the listener function to a variable so we can remove it later - let devToolsListener = (message, sender, sendResponse) => { - if (message.name == "init") { - id = message.tabId; - connections[id] = devToolsConnection; - // Send a message back to DevTools - connections[id].postMessage("Connected!"); - } - }; - - // Listen to messages sent from the DevTools page - devToolsConnection.onMessage.addListener(devToolsListener); +The `create` method call in `devtools.js`: - devToolsConnection.onDisconnect.addListener(() => { - devToolsConnection.onMessage.removeListener(devToolsListener); - }); - }); - ``` +```javascript +chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => { + // code invoked on panel creation +}); +``` - The above code connects the background service worker with the DevTools page. It listens to when the DevTools page connects, saves the connection, and sends a response back to the DevTools page. +The `create` method has the following signature: - This is useful when your background service worker is collecting data or performing tasks in the background that you want to be available in your DevTools extension. +```javascript +chrome.devtools.panels.create( + title: string, // Tool tab's label in Activity bar. + iconPath: string, // Icon to display in tool's tab. + pagePath: string, // Webpage to display in tool's panel. + callback: function // Code to run when tool is opened. +) +``` +To communicate with the inspected webpage, `devtools.js` adds event listeners to the `sayHello` button and `youClickedOn` label that's defined in the `panel.html` file. - -#### Reload and test the DevTools extension +When the user clicks the `sayHello` button, `devtools.js` runs code directly in the inspected window, by using the `chrome.devtools.inspectedWindow.eval()` method. -To test the new `sayHello` button: +When the user clicks anywhere in the inspected window, the DevTools extensions receive a message with `request.click == true` and the mouse position information. -1. Go to `edge://extensions/`. +See also: +* [devtools.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.js) - source file in repo. +* [Supported APIs for Microsoft Edge extensions](../developer-guide/api-support.md) + * [chrome.devtools.panels](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels) + * [create()](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create) -1. Find the unpacked extension entry that you loaded in Step 1. -1. Click the **Reload** button. + +## `content_script.js` -1. Open a new browser tab, open DevTools (**F12**), and then click the **Sample Panel** tool (tab). +Code which the custom DevTools tool injects in the inspected webpage. +Contains JavaScript that's injected into the inspected webpage (any webpage). -1. Click the **Say Hello to The Inspected Page!** button. +This file does the following: +* Adds a click event listener to the inspected webpage, that sends a message containing the mouse-click position, by calling `chrome.runtime.sendMessage`. +* Listens for the page click event via an event listener. - An alert is displayed in the inspected page: +The content script relays the mouse-click coordinates to the `devtools.js` file, where the coordinates are displayed in both the **Console** tool and the **Custom** tool in DevTools. - ![Microsoft Edge, showing the new extension panel in DevTools on the side, and an alert dialog window](./devtools-extension-images/devtools-extension-show-greeting.png) +A _content script_ runs in the context of the inspected webpage. In the same way that other scripts are loaded by the webpage, a content script has access to the DOM and can change it. -1. Click the **OK** button to close the alert. +`content_script.js`: -1. Click anywhere in the inspected page. +```javascript +document.addEventListener("click", (event) => { + chrome.runtime.sendMessage({ + click: true, + xPosition: event.clientX + document.body.scrollLeft, + yPosition: event.clientY + document.body.scrollTop + }, + response => { + console.log("Received response", response); + } + ); +}); +``` - A message is displayed in the extension panel: **You clicked on position (199, 509) in the inspected page**: +See also: +* [content_script.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/content_script.js) - source file in repo. +* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) - Chrome docs. - ![The sample panel in DevTools showing the clicked position message](./devtools-extension-images/devtools-extension-show-position.png) -1. Select the **Console** tool. + +## `icon.png` - A message appears in the **Console** tool: **Received response > _{xPosition: 199, yPosition: 509}_**: +Icon to display on the tool's tab in the Activity bar of DevTools and in the **More tools** menu. - ![The DevTools Console tool showing the clicked position message](./devtools-extension-images/devtools-extension-show-position-in-console.png) +`icon.png` is the icon to display on the tool's tab in the **Activity bar** of DevTools and in the **More tools** menu: -This completes the tutorial and code walkthrough for creating a DevTools extension that adds a tool tab and panel in DevTools in Microsoft Edge. +![Icon file](./devtools-extension-images/icon.png) See also: -* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) +* [icon.png](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/icon.png) - source file in repo. ## See also -* [Overview of DevTools](../../devtools/overview.md) -* [Samples for Microsoft Edge extensions](../samples/index.md) -* [Overview and timelines for migrating to Manifest V3](./manifest-v3.md) -* [Sideload an extension to install and test it locally](../getting-started/extension-sideloading.md) + +* [Sample: Custom DevTools tool](./devtools-extension-sample.md) +* [Overview of DevTools](../../devtools/overview.md) +* [Overview and timelines for migrating to Manifest V3](../developer-guide/manifest-v3.md) +* [Supported APIs for Microsoft Edge extensions](../developer-guide/api-support.md) +* [Get started developing an extension](../getting-started/index.md) +* [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md) -developer.chrome.com: -* [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) -* [Extend DevTools](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools) +Chrome Extensions docs: * [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) -* [Reference](https://developer.chrome.com/docs/extensions/reference/) +* [Extensions API reference](https://developer.chrome.com/docs/extensions/reference/) * [chrome.devtools.panels](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels) * [create()](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create) -GitHub: -* [Demos-main.zip](https://codeload.github.com/MicrosoftEdge/Demos/zip/refs/heads/main) - Downloads the **MicrosoftEdge > Demos** repo, rather than cloning it. -* [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/) - Source code of the sample. - * [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) - Phase 1 of the sample. - * [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) - Phase 2 of the sample. - * [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) - Phase 3 of the sample. - * [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) - Phase 4 of the sample. - -Tools: -* [Visual Studio Code](https://code.visualstudio.com) +Source files in repo: +* [content_script.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/content_script.js) +* [devtools.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.html) +* [devtools.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.js) +* [icon.png](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/icon.png) +* [manifest.json](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/manifest.json) +* [panel.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/panel.html) diff --git a/microsoft-edge/extensions/developer-guide/match-patterns.md b/microsoft-edge/extensions/developer-guide/match-patterns.md index 981bc440de..7068020448 100644 --- a/microsoft-edge/extensions/developer-guide/match-patterns.md +++ b/microsoft-edge/extensions/developer-guide/match-patterns.md @@ -29,10 +29,10 @@ For Microsoft Edge extension, host permission and content script pattern matchin Host permissions and content script matching are based on a set of URLs defined by match patterns. A match pattern is essentially a URL that begins with a permitted scheme (`http`, `https`, `file`, or `ftp`, and that can contain '`*`' characters. The special pattern `` matches any URL that starts with a permitted scheme. Each match pattern has 3 parts: -* _scheme_ — for example, `http` or `file` or `*` +* _scheme_ — for example, `http` or `file` or `*` -* `_host_` — for example, `www.google.com` or `*.google.com` or `*`; if the scheme is file, there is no host part. -* `_path_` — for example, `/*`, `/foo*`, or `/foo/bar`. The path must be present in a host permission, but is always treated as `/*`. +* `_host_` — for example, `www.google.com` or `*.google.com` or `*`; if the scheme is file, there is no host part. +* `_path_` — for example, `/*`, `/foo*`, or `/foo/bar`. The path must be present in a host permission, but is always treated as `/*`. diff --git a/microsoft-edge/extensions/developer-guide/native-messaging.md b/microsoft-edge/extensions/developer-guide/native-messaging.md index 489001a39f..48a415cf48 100644 --- a/microsoft-edge/extensions/developer-guide/native-messaging.md +++ b/microsoft-edge/extensions/developer-guide/native-messaging.md @@ -16,9 +16,9 @@ Extensions that use native messaging are installed in Microsoft Edge similar to To acquire the extension and native app host, there are two different distribution models: -* Package your extension and the host together. When a user installs the package, both the extension and the host are installed. +* Package your extension and the host together. When a user installs the package, both the extension and the host are installed. -* Or, install your extension from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), and your extension prompts users to install the host. +* Or, install your extension from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), and your extension prompts users to install the host. To create your extension to send and receive messages with native app hosts, do the following steps. @@ -81,11 +81,11 @@ The following is an example **manifest.json** file: Native apps must provide a native messaging host manifest file. A native messaging host manifest file contains the following information: -* The path to the native messaging host runtime. +* The path to the native messaging host runtime. -* The method of communication with the extension. +* The method of communication with the extension. -* A list of allowed extensions to which it communicates. +* A list of allowed extensions to which it communicates. The browser reads and validates the native messaging host manifest. The browser doesn't install or manage the native messaging host manifest file. @@ -138,8 +138,8 @@ When you're ready to distribute your extension to users, publish your extension The final step involves copying the native messaging host manifest file to your computer, and making sure that this manifest file is correctly configured. To ensure your native messaging host manifest file is placed in the expected location, do the following steps. The location varies by platform. On Linux and macOS: -* Make sure that you provide **read** permissions on the native messaging host manifest file. -* Make sure that you provide **run** permissions on the host runtime. +* Make sure that you provide **read** permissions on the native messaging host manifest file. +* Make sure that you provide **run** permissions on the host runtime. ##### [Windows](#tab/windows/) @@ -155,13 +155,13 @@ HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Edge\NativeMessagingHosts\com.my_company.m To add a registry key to the directory with the manifest key, do either of the following: -* Run a command in the command prompt: +* Run a command in the command prompt: ```console REG ADD "HKCU\Software\Microsoft\Edge\NativeMessagingHosts\com.my_company.my_app" /ve /t REG_SZ /d "C:\path\to\nmh-manifest.json" /f ``` -* Or, create a `.reg` file and run it, as follows: +* Or, create a `.reg` file and run it, as follows: 1. Copy the following command into a `.reg` file: @@ -209,13 +209,13 @@ This is required because only the native messaging host manifest file that corre To store the native messaging host manifest file: -* System-wide native messaging hosts, which are available to all users, are stored in a fixed location. For example, the native messaging host manifest file must be stored in the following location: +* System-wide native messaging hosts, which are available to all users, are stored in a fixed location. For example, the native messaging host manifest file must be stored in the following location: ```bash /Library/Microsoft/Edge/NativeMessagingHosts/com.my_company.my_app.json ``` -* User-specific native messaging hosts, which are available to the current user only, are located in the `NativeMessagingHosts` subdirectory in the user data directory. For example, the native messaging host manifest file must be stored in the following location: +* User-specific native messaging hosts, which are available to the current user only, are located in the `NativeMessagingHosts` subdirectory in the user data directory. For example, the native messaging host manifest file must be stored in the following location: ```bash ~/Library/Application Support/Microsoft Edge {Channel_Name}/NativeMessagingHosts/com.my_company.my_app.json @@ -237,13 +237,13 @@ See: To store the native messaging host manifest file: -* System-wide native messaging hosts, which are available to all users, are stored in a fixed location. The native messaging host manifest file must be stored in the following location: +* System-wide native messaging hosts, which are available to all users, are stored in a fixed location. The native messaging host manifest file must be stored in the following location: ```bash /etc/opt/edge/native-messaging-hosts ``` -* User-specific native messaging hosts, which are available to the current user only, are located in the `NativeMessagingHosts` subdirectory in the user data directory. The native messaging host manifest file must be stored in the following location: +* User-specific native messaging hosts, which are available to the current user only, are located in the `NativeMessagingHosts` subdirectory in the user data directory. The native messaging host manifest file must be stored in the following location: ```bash ~/.config/microsoft-edge/NativeMessagingHosts diff --git a/microsoft-edge/extensions/developer-guide/sidebar-images/example-sidebar.png b/microsoft-edge/extensions/developer-guide/sidebar-images/example-sidebar.png new file mode 100644 index 0000000000..cac020f0ae Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/sidebar-images/example-sidebar.png differ diff --git a/microsoft-edge/extensions/developer-guide/sidebar.md b/microsoft-edge/extensions/developer-guide/sidebar.md index 8a32636bba..a24fefbedf 100644 --- a/microsoft-edge/extensions/developer-guide/sidebar.md +++ b/microsoft-edge/extensions/developer-guide/sidebar.md @@ -6,55 +6,101 @@ ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: extensions -ms.date: 12/11/2024 +ms.date: 04/23/2026 --- # Develop an extension for the Microsoft Edge sidebar + + + + + + + +As a Microsoft Edge extension developer, you can make your new or existing Microsoft Edge extension appear in the sidebar. Any extension can use the sidebar in addition to its other UI. + +**Detailed contents:** +* [Introduction](#introduction) + * [Terminology](#terminology) +* [Concepts and usage](#concepts-and-usage) +* [Add the sidePanel permission in the manifest file](#add-the-sidepanel-permission-in-the-manifest-file) +* [Use cases for the Side Panel API](#use-cases-for-the-side-panel-api) + * [Display the same sidebar on every site](#display-the-same-sidebar-on-every-site) + * [Enable a sidebar for a specific site only](#enable-a-sidebar-for-a-specific-site-only) + * [Enable the extension's shortcut icon to open the sidebar](#enable-the-extensions-shortcut-icon-to-open-the-sidebar) + * [Opening the sidebar upon user interaction](#opening-the-sidebar-upon-user-interaction) + * [Switch to a different sidebar](#switch-to-a-different-sidebar) +* [Sidebar user experience](#sidebar-user-experience) + * [Opening the extension in the sidebar](#opening-the-extension-in-the-sidebar) + * [By clicking an icon](#by-clicking-an-icon) + * [By right-clicking the extension's icon](#by-right-clicking-the-extensions-icon) + * [By pressing a keyboard shortcut](#by-pressing-a-keyboard-shortcut) + * [Open through a gesture](#open-through-a-gesture) +* [Extension samples](#extension-samples) +* [Types and methods](#types-and-methods) +* [See also](#see-also) + + + +## Introduction + + +Use the `chrome.sidePanel` API to host content in the sidebar of Microsoft Edge alongside the main content of a webpage. As a Microsoft Edge extension developer, you can make your new or existing Microsoft Edge extension appear in the sidebar. Any extension can use the sidebar in addition to its other UI. ![The sidebar for a Microsoft Edge extension](./sidebar-images/sidebar-screenshot.png) -By using the Sidebar API for extensions, you can enhance the browsing experience by enabling users to view additional information alongside the main content of a webpage. +By using the Side Panel API, you can enhance the browsing experience by enabling users to view additional information alongside the main content of a webpage. -The _sidebar_ is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar reduces the need to constantly switch between tabs, resulting in a more productive browsing experience. +The _sidebar_ is a persistent pane that's located on the side of Microsoft Edge. The sidebar pane coexists with the primary content of the browser. The sidebar reduces the need to constantly switch between tabs, resulting in a more productive browsing experience. -Extensions can optionally use the sidebar API to show a custom UI in the Microsoft Edge sidebar. Extensions can continue appearing in the Microsoft Edge toolbar along with a UI such as popups, and can inject scripts, for example. +An extension can optionally use the Side Panel API to show a custom UI in the Microsoft Edge sidebar. Additionally, the extension can continue appearing in the Microsoft Edge toolbar along with a UI such as popups, and can inject scripts. #### Terminology + | Term | Definition | |---|---| -| Sidebar API | Name of the feature that you can use in your Microsoft Edge extensions. Chrome docs use the term _side panel_. | +| _the Side Panel API_ | Name of the feature that you can use in your Microsoft Edge extensions. The Chrome UI uses the term _side panel_. | | `sidePanel` or `side_panel` | Name of the API and permission to enable any extension as a sidebar extension. | -| Sidebar extension | A Microsoft Edge extension that has a UI in the sidebar. | +| _sidebar extension_ | A Microsoft Edge extension that has a UI in the sidebar. | -## Features of the Sidebar API +## Concepts and usage + -Features of the Sidebar API include: +The Side Panel API allows an extension to display its own UI in the Microsoft Edge sidebar, enabling a persistent experience that complements the user's browsing journey. -* The sidebar remains open while navigating between tabs. Known issue: The sidebar is not automatically displayed again when the user switches to a tab in which the sidebar was previously open ([Issue #142](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/142)). +![Edge browser sidebar UI](./sidebar-images/example-sidebar.png) -* An extension in the sidebar can be made available for specific websites. + +As with other extension resources, the HTML page that's displayed in the sidebar runs in a trusted extension context on the extension's origin (`extension://`). The sidebar has the same API access as other trusted extension contexts. -* An extension in the sidebar has access to all of the [Supported APIs for Microsoft Edge extensions](./api-support.md). +All the existing extensions APIs are available for sidebar extensions, so you can leverage all current capabilities of the extensibility framework in your sidebar-enabled extension. +Some features of the sidebar include: - -## Origin +* The sidebar remains open while navigating between tabs. -As with other extension resources, the sidebar page commits to a trusted extension context on its origin (`extension://`). The sidebar has the same API access as other trusted extension contexts. + * Known issue: The sidebar is not automatically displayed again when the user switches to a tab in which the sidebar was previously open ([Issue #142](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/142)). -All the existing extensions APIs are available for sidebar extensions, so you can leverage all current capabilities of the extensibility framework in your sidebar-enabled extension. +* An extension in the sidebar can be made available for specific websites. + +* An extension in the sidebar has access to all of the [Supported APIs for Microsoft Edge extensions](./api-support.md). + +* In Microsoft Edge settings, the user can specify several sidebar settings. -## Add the sidePanel permission in the extension's manifest file +## Add the sidePanel permission in the manifest file + -To use the Sidebar API, add a permission in your `manifest.json` file. Include the `sidePanel` permission in the extension's `manifest.json` file: +To use the Side Panel API, add the `"sidePanel"` permission in the extension's manifest file (`manifest.json`): ```json { @@ -62,7 +108,7 @@ To use the Sidebar API, add a permission in your `manifest.json` file. Include "name": "My sidebar extension", ... "side_panel": { - "default_path": "sidebar.html" + "default_path": "sidepanel.html" }, "permissions": [ "sidePanel" @@ -71,60 +117,70 @@ To use the Sidebar API, add a permission in your `manifest.json` file. Include } ``` -Every extension for Microsoft Edge has a JSON-formatted manifest file, named `manifest.json`. The manifest file is the blueprint of your extension. +Every extension for Microsoft Edge has a JSON-formatted manifest file, named `manifest.json`. The manifest file is the blueprint of the extension. + +A complete manifest file is included in each sample; see [Extension samples](#extension-samples), below. See also: * [Manifest file format for extensions](../getting-started/manifest-format.md) -## Use cases for the Sidebar API +## Use cases for the Side Panel API + -The following sections demonstrate some common use cases for the Sidebar API. +The following sections demonstrate some common use cases for the Side Panel API. + +For complete extension examples, see [Extension samples](#extension-samples), below. #### Display the same sidebar on every site + A sidebar can be set as the default, to show the same extension throughout all the open browser tabs. Default values persist across browser sessions. -In `manifest.json`, define the `"default_path"` key, such as `"sidebar.html"`: +In `manifest.json`, define the `"default_path"` key, such as `"sidepanel.html"`: ```json { "name": "My sidebar extension", ... "side_panel": { - "default_path": "sidebar.html" + "default_path": "sidepanel.html" } ... } ``` -The file you specified as the default, such as `sidebar.html`, appears in all the open browser tabs: +The file that you specified as the default, such as `sidepanel.html`, appears in all the open browser tabs: ```html - My Sidebar + Global side panel -

Sidebar extension for all sites

-

This sidebar is enabled on all sites

+

All sites sidepanel extension

+

This side panel is enabled on all sites

``` +See also: +* [Global side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-global) in the **GoogleChrome / chrome-extensions-samples** repo. + #### Enable a sidebar for a specific site only + An extension can use [sidepanel.setOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setOptions) to enable a sidebar on a specific tab. This can be a particular website, so the extension opens in the sidebar when the user goes to this website. This example uses [chrome.tabs.onUpdated()](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated) to listen for any updates made to the tab. It checks whether the URL is `www.bing.com` and if so, enables the sidebar. Otherwise, it disables the sidebar. -In `service-worker.js`, in `addListener()`, test `url.origin` to see if it's the desired tab, and then in `sidePanel.setOptions()`, set `enabled` to `true` or `false`: +`service-worker.js`: ```javascript const BING_ORIGIN = 'https://www.bing.com'; @@ -149,15 +205,20 @@ chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => { }); ``` +In `addListener()`, we do the following: +1. Test `url.origin` to see if it's the desired tab. +1. In `sidePanel.setOptions()`, set `enabled` to `true` or `false`. + When a user switches to a tab or site for which the sidebar is not enabled, the sidebar is hidden. -Known issue: The sidebar is not automatically displayed again when the user switches to a tab in which the sidebar was previously open ([Issue #142](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/142)). +Known issue: The sidebar is not automatically displayed again when the user switches to a tab in which the sidebar was previously open ([Issue #142](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/142)). For a complete example, see [Site-specific side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-site-specific). #### Enable the extension's shortcut icon to open the sidebar + To allow users to open the sidebar by clicking the action toolbar icon, use [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). First, declare the `"action"` key in `manifest.json`: @@ -181,34 +242,14 @@ chrome.sidePanel .catch((error) => console.error(error)); ``` - - -#### Switch to a different sidebar - -An extension can use [sidepanel.getOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-getOptions) to retrieve the current sidebar, and then enable a different sidebar for a specific tab. - -This example sets a sidebar containing a welcome message on [runtime.onInstalled()](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled). When the user navigates to a different tab, the sidebar is replaced with the browser-level sidebar. - -```javascript -// service-worker.js: -const welcomePage = 'sidebar/welcome-sb.html'; -const mainPage = 'sidebar/main-sb.html'; - -chrome.runtime.onInstalled.addListener(() => { - chrome.sidePanel.setOptions({ path: welcomePage }); -}); - -chrome.tabs.onActivated.addListener(async ({ tabId }) => { - const { path } = await chrome.sidePanel.getOptions({ tabId }); - if (path === welcomePage) { - chrome.sidePanel.setOptions({ path: mainPage }); - } -}); -``` + + + #### Opening the sidebar upon user interaction + [sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open) allows extensions to open the sidebar through a user gesture, such as clicking the action icon, or through any user interaction on an extension page or content script, such as clicking a button. @@ -234,21 +275,66 @@ chrome.contextMenus.onClicked.addListener((info, tab) => { }); ``` +For a complete demo, see [Opening the side panel through a user interaction](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open). + + + +#### Switch to a different sidebar + + +An extension can use [sidepanel.getOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-getOptions) to retrieve the current sidebar, and then enable a different sidebar for a specific tab. + +This example sets a sidebar containing a welcome message on [runtime.onInstalled()](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled). When the user navigates to a different tab, the sidebar is replaced with the browser-level sidebar. + +```javascript +// service-worker.js: +const welcomePage = 'sidebar/welcome-sb.html'; +const mainPage = 'sidebar/main-sb.html'; + +chrome.runtime.onInstalled.addListener(() => { + chrome.sidePanel.setOptions({ path: welcomePage }); +}); + +chrome.tabs.onActivated.addListener(async ({ tabId }) => { + const { path } = await chrome.sidePanel.getOptions({ tabId }); + if (path === welcomePage) { + chrome.sidePanel.setOptions({ path: mainPage }); + } +}); +``` + +For the full code, see [Multiple side panels example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-multiple). + -## Sidebar extensions user experience +## Sidebar user experience + Develop an extension for the Microsoft Edge sidebar have these user experience (UX) features. #### Opening the extension in the sidebar + + + +To allow users to open the sidebar, do either of the following: + +* Use an action icon in combination with [`sidePanel.setPanelBehavior()`](https://developer.chrome.com/docs/extensions/reference/api/sidePanel#open-action-icon). -There are several ways for the user to open the extension in the sidebar: +* Make a call to [`sidePanel.open()`](https://developer.chrome.com/docs/extensions/reference/api/sidePanel#user-interaction) following a user interaction to open the extension in the sidebar, such as: + + * [By clicking an icon](#by-clicking-an-icon). + * [By right-clicking the extension's icon](#by-right-clicking-the-extensions-icon). + * [By pressing a keyboard shortcut](#by-pressing-a-keyboard-shortcut). + * [Open through a gesture](#open-through-a-gesture). + +Details are below. ###### By clicking an icon + Users can click the **Open in sidebar** icon (![Open in sidebar icon](./sidebar-images/open-in-sidebar-icon.png)), which is displayed next to the extension's name in the Extensions hub: @@ -258,9 +344,13 @@ Or, users can click the extension's custom icon in the toolbar, if it's enabled. ![Clicking the extension's icon in the toolbar](./sidebar-images/left-click-toolbar-icon.png) +See also: +* [chrome.action](https://developer.chrome.com/docs/extensions/reference/api/action) + ###### By right-clicking the extension's icon + Users can right-click the extension's icon in the toolbar, and then select **Open in sidebar** or **Close sidebar**: @@ -270,9 +360,13 @@ Users can right-click the extension's icon in the toolbar, and then select **Ope The extension's icon appears in the toolbar if the user has clicked the **Show in toolbar** (![Show in toolbar icon](./sidebar-images/show-in-toolbar-icon.png)) icon next to the extension's name in the Extensions hub. +See also: +* [chrome.contextMenus](https://developer.chrome.com/docs/extensions/reference/api/contextMenus) + ###### By pressing a keyboard shortcut + Users can press a keyboard shortcut, if the action command is enabled and the action icon is enabled to open the sidebar. @@ -281,9 +375,13 @@ Users can press a keyboard shortcut, if the action command is enabled and the ac If the `openPanelOnActionClick()` property of the [PanelBehavior](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type-PanelBehavior) type is set to `true`, the user can open the sidebar by using a keyboard shortcut. To enable this, you specify an action command in the manifest. +See also: +* [chrome.commands](https://developer.chrome.com/docs/extensions/reference/api/commands) + ###### Open through a gesture + The sidebar can also be opened through the following interactions: @@ -292,26 +390,52 @@ The sidebar can also be opened through the following interactions: * Open the sidebar by clicking the toolbar icon. This approach uses [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). See [By clicking an icon](#by-clicking-an-icon) in section "Opening the extension in the sidebar", above. + + + + + + + + + + + + ## Extension samples + + +For more Side Panel API extensions demos, explore any of the following extensions: -For more Sidebar API extensions demos, explore any of the following extensions: + -* [Dictionary side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.sidepanel-dictionary) -* [Global side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-global) -* [Multiple side panels example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-multiple) -* [Opening the side panel through a user interaction](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open) -* [Site-specific side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-site-specific) +* [Global side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-global) - used for the section [Display the same sidebar on every site](#display-the-same-sidebar-on-every-site), above. + +* [Site-specific side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-site-specific) - used for the section [Enable a sidebar for a specific site only](#enable-a-sidebar-for-a-specific-site-only), above. + +* [Dictionary side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.sidepanel-dictionary) - comparable to the above two samples. + +* [Opening the side panel through a user interaction](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open) - used for the section [Opening the sidebar upon user interaction](#opening-the-sidebar-upon-user-interaction), above. + +* [Multiple side panels example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-multiple) - used for the section [Switch to a different sidebar](#switch-to-a-different-sidebar), above. + +See also: +* [Samples for Microsoft Edge extensions](../samples/index.md) ## Types and methods + + + See [Types](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type) and [Methods](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method) in the _chrome.sidePanel_ API reference page at `developer.chrome.com`. ## See also + * [Supported APIs for Microsoft Edge extensions](../developer-guide/api-support.md) * [Declare API permissions in the manifest](../developer-guide/declare-permissions.md) diff --git a/microsoft-edge/extensions/getting-started/architecture.md b/microsoft-edge/extensions/getting-started/architecture.md new file mode 100644 index 0000000000..dfd22a4142 --- /dev/null +++ b/microsoft-edge/extensions/getting-started/architecture.md @@ -0,0 +1,108 @@ +--- +title: Extension concepts and architecture +description: The architecture of Microsoft Edge extensions, and core concepts to build extensions. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: extensions +ms.date: 02/06/2022 +--- +# Extension concepts and architecture + + +This article introduces Developer concepts about building a Microsoft Edge extension. As an extension Developer, you can follow along to understand how multi-tab browsers work. + +A Microsoft Edge *extension* is a small app that users can opt into that adds or modifies features of Microsoft Edge to provide a specialized experience or function that is important to a target audience. For an introduction, see [Overview of Microsoft Edge extensions](../index.md). + +Users browse and install extensions for Microsoft Edge from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com). + +**Detailed contents:** +* [Understand how browsers work](#understand-how-browsers-work) + * [Browser tabs are isolated threads](#browser-tabs-are-isolated-threads) + * [Each tab handles one GET request](#each-tab-handles-one-get-request) + * [Communication occurs between each tab and a remote server](#communication-occurs-between-each-tab-and-a-remote-server) + * [Communication model](#communication-model) +* [Extension architecture](#extension-architecture) + * [Extension web server bundle](#extension-web-server-bundle) + * [Launching the extension server](#launching-the-extension-server) + * [Communication with tabs and browser toolbar](#communication-with-tabs-and-browser-toolbar) + * [Opt-in permissions at install time](#opt-in-permissions-at-install-time) +* [See also](#see-also) + + + +## Understand how browsers work + +The following list outlines helpful information to understand before building your extension. + + + +#### Browser tabs are isolated threads + +Each browser tab is isolated from every other tab. Each tab runs in a separate thread that is isolated from other browser tabs and threads. + +![One thread per browser tab](./index-images/index-image1-browsertabs.png) + + + +#### Each tab handles one GET request + +Each tab handles one GET request. Each tab uses a URL to get a single stream of data, which is normally an HTML document. That single stream or page, includes instructions like JavaScript include tags, image references, CSS references, and more. All resources are downloaded to that one tab page, and then the page is rendered in the tab. + + + +#### Communication occurs between each tab and a remote server + +Communication occurs between each tab and a remote server. Each tab runs in an isolated environment. Each tab is still connected to the internet, but each is isolated from other tabs. A tab can run JavaScript to communicate with a server. The server is the originating server for the first GET request that was entered into the URL bar of the tab. + + + +#### Communication model + +The extension model uses a different communication model. Similar to a tab page, an extension runs in an individual thread that is isolated from other tab page threads. A tab sends single GET requests to remote servers, and then renders the page. However, an extension works similar to a remote server. Installing an extension in a browser creates a standalone web server in the browser. The extension is isolated from all tab pages. + +![Extensions use a different communication model](./index-images/index-image3-upsidedown.png) + + + +## Extension architecture + +The following list outlines helpful information as it relates to the architecture of an extension. + + + +#### Extension web server bundle + +An extension is a bundle of web resources. The web resources are similar to other resources that you (the web developer) publish to web servers. You bundle the web resources into a zip file when building an extension. + +The zip file includes HTML, CSS, JavaScript, and image files. One more file is required in the root of the zip file. The other file is the manifest file that is named `manifest.json`. The manifest file is the blueprint of your extension and includes the version of your extension, the title, permissions needed for the extension to run, and so on. + + + +#### Launching the extension server + +Web servers contain your web bundle. A browser navigates to URLs on the server, and downloads the file to render in the browser. A browser navigates using certificates, configuration files, and so on. If an `index.html` file is specified, the file is stored at a special location on the web server. + +When you use an extension, the tab page of your browser gets to the web bundle of your extension using the extension runtime. The extension runtime serves the files from the URL `extension://{some-long-unique-identifier}/index.html`, where `{some-long-unique-identifier}` is a unique identifier assigned to the extension during installation. Each extension uses a different unique identifier. Each identifier points to the web bundle that is installed in your browser. + + + +#### Communication with tabs and browser toolbar + +An extension can communicate with tabs and the browser toolbar. An extension can interact with the toolbar of your browser. Each extension manages running tab pages in separate threads, and DOM manipulation on each tab page is isolated. An extension uses the extensions API to communicate between the extension and tab pages. The extensions API provides extra capabilities that include notification management, storage management, and so on. + +Just like web servers, an extension waits for notifications when the browser is open. An extension and tab pages run in threads that are isolated from each other. To allow an extension to work with any tab page, use the extensions API and set the permissions in the manifest file. + + + +#### Opt-in permissions at install time + +An extension provides opt-in permissions at install time. You specify the extension permissions in the `manifest.json` file. When a user installs an extension, information about the permissions that the extension requires is displayed. Based on the type of permission required, the extension can extract and use information from the browser. + + + +## See also + +* [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md) +* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) - Browse and install extensions for Microsoft Edge. diff --git a/microsoft-edge/extensions/getting-started/index.md b/microsoft-edge/extensions/getting-started/index.md index dfd22a4142..3b3610e319 100644 --- a/microsoft-edge/extensions/getting-started/index.md +++ b/microsoft-edge/extensions/getting-started/index.md @@ -1,108 +1,18 @@ --- -title: Extension concepts and architecture -description: The architecture of Microsoft Edge extensions, and core concepts to build extensions. +title: Get started developing an extension +description: Get started developing an extension for Microsoft Edge. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: extensions -ms.date: 02/06/2022 +ms.date: 04/20/2026 --- -# Extension concepts and architecture +# Get started developing an extension -This article introduces Developer concepts about building a Microsoft Edge extension. As an extension Developer, you can follow along to understand how multi-tab browsers work. +A basic extension for Microsoft Edge has a manifest file, usually named `manifest.json`. -A Microsoft Edge *extension* is a small app that users can opt into that adds or modifies features of Microsoft Edge to provide a specialized experience or function that is important to a target audience. For an introduction, see [Overview of Microsoft Edge extensions](../index.md). +To get started quickly, see [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md). Then you can copy, paste, and modify that sample directory. -Users browse and install extensions for Microsoft Edge from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com). - -**Detailed contents:** -* [Understand how browsers work](#understand-how-browsers-work) - * [Browser tabs are isolated threads](#browser-tabs-are-isolated-threads) - * [Each tab handles one GET request](#each-tab-handles-one-get-request) - * [Communication occurs between each tab and a remote server](#communication-occurs-between-each-tab-and-a-remote-server) - * [Communication model](#communication-model) -* [Extension architecture](#extension-architecture) - * [Extension web server bundle](#extension-web-server-bundle) - * [Launching the extension server](#launching-the-extension-server) - * [Communication with tabs and browser toolbar](#communication-with-tabs-and-browser-toolbar) - * [Opt-in permissions at install time](#opt-in-permissions-at-install-time) -* [See also](#see-also) - - - -## Understand how browsers work - -The following list outlines helpful information to understand before building your extension. - - - -#### Browser tabs are isolated threads - -Each browser tab is isolated from every other tab. Each tab runs in a separate thread that is isolated from other browser tabs and threads. - -![One thread per browser tab](./index-images/index-image1-browsertabs.png) - - - -#### Each tab handles one GET request - -Each tab handles one GET request. Each tab uses a URL to get a single stream of data, which is normally an HTML document. That single stream or page, includes instructions like JavaScript include tags, image references, CSS references, and more. All resources are downloaded to that one tab page, and then the page is rendered in the tab. - - - -#### Communication occurs between each tab and a remote server - -Communication occurs between each tab and a remote server. Each tab runs in an isolated environment. Each tab is still connected to the internet, but each is isolated from other tabs. A tab can run JavaScript to communicate with a server. The server is the originating server for the first GET request that was entered into the URL bar of the tab. - - - -#### Communication model - -The extension model uses a different communication model. Similar to a tab page, an extension runs in an individual thread that is isolated from other tab page threads. A tab sends single GET requests to remote servers, and then renders the page. However, an extension works similar to a remote server. Installing an extension in a browser creates a standalone web server in the browser. The extension is isolated from all tab pages. - -![Extensions use a different communication model](./index-images/index-image3-upsidedown.png) - - - -## Extension architecture - -The following list outlines helpful information as it relates to the architecture of an extension. - - - -#### Extension web server bundle - -An extension is a bundle of web resources. The web resources are similar to other resources that you (the web developer) publish to web servers. You bundle the web resources into a zip file when building an extension. - -The zip file includes HTML, CSS, JavaScript, and image files. One more file is required in the root of the zip file. The other file is the manifest file that is named `manifest.json`. The manifest file is the blueprint of your extension and includes the version of your extension, the title, permissions needed for the extension to run, and so on. - - - -#### Launching the extension server - -Web servers contain your web bundle. A browser navigates to URLs on the server, and downloads the file to render in the browser. A browser navigates using certificates, configuration files, and so on. If an `index.html` file is specified, the file is stored at a special location on the web server. - -When you use an extension, the tab page of your browser gets to the web bundle of your extension using the extension runtime. The extension runtime serves the files from the URL `extension://{some-long-unique-identifier}/index.html`, where `{some-long-unique-identifier}` is a unique identifier assigned to the extension during installation. Each extension uses a different unique identifier. Each identifier points to the web bundle that is installed in your browser. - - - -#### Communication with tabs and browser toolbar - -An extension can communicate with tabs and the browser toolbar. An extension can interact with the toolbar of your browser. Each extension manages running tab pages in separate threads, and DOM manipulation on each tab page is isolated. An extension uses the extensions API to communicate between the extension and tab pages. The extensions API provides extra capabilities that include notification management, storage management, and so on. - -Just like web servers, an extension waits for notifications when the browser is open. An extension and tab pages run in threads that are isolated from each other. To allow an extension to work with any tab page, use the extensions API and set the permissions in the manifest file. - - - -#### Opt-in permissions at install time - -An extension provides opt-in permissions at install time. You specify the extension permissions in the `manifest.json` file. When a user installs an extension, information about the permissions that the extension requires is displayed. Based on the type of permission required, the extension can extract and use information from the browser. - - - -## See also - -* [Sample: Picture viewer pop-up webpage](../samples/picture-viewer-popup-webpage.md) -* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) - Browse and install extensions for Microsoft Edge. +For concepts, see [Extension concepts and architecture](./architecture.md). diff --git a/microsoft-edge/extensions/getting-started/manifest-format.md b/microsoft-edge/extensions/getting-started/manifest-format.md index cd357684d0..3dc45b02a3 100644 --- a/microsoft-edge/extensions/getting-started/manifest-format.md +++ b/microsoft-edge/extensions/getting-started/manifest-format.md @@ -12,9 +12,9 @@ ms.date: 06/23/2023 Every extension for Microsoft Edge has a JSON-formatted manifest file, named `manifest.json`. The manifest file is the blueprint of your extension. The manifest file includes information such as: -* The version number of the extension. -* The title of the extension. -* The permissions that are needed for the extension to run. +* The version number of the extension. +* The title of the extension. +* The permissions that are needed for the extension to run. diff --git a/microsoft-edge/extensions/index.md b/microsoft-edge/extensions/index.md index c7899264ec..59a782c47d 100644 --- a/microsoft-edge/extensions/index.md +++ b/microsoft-edge/extensions/index.md @@ -20,7 +20,7 @@ The present documentation is for extension developers, rather than end-users of **Detailed contents:** * [Introduction](#introduction) -* [Sites for extensions for various browsers](#sites-for-extensions-for-various-browsers) +* [Creating an extension for various browsers](#creating-an-extension-for-various-browsers) * [Benefits of Chromium-based extensions](#benefits-of-chromium-based-extensions) * [Browser compatibility and extension testing](#browser-compatibility-and-extension-testing) * [Browser-specific APIs](#browser-specific-apis) @@ -50,9 +50,12 @@ An extension should include at least the following features: * A JavaScript file that defines the function. * HTML and CSS files that define the user interface. +See also: +* [Get started developing an extension](./getting-started/index.md) + -## Sites for extensions for various browsers +## Creating an extension for various browsers Great places to begin your extension development tutorials and documentation research are sites hosted by the browser organizations. @@ -122,7 +125,7 @@ Some browser extension stores allow you to download listed extensions from other To make sure your users find your extension in Microsoft Edge, publish your extension on the Microsoft Edge Add-ons site. See [Publish an extension at Microsoft Edge Add-ons](#publish-an-extension-at-microsoft-edge-add-ons), below. -Users might need to install your extension in different browsers. In this scenario, you can migrate existing Chromium extensions from one browser to another. +Users might need to install your extension in different browsers. In this scenario, you can migrate existing Chromium extensions from one browser to another. @@ -214,9 +217,7 @@ To improve your extension's quality and eligibility for the **Featured** badge, ## See also - - - + @@ -244,8 +245,9 @@ To improve your extension's quality and eligibility for the **Featured** badge, ###### Development -* [Extension concepts and architecture](./getting-started/index.md) -* [Sideload an extension to install and test it locally](./getting-started/extension-sideloading.md) +* [Get started developing an extension](./getting-started/index.md) +* [Extension concepts and architecture](./getting-started/architecture.md) +* [Sideload an extension to install and test it locally](./getting-started/extension-sideloading.md) * [Port a Chrome extension to Microsoft Edge](./developer-guide/port-chrome-extension.md) * [Publish a Microsoft Edge extension](./publish/publish-extension.md) * [Best practices for extensions](./developer-guide/best-practices.md) diff --git a/microsoft-edge/extensions/landing/index.yml b/microsoft-edge/extensions/landing/index.yml index 57143b893a..346a0a803f 100644 --- a/microsoft-edge/extensions/landing/index.yml +++ b/microsoft-edge/extensions/landing/index.yml @@ -55,9 +55,12 @@ landingContent: - text: User docs about Microsoft Edge extensions url: ../getting-started/user-docs.md - - text: Extension concepts and architecture + - text: Get started developing an extension url: ../getting-started/index.md + - text: Extension concepts and architecture + url: ../getting-started/architecture.md + - text: Sideload an extension to install and test it locally url: ../getting-started/extension-sideloading.md @@ -117,7 +120,7 @@ landingContent: - linkListType: concept links: - - text: Create a DevTools extension, adding a custom tool tab and panel + - text: Add a custom tool in Microsoft Edge DevTools url: ../developer-guide/devtools-extension.md - text: Develop an extension for the Microsoft Edge sidebar diff --git a/microsoft-edge/extensions/publish/aad-account.md b/microsoft-edge/extensions/publish/aad-account.md index 54ddb503eb..321321342b 100644 --- a/microsoft-edge/extensions/publish/aad-account.md +++ b/microsoft-edge/extensions/publish/aad-account.md @@ -26,13 +26,13 @@ After your Partner Center account is able to publish Microsoft Edge extensions, Different programs on Partner Center require different types of accounts: -* The Microsoft Edge program (like the Windows developer program) requires a Partner Center _developer_ account. A Partner Center developer account has a Primary Owner that's a Microsoft account (MSA). +* The Microsoft Edge program (like the Windows developer program) requires a Partner Center _developer_ account. A Partner Center developer account has a Primary Owner that's a Microsoft account (MSA). -* In contrast, Azure marketplace requires a Partner Center _commercial_ account. (To enroll, the user has to log in with their work account.) +* In contrast, Azure marketplace requires a Partner Center _commercial_ account. (To enroll, the user has to log in with their work account.) Also see these articles in the Partner Center documentation: -* [Manage your Partner Center account](/partner-center/partner-center-account-setup) -* [Microsoft Partner Network membership benefits](/partner-center/mpn-overview) +* [Manage your Partner Center account](/partner-center/partner-center-account-setup) +* [Microsoft Partner Network membership benefits](/partner-center/mpn-overview) @@ -125,5 +125,5 @@ If you need help or assistance with associating your Microsoft Entra ID account ## See also -* [Quickstart: Set up a tenant](/azure/active-directory/develop/quickstart-create-new-tenant) - General information about Microsoft Entra tenants in the Microsoft Entra ID documentation. +* [Quickstart: Set up a tenant](/azure/active-directory/develop/quickstart-create-new-tenant) - General information about Microsoft Entra tenants in the Microsoft Entra ID documentation. diff --git a/microsoft-edge/extensions/publish/create-dev-account.md b/microsoft-edge/extensions/publish/create-dev-account.md index c55374dbc2..9ac4e6ed61 100644 --- a/microsoft-edge/extensions/publish/create-dev-account.md +++ b/microsoft-edge/extensions/publish/create-dev-account.md @@ -72,9 +72,9 @@ To register for the Microsoft Edge program, you need a Microsoft account (MSA). If you don't have a Partner Center account, or you have a Partner Center account but its Primary Owner isn't an MSA, you must either: -* Use an existing MSA to register with the Microsoft Edge program. +* Use an existing MSA to register with the Microsoft Edge program. -* Create a new MSA. +* Create a new MSA. If you don't have an MSA: diff --git a/microsoft-edge/extensions/publish/github.md b/microsoft-edge/extensions/publish/github.md index 2496383241..34b77a4092 100644 --- a/microsoft-edge/extensions/publish/github.md +++ b/microsoft-edge/extensions/publish/github.md @@ -60,4 +60,4 @@ Let us know if this article was helpful or if you have any feedback. For help w ## See also -* [Publish a Microsoft Edge extension](publish-extension.md) +* [Publish a Microsoft Edge extension](publish-extension.md) diff --git a/microsoft-edge/extensions/publish/hosting-and-updating.md b/microsoft-edge/extensions/publish/hosting-and-updating.md index 35c75b2241..0877c4faa0 100644 --- a/microsoft-edge/extensions/publish/hosting-and-updating.md +++ b/microsoft-edge/extensions/publish/hosting-and-updating.md @@ -19,8 +19,8 @@ Most extensions are published at [Microsoft Edge Add-ons](https://microsoftedge. All extensions are distributed to users as a special archive (`.zip`) file with a `.crx` suffix. Extensions that are published at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com) are uploaded as `.zip` files. The publishing process automatically converts the `.zip` file into a `.crx` file. The following two scenarios don't require you to publish your extension at Microsoft Edge Add-ons: -* Extensions that are distributed using Enterprise policy. -* Using unpacked extension directories on a local machine when Microsoft Edge is in developer mode. +* Extensions that are distributed using Enterprise policy. +* Using unpacked extension directories on a local machine when Microsoft Edge is in developer mode. In both cases, Microsoft Edge periodically checks extension hosts for new versions of installed extensions and automatically updates them without user intervention. diff --git a/microsoft-edge/extensions/publish/manage-settings.md b/microsoft-edge/extensions/publish/manage-settings.md index 3769608d5d..cbe65b7fc4 100644 --- a/microsoft-edge/extensions/publish/manage-settings.md +++ b/microsoft-edge/extensions/publish/manage-settings.md @@ -18,9 +18,9 @@ Manage your account settings and profile details for your Microsoft Edge Develop To display your account settings, select the gear icon (Settings) in the upper right-hand corner of [Partner Center](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd) and then select **Developer settings**. In **Developer settings**, you can review and update the following information. -* Review information about your account. -* Links to other pages to review information. -* Edit your account information. +* Review information about your account. +* Links to other pages to review information. +* Edit your account information. In the **Account details** section, review the type of your account and its status. Your Seller ID and other publisher ID information is also displayed in the **Account details** section. These values are assigned by Microsoft to uniquely identify your developer account and are read-only. diff --git a/microsoft-edge/extensions/publish/publish-extension.md b/microsoft-edge/extensions/publish/publish-extension.md index 661e48495c..8f0c6dc7fe 100644 --- a/microsoft-edge/extensions/publish/publish-extension.md +++ b/microsoft-edge/extensions/publish/publish-extension.md @@ -79,7 +79,7 @@ To prepare an extension to be submitted via Partner Center, to be published at [ #### Have a working prototype of the extension -Before publishing your extension, you must have a working prototype of the extension ready. For information on how to create an extension, see [Extension concepts and architecture](../getting-started/index.md). +Before publishing your extension, you must have a working prototype of the extension ready. See [Get started developing an extension](../getting-started/index.md). diff --git a/microsoft-edge/extensions/publish/verify-microsoft-edge-program.md b/microsoft-edge/extensions/publish/verify-microsoft-edge-program.md index 8916f119cf..2635cafe4d 100644 --- a/microsoft-edge/extensions/publish/verify-microsoft-edge-program.md +++ b/microsoft-edge/extensions/publish/verify-microsoft-edge-program.md @@ -115,11 +115,11 @@ You can check verification status at Partner Center in **[Account Settings | Leg There are three possible results when you check your verification status: -* **Authorized/Accepted**: The information you submitted was verified, and you're notified of your acceptance into the program. No further action is required. +* **Authorized/Accepted**: The information you submitted was verified, and you're notified of your acceptance into the program. No further action is required. -* **Pending**: The verification process has started but isn't complete. If you've completed the email verification step, no further action is required on your part. Verification usually takes three to five business days. You can monitor verification status at **Account Settings | Legal Info**. +* **Pending**: The verification process has started but isn't complete. If you've completed the email verification step, no further action is required on your part. Verification usually takes three to five business days. You can monitor verification status at **Account Settings | Legal Info**. -* **Action Required/Rejected**: The information you submitted couldn't be verified. The reason, and instructions for how to appeal, appear in the **Account Verification** pane. See [Appealing a rejected application](#appealing-a-rejected-application) in the next section. +* **Action Required/Rejected**: The information you submitted couldn't be verified. The reason, and instructions for how to appeal, appear in the **Account Verification** pane. See [Appealing a rejected application](#appealing-a-rejected-application) in the next section. @@ -144,9 +144,9 @@ Switching back to an individual account from an enterprise account isn't possibl To view your verification status, go to [Partner Center](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd) and then select **Account settings**. You can continue to build and test the extension and prepare it to be submitted, while you wait for the verification process to finish. See the following extension documents: -* [Extension concepts and architecture](../getting-started/index.md) - Gives an overview of extensions and basic publishing information. +* [Extension concepts and architecture](../getting-started/architecture.md) - Gives an overview of extensions and basic publishing information. -* [Publish an extension](publish-extension.md) - Provides detailed information and steps for publishing an extension. +* [Publish an extension](publish-extension.md) - Provides detailed information and steps for publishing an extension. -* [Add users to the Microsoft Edge program](aad-account.md) - Describes how to add more users to your Microsoft Edge program and your Partner Center developer account. To enable adding users, you associate your organization's Microsoft Entra ID account with your Microsoft account (MSA) on Partner Center. +* [Add users to the Microsoft Edge program](aad-account.md) - Describes how to add more users to your Microsoft Edge program and your Partner Center developer account. To enable adding users, you associate your organization's Microsoft Entra ID account with your Microsoft account (MSA) on Partner Center. diff --git a/microsoft-edge/extensions/samples/index.md b/microsoft-edge/extensions/samples/index.md index 36e5b8d771..468dbe4f61 100644 --- a/microsoft-edge/extensions/samples/index.md +++ b/microsoft-edge/extensions/samples/index.md @@ -14,7 +14,7 @@ Use the extensions demos to learn how to develop extensions for Microsoft Edge. -## MicrosoftEdge-Extensions repo +## microsoft / MicrosoftEdge-Extensions repo -## MicrosoftEdge/Demos repo +## MicrosoftEdge / Demos repo +## GoogleChrome / chrome-extensions-samples repo + +* [GoogleChrome / chrome-extensions-samples](https://github.com/GoogleChrome/chrome-extensions-samples) repo. + * [README.md](https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/README.md) + * [Samples](https://developer.chrome.com/docs/extensions/samples/) - UI to explore the Chrome Extension samples repo. + + + +#### Sidebar samples + +* [Dictionary side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.sidepanel-dictionary) +* [Global side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-global) +* [Multiple side panels example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-multiple) +* [Opening the side panel through a user interaction](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open) +* [Site-specific side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-site-specific) + +See also: +* [Develop an extension for the Microsoft Edge sidebar](../developer-guide/sidebar.md) diff --git a/microsoft-edge/extensions/samples/picture-inserter-content-script.md b/microsoft-edge/extensions/samples/picture-inserter-content-script.md index 9390493a4d..ab7feaa9c9 100644 --- a/microsoft-edge/extensions/samples/picture-inserter-content-script.md +++ b/microsoft-edge/extensions/samples/picture-inserter-content-script.md @@ -23,10 +23,10 @@ This sample uses JavaScript code to insert the `stars.jpeg` image at the top of This sample demonstrates the following extension features: -* Injecting JavaScript libraries into an extension. -* Exposing extension assets to browser tabs. -* Including content webpages in existing browser tabs. -* Having content webpages listen for messages from pop-ups and respond. +* Injecting JavaScript libraries into an extension. +* Exposing extension assets to browser tabs. +* Including content webpages in existing browser tabs. +* Having content webpages listen for messages from pop-ups and respond. @@ -171,7 +171,7 @@ See also: -## Install the sample locally +## Install the sample locally (sideloading) Instead of installing the sample from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), you'll install the sample locally, so that you can possibly modify it and quickly test the changes. Installing locally is sometimes called _sideloading_ an extension. diff --git a/microsoft-edge/extensions/samples/picture-viewer-popup-webpage.md b/microsoft-edge/extensions/samples/picture-viewer-popup-webpage.md index acd375eb2b..8458024586 100644 --- a/microsoft-edge/extensions/samples/picture-viewer-popup-webpage.md +++ b/microsoft-edge/extensions/samples/picture-viewer-popup-webpage.md @@ -146,7 +146,7 @@ See also: -## Install the sample locally +## Install the sample locally (sideloading) Instead of installing the sample from [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), you'll install the sample locally, so that you can possibly modify it and quickly test the changes. Installing locally is sometimes called _sideloading_ an extension. diff --git a/microsoft-edge/extensions/update/auto-update.md b/microsoft-edge/extensions/update/auto-update.md index ef37d8e5d9..23facdb3b3 100644 --- a/microsoft-edge/extensions/update/auto-update.md +++ b/microsoft-edge/extensions/update/auto-update.md @@ -36,9 +36,9 @@ In order to maintain user privacy, Microsoft Edge doesn't send any `Cookie` head When you set your extension to automatically update on users' machines, your extension shares the following benefits with Microsoft Edge: -* Incorporate bug and security fixes. -* Add new features or performance enhancements. -* Improve the user interface. +* Incorporate bug and security fixes. +* Add new features or performance enhancements. +* Improve the user interface. Your extensions are hosted at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), and you can update your extension using the same mechanism as Microsoft Edge. You don't control the update mechanism. @@ -99,8 +99,8 @@ Microsoft Edge automatically checks for updates of extensions every few hours. The basic mechanism to update using parameters is simple. To automatically update your extension: -1. Upload your static XML file on your web server, such as Apache. -1. Update the XML file as you release new versions of your extensions. +1. Upload your static XML file on your web server, such as Apache. +1. Update the XML file as you release new versions of your extensions. Take advantage of the fact that some parameters added to the update manifest request indicate the extension `ID` and `version`. You can use the same `update URL` for all your extensions, instead of a static XML file. To use the same `update URL` for all your extensions, point to a URL that runs dynamic server-side code that tests the parameters. @@ -118,15 +118,14 @@ id={id}&v={version} For example, the following two extensions both point to the same update URL `http://contoso.com/extension_updates.php`. -* Extension 1 - * ID: `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa` - * update URL: `http://contoso.com/extension_updates.php` - * Version: `1.1` -* Extension 2 - * ID: `bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb` - * update URL: `http://contoso.com/extension_updates.php` - * Version: `0.4` - +* Extension 1 + * ID: `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa` + * update URL: `http://contoso.com/extension_updates.php` + * Version: `1.1` +* Extension 2 + * ID: `bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb` + * update URL: `http://contoso.com/extension_updates.php` + * Version: `0.4` The following examples are requests to update each extension. diff --git a/microsoft-edge/index.yml b/microsoft-edge/index.yml index 7377816650..c0fa952f1e 100644 --- a/microsoft-edge/index.yml +++ b/microsoft-edge/index.yml @@ -278,7 +278,7 @@ conceptualContent: itemType: overview - text: Extension concepts and architecture - url: ./extensions/getting-started/index.md + url: ./extensions/getting-started/architecture.md itemType: overview - text: "Sample: Picture viewer pop-up webpage" @@ -289,6 +289,10 @@ conceptualContent: url: ./extensions/samples/picture-inserter-content-script.md itemType: sample + - text: Get started developing an extension + url: ./extensions/getting-started/index.md + itemType: how-to-guide + - text: Port a Chrome extension to Microsoft Edge url: ./extensions/developer-guide/port-chrome-extension.md itemType: how-to-guide diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md index 1377b61be4..1571e7b30a 100644 --- a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md +++ b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md @@ -14,15 +14,15 @@ Using a service worker, a Progressive Web App (PWA) can do work in the backgroun Consider the following use cases: -* An email app that lets users compose messages and send them at any time, even when offline. -* A news app that fetches new articles every day, for the user to read later when they open the app. -* A music app that lets users download songs for listening offline. +* An email app that lets users compose messages and send them at any time, even when offline. +* A news app that fetches new articles every day, for the user to read later when they open the app. +* A music app that lets users download songs for listening offline. All three of these use cases are possible with PWAs, by using the following APIs: -* Background Sync API -* Periodic Background Sync API -* Background Fetch API +* Background Sync API +* Periodic Background Sync API +* Background Fetch API Although these APIs have similar names, they are different in nature. @@ -83,8 +83,8 @@ To learn more about the `ServiceWorkerRegistration` interface, see [ServiceWorke The first thing to do is to request a sync. This can be done by your app frontend or your service worker. -* Requesting the sync from the frontend is good when you want to leave the user in charge of synchronizing later or not. -* Requesting the sync from the service worker is good when you want this to be transparent to the user. In this case, the service worker can detect the failed fetch request and request the sync right away. +* Requesting the sync from the frontend is good when you want to leave the user in charge of synchronizing later or not. +* Requesting the sync from the service worker is good when you want this to be transparent to the user. In this case, the service worker can detect the failed fetch request and request the sync right away. To request a sync, you need a `ServiceWorkerRegistration` and a tag name. From the app frontend code, do the following: diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files.md b/microsoft-edge/progressive-web-apps/how-to/handle-files.md index 2f5ade29db..0e0b121e2f 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-files.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-files.md @@ -21,8 +21,8 @@ When a PWA is registered as a file handler for certain file types, the operating The first thing to do is to declare which types of files your app handles. This is done in your app manifest file, by using the `file_handlers` array member. Each entry in the `file_handlers` array needs to have two properties: -* `action`: The URL the operating system should navigate to when launching your PWA. -* `accept`: An object of accepted file types. Keys are MIME-types (partial types, using the wildcard symbol `*`, are accepted), and values are arrays of accepted file extensions. +* `action`: The URL the operating system should navigate to when launching your PWA. +* `accept`: An object of accepted file types. Keys are MIME-types (partial types, using the wildcard symbol `*`, are accepted), and values are arrays of accepted file extensions. Consider the following example: diff --git a/microsoft-edge/progressive-web-apps/how-to/index.md b/microsoft-edge/progressive-web-apps/how-to/index.md index c4f41e493b..1ebe9b34ab 100644 --- a/microsoft-edge/progressive-web-apps/how-to/index.md +++ b/microsoft-edge/progressive-web-apps/how-to/index.md @@ -211,7 +211,7 @@ self.addEventListener('fetch', event => { This service worker explicitly caches three files: * `./` means `index.html` -* `./converter.js` +* `./converter.js` * `./converter.css` Two additional files are are cached automatically by the browser: diff --git a/microsoft-edge/progressive-web-apps/how-to/microsoft-store.md b/microsoft-edge/progressive-web-apps/how-to/microsoft-store.md index e064489375..61b964a592 100644 --- a/microsoft-edge/progressive-web-apps/how-to/microsoft-store.md +++ b/microsoft-edge/progressive-web-apps/how-to/microsoft-store.md @@ -32,27 +32,27 @@ To submit your app to the [Microsoft Store](https://apps.microsoft.com), you use To create an app reservation: -1. Before you can create an app reservation, you must have a **personal** Microsoft account (not a work Microsoft account or a school Microsoft account) that is enrolled in the Windows Developer Program. - 1. If you don't already have one, create a personal Microsoft account at [account.microsoft.com](https://account.microsoft.com/). - 1. Enroll in the Windows Developer program, by following the steps in [Open a developer account in Partner Center](/windows/apps/publish/partner-center/open-a-developer-account). +1. Before you can create an app reservation, you must have a **personal** Microsoft account (not a work Microsoft account or a school Microsoft account) that is enrolled in the Windows Developer Program. + 1. If you don't already have one, create a personal Microsoft account at [account.microsoft.com](https://account.microsoft.com/). + 1. Enroll in the Windows Developer program, by following the steps in [Open a developer account in Partner Center](/windows/apps/publish/partner-center/open-a-developer-account). -1. Once your account is enrolled in the app developer program, follow these steps to create an app reservation: - 1. Go to the [Partner Center Dashboard](https://partner.microsoft.com/dashboard/home). Sign in with the account you enrolled. - 1. Under **Workspaces**, select **Apps and games**. The **Apps and games | Overview** page appears. - 1. Select **New product** > **MSIX or PWA app**. - 1. When prompted, enter a name for your reservation, and then select **Reserve product name**. +1. Once your account is enrolled in the app developer program, follow these steps to create an app reservation: + 1. Go to the [Partner Center Dashboard](https://partner.microsoft.com/dashboard/home). Sign in with the account you enrolled. + 1. Under **Workspaces**, select **Apps and games**. The **Apps and games | Overview** page appears. + 1. Select **New product** > **MSIX or PWA app**. + 1. When prompted, enter a name for your reservation, and then select **Reserve product name**. - ![Create an app reservation on Microsoft Partner Center](./microsoft-store-images/windows-partner-center-new-product.png) + ![Create an app reservation on Microsoft Partner Center](./microsoft-store-images/windows-partner-center-new-product.png) -1. To display your publisher details for use in the [Package your PWA](#package-your-pwa-for-the-store) section, select **Product management** > **Product Identity**. +1. To display your publisher details for use in the [Package your PWA](#package-your-pwa-for-the-store) section, select **Product management** > **Product Identity**. - ![Copy your publisher information from Microsoft Partner Center](./microsoft-store-images/windows-partner-center-publisher-info.png) - + ![Copy your publisher information from Microsoft Partner Center](./microsoft-store-images/windows-partner-center-publisher-info.png) + -1. Copy and save the following values. - * **Package ID** - * **Publisher ID** - * **Publisher display name** +1. Copy and save the following values. + * **Package ID** + * **Publisher ID** + * **Publisher display name** @@ -62,33 +62,32 @@ Now that you've gathered the publishing information about your app, generate a W To generate an app package: -1. Go to [PWA Builder](https://www.pwabuilder.com). +1. Go to [PWA Builder](https://www.pwabuilder.com). -1. Under **Ship your PWA to app stores**, enter the URL of your PWA in the text box, and then click the **Start** button. +1. Under **Ship your PWA to app stores**, enter the URL of your PWA in the text box, and then click the **Start** button. - Your PWA is evaluated to ensure it is store-ready. + Your PWA is evaluated to ensure it is store-ready. -1. If the evaluation in the PWABuilder report card page indicates that your PWA is ready to be packaged, continue to the next step. If the evaluation indicates that your PWA is not ready to be packaged, examine the **Action Items** section to see how to improve your PWA: +1. If the evaluation in the PWABuilder report card page indicates that your PWA is ready to be packaged, continue to the next step. If the evaluation indicates that your PWA is not ready to be packaged, examine the **Action Items** section to see how to improve your PWA: - ![Report card page](./microsoft-store-images/report-card.png) + ![Report card page](./microsoft-store-images/report-card.png) -1. Once your PWA is ready to be packaged, in the upper-right corner of the PWABuilder report card page, click the **Package For Stores** button. A dialog opens, showing the message **Awesome! Your PWA is store ready!**. +1. Once your PWA is ready to be packaged, in the upper-right corner of the PWABuilder report card page, click the **Package For Stores** button. A dialog opens, showing the message **Awesome! Your PWA is store ready!**. -1. Under **Windows**, click the **Generate Package** button. The **Windows Package Options** dialog opens. +1. Under **Windows**, click the **Generate Package** button. The **Windows Package Options** dialog opens. -1. Paste the following values, which you saved in the [Create an app reservation](#create-an-app-reservation) section above: - * **Package ID** - * **Publisher display name** - * **Publisher ID** +1. Paste the following values, which you saved in the [Create an app reservation](#create-an-app-reservation) section above: + * **Package ID** + * **Publisher display name** + * **Publisher ID** - ![Pasting publisher information into the Windows Package Options page](./microsoft-store-images/pwabuilder-windows-package-options.png) + ![Pasting publisher information into the Windows Package Options page](./microsoft-store-images/pwabuilder-windows-package-options.png) -1. Click the **Download Package** button to download your Windows package. +1. Click the **Download Package** button to download your Windows package. Your download is a `.zip` archive that contains an `.msixbundle` file and a `.classic.appxbundle` file. The two app packages allow your PWA to run on a wide variety of Windows versions. See also: - * [What is a classic package?](https://github.com/pwa-builder/pwabuilder-windows-chromium-docs/blob/master/classic-package.md) * [Bundling MSIX packages](/windows/msix/package/bundling-overview). @@ -98,15 +97,17 @@ See also: To submit your app to the [Microsoft Store](https://apps.microsoft.com): -1. Go to [Microsoft Partner Center](https://partner.microsoft.com/dashboard/windows/overview). -1. Select your app. -1. Click the **Start your submission** button. +1. Go to [Microsoft Partner Center](https://partner.microsoft.com/dashboard/windows/overview). + +1. Select your app. + +1. Click the **Start your submission** button. - ![Start a new app submission on Microsoft Partner Center](./microsoft-store-images/windows-partner-center-start-submission.png) + ![Start a new app submission on Microsoft Partner Center](./microsoft-store-images/windows-partner-center-start-submission.png) -1. When you're prompted, provide information about your app, such as pricing and age rating. +1. When you're prompted, provide information about your app, such as pricing and age rating. -1. On the **Packages** prompt, select the `.msixbundle` and the `.classic.appxbundle` files you generated in the [Package your PWA](#package-your-pwa-for-the-store) section. +1. On the **Packages** prompt, select the `.msixbundle` and the `.classic.appxbundle` files you generated in the [Package your PWA](#package-your-pwa-for-the-store) section. After you submit the app, the app is reviewed, typically within 24 to 48 hours. After the app is approved, your PWA is available in the Microsoft Store. diff --git a/microsoft-edge/progressive-web-apps/how-to/notifications-badges.md b/microsoft-edge/progressive-web-apps/how-to/notifications-badges.md index 279a7a9ac1..be42a0fef2 100644 --- a/microsoft-edge/progressive-web-apps/how-to/notifications-badges.md +++ b/microsoft-edge/progressive-web-apps/how-to/notifications-badges.md @@ -12,14 +12,14 @@ ms.date: 06/16/2023 Progressive Web Apps (PWAs) are able to do work when the app isn't running, such as updating data in the cache, or sending messages when the device regains connectivity. To do this, use the following APIs, which are described in [Synchronize and update a PWA in the background](background-syncs.md): -* Background Sync API -* Periodic Background Sync API -* Background Fetch API +* Background Sync API +* Periodic Background Sync API +* Background Fetch API To re-engage the user with the app after a background task has been completed, you can use notifications and badges. To do this, use the following APIs: -* App Badging API -* Notifications API +* App Badging API +* Notifications API Badges are user-friendly, and can be used frequently. Badges don't interrupt the user's workflow, and are useful for displaying a small amount of information, such as the number of messages received. diff --git a/microsoft-edge/progressive-web-apps/how-to/offline.md b/microsoft-edge/progressive-web-apps/how-to/offline.md index 8b39f57ab1..cb5d7b172c 100644 --- a/microsoft-edge/progressive-web-apps/how-to/offline.md +++ b/microsoft-edge/progressive-web-apps/how-to/offline.md @@ -35,8 +35,8 @@ Web Storage works synchronously in your app's main thread only. This means that Each type of Web Storage, session and local, is maintained as a separate data store that's isolated to the domain that created it. -* `sessionStorage` persists only for the duration of the session - for example, while the browser is open, which includes when the page is refreshed. -* `localStorage` persists until the data is removed by the app code, the user, or the browser. +* `sessionStorage` persists only for the duration of the session - for example, while the browser is open, which includes when the page is refreshed. +* `localStorage` persists until the data is removed by the app code, the user, or the browser. The following code shows how to use `localStorage`, which is similar to how `sessionStorage` is used: diff --git a/microsoft-edge/progressive-web-apps/how-to/share.md b/microsoft-edge/progressive-web-apps/how-to/share.md index 100c1a2dc6..ffe1a746f3 100644 --- a/microsoft-edge/progressive-web-apps/how-to/share.md +++ b/microsoft-edge/progressive-web-apps/how-to/share.md @@ -31,10 +31,10 @@ Web sharing only works on sites served over HTTPS (which is the case for PWAs), To share content such as links, text, or files, use the `navigator.share` function, as shown below. The `navigator.share` function accepts an object that should have at least one of the following properties: -* `title`: a short title for the shared content. -* `text`: a longer description for the shared content. -* `url`: the address of a resource to be shared. -* `files`: an array of files to be shared. +* `title`: A short title for the shared content. +* `text`: A longer description for the shared content. +* `url`: The address of a resource to be shared. +* `files`: An array of files to be shared. ```javascript function shareSomeContent(title, text, url) { diff --git a/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md b/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md index 93299c79fa..a880a2e6e6 100644 --- a/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md +++ b/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md @@ -13,9 +13,9 @@ ms.date: 05/22/2024 A Progressive Web App (PWA) that's installed on the desktop can display content where the title bar normally is, to make the PWA feel more native, by using the Window Controls Overlay API. The Window Controls Overlay API does the following: -* Allows you to display web content over the entire surface area of the app. -* Moves the critical system-required window controls into an overlay. -* Makes it possible for your content to stay clear of this overlay. +* Allows you to display web content over the entire surface area of the app. +* Moves the critical system-required window controls into an overlay. +* Makes it possible for your content to stay clear of this overlay. A Progressive Web App (PWA) can define how it should be displayed on mobile platforms, by using the [display](https://developer.mozilla.org/docs/Web/Manifest/display) member in the web app manifest file. However, to create an immersive, native-like experience, _desktop_ PWAs can use another approach. @@ -53,8 +53,8 @@ When the Window Controls Overlay feature is enabled, the user can choose to have ![Select the title bar toggle button](./window-controls-overlay-images/wco-toggle-button.png) Your code can't assume that the window controls overlay is displayed, because: -* The user can choose whether to display the title bar. -* Your app can also run in a web browser or on a mobile device, as well as running as a desktop app. +* The user can choose whether to display the title bar. +* Your app can also run in a web browser or on a mobile device, as well as running as a desktop app. Therefore, your code needs to react to title bar geometry changes. To learn more, see [React to overlay changes](#react-to-overlay-changes). diff --git a/microsoft-edge/progressive-web-apps/index.md b/microsoft-edge/progressive-web-apps/index.md index 412ebb79e3..3b45b860b0 100644 --- a/microsoft-edge/progressive-web-apps/index.md +++ b/microsoft-edge/progressive-web-apps/index.md @@ -30,29 +30,29 @@ To start building a PWA, see [Get started developing a PWA](./how-to/index.md). When installed on a device, PWAs function just like other apps. For example: -* PWAs have their own application icons that can be added to a device's home screen or task bar. -* PWAs can be launched automatically when an associated file type is opened. -* PWAs can run when the user signs in. -* PWAs can be submitted to app stores, such as the [Microsoft Store](https://apps.microsoft.com). +* PWAs have their own application icons that can be added to a device's home screen or task bar. +* PWAs can be launched automatically when an associated file type is opened. +* PWAs can run when the user signs in. +* PWAs can be submitted to app stores, such as the [Microsoft Store](https://apps.microsoft.com). #### Advanced capabilities PWAs also have access to advanced capabilities. For example: -* PWAs can continue working when the device is offline. -* PWAs support push notifications. -* PWAs can perform periodic updates even when the application is not running. -* PWAs can access hardware features. +* PWAs can continue working when the device is offline. +* PWAs support push notifications. +* PWAs can perform periodic updates even when the application is not running. +* PWAs can access hardware features. #### Web-related advantages Finally, PWAs can run in web browsers, just like websites. Running like websites gives PWAs with advantages, such as: -* PWAs can be indexed by search engines. -* PWAs can be shared and launched from a standard web link. -* PWAs are safe for users because they use secure HTTPS endpoints and other user safeguards. -* PWAs adapt to the user's screen size or orientation, and input method. -* PWAs can use advanced web APIs such as WebBluetooth, WebUSB, WebPayment, WebAuthn, or WebAssembly. +* PWAs can be indexed by search engines. +* PWAs can be shared and launched from a standard web link. +* PWAs are safe for users because they use secure HTTPS endpoints and other user safeguards. +* PWAs adapt to the user's screen size or orientation, and input method. +* PWAs can use advanced web APIs such as WebBluetooth, WebUSB, WebPayment, WebAuthn, or WebAssembly. #### Lower development cost @@ -76,15 +76,15 @@ Desktop computing continues to be the primary productivity environment for many There isn't much you can't do today with web technologies. Many features that were once only possible by using device-specific languages can now be achieved by using standard web technologies. For example: -* Handle files. -* Share content with other apps. -* Access the clipboard. -* Sync data and fetch resources in the background. -* Access device hardware such as Bluetooth and USB. -* Store content in databases. -* Take advantage of hardware accelerated graphics. -* Use CSS layouts, animations, and filters to create advanced designs. -* Run near-compiled performance code with WebAssembly. +* Handle files. +* Share content with other apps. +* Access the clipboard. +* Sync data and fetch resources in the background. +* Access device hardware such as Bluetooth and USB. +* Store content in databases. +* Take advantage of hardware accelerated graphics. +* Use CSS layouts, animations, and filters to create advanced designs. +* Run near-compiled performance code with WebAssembly. Thanks to Microsoft Edge, PWAs on desktop can take full advantage of these capabilities to deliver what users expect desktop apps to be able to do. These capabilities provide more engaging experiences across web and desktop platforms. diff --git a/microsoft-edge/progressive-web-apps/whats-new/pwa.md b/microsoft-edge/progressive-web-apps/whats-new/pwa.md index 915713fbdf..f4eaf70ec3 100644 --- a/microsoft-edge/progressive-web-apps/whats-new/pwa.md +++ b/microsoft-edge/progressive-web-apps/whats-new/pwa.md @@ -137,9 +137,9 @@ App sync is available on desktop devices only, at this stage. To keep your apps #### Redesigned Apps menu In Microsoft Edge, the **Apps** command in the **Settings and more** menu is being redesigned: -* The **Apps** menu icon can be added to the toolbar, for quick access. -* The popup menu can be pinned open as a sidebar to show your apps alongside web content. -* Customizable view and sort options have been added, along with a **My available apps** section to support the App Sync feature. +* The **Apps** menu icon can be added to the toolbar, for quick access. +* The popup menu can be pinned open as a sidebar to show your apps alongside web content. +* Customizable view and sort options have been added, along with a **My available apps** section to support the App Sync feature. Users can show the **Apps** menu icon on the toolbar, for quick access: @@ -184,8 +184,8 @@ Store-installed PWAs that are participating in the [URL Handlers origin trial](# The origin trial has been concluded. The URL Protocol Handlers capability is now shipping in Microsoft Edge 96 Stable. See also: -* [Protocol handlers origin trial](#protocol-handlers-origin-trial) -* [Handle protocols in a PWA](../how-to/handle-protocols.md) +* [Protocol handlers origin trial](#protocol-handlers-origin-trial) +* [Handle protocols in a PWA](../how-to/handle-protocols.md) @@ -198,9 +198,9 @@ Microsoft Edge Canary reached version 96 on Oct. 5, 2021. With a subset of our ###### Sort order You can sort your apps by any of the following: -* Recently used. -* Alphabetically, based on title. -* Date of installation. +* Recently used. +* Alphabetically, based on title. +* Date of installation. @@ -223,8 +223,8 @@ You can easily pin apps to the taskbar or **Start** menu. You can create a shor ###### App details page There's now an app details page, which provides way to easily access the following: -* Permissions and privacy details for the associated origin. -* More details about the application. +* Permissions and privacy details for the associated origin. +* More details about the application. The app details page: @@ -235,8 +235,8 @@ The app details page: ## What's new in Microsoft Edge 95 Microsoft Edge version 95 moved to Beta channel on Sep. 28, 2021. The origin trials remain active for the following features: -* [Window Controls Overlay for desktop PWAs](#window-controls-overlay-origin-trials). -* [URL Handlers](#url-handlers-origin-trial). +* [Window Controls Overlay for desktop PWAs](#window-controls-overlay-origin-trials). +* [URL Handlers](#url-handlers-origin-trial). We expect the [protocol handlers origin trial](#protocol-handlers-origin-trial) to end on Oct. 21, 2021. @@ -249,8 +249,8 @@ Microsoft Edge version 94 moved to Stable on Sep. 23, 2021. This release cycle w Due to the shortened release cycle of Microsoft Edge version 94, we focused on stabilizing the release cycle logistics, and we shifted feature development to Microsoft Edge version 95. The origin trials remain active for the following features: -* [Window Controls Overlay for desktop PWAs](#window-controls-overlay-origin-trials). -* [URL Handlers](#url-handlers-origin-trial). +* [Window Controls Overlay for desktop PWAs](#window-controls-overlay-origin-trials). +* [URL Handlers](#url-handlers-origin-trial). We expect the [protocol handlers origin trial](#protocol-handlers-origin-trial) to end with Microsoft Edge version 94 as we take final feedback and get ready to move the protocol handlers feature to Stable. In case you are enrolled in the origin trial for protocol handlers, we plan to end the trial period after Microsoft Edge version 94. We'll then determine when this feature will become Stable. @@ -321,15 +321,15 @@ _2023 update: This feature is no longer an origin trial, and is available to all When a user selects the ellipses (**...**) button in the app's title bar, the **App info** menu is displayed. We've updated the **App info** menu and streamlined the user experience in the following ways, to provide a user experience that's more like a desktop app than a browser UI: -* Moved the app **Publisher** information to the top level and made it the first thing a user sees: +* Moved the app **Publisher** information to the top level and made it the first thing a user sees: ![The new, streamlined App Info menu](./pwa-images/app-info.png) -* Moved the privacy information and controls into a dedicated 2nd-level **Privacy** menu: +* Moved the privacy information and controls into a dedicated 2nd-level **Privacy** menu: ![Privacy controls in the dedicated Privacy menu](./pwa-images/privacy-menu.png) -* Moved content-related tools into a dedicated 2nd-level **More tools** menu: +* Moved content-related tools into a dedicated 2nd-level **More tools** menu: ![Content-related tools are now found in the More Tools menu](./pwa-images/more-tools.png) @@ -338,10 +338,10 @@ When a user selects the ellipses (**...**) button in the app's title bar, the ** #### Post-install flyout dialog After a PWA is installed from the Microsoft Edge browser on Windows, users can now select from four options to easily launch their apps: -* **Pin to taskbar** -* **Pin to Start** -* **Create Desktop shortcut** -* **Auto-start on device login** +* **Pin to taskbar** +* **Pin to Start** +* **Create Desktop shortcut** +* **Auto-start on device login** For convenience, this flyout dialog is shown the first time the app is launched: diff --git a/microsoft-edge/test-and-automation/test-and-automation.md b/microsoft-edge/test-and-automation/test-and-automation.md index 3fa126203a..b1cfa2b81d 100644 --- a/microsoft-edge/test-and-automation/test-and-automation.md +++ b/microsoft-edge/test-and-automation/test-and-automation.md @@ -73,13 +73,13 @@ See [Puppeteer overview](../puppeteer/index.md). WebDriver allows you to automate Microsoft Edge by simulating user interaction. Tests that use WebDriver have some advantages over JavaScript unit tests that run in the browser: -* Accesses functionality and information that's not available to JavaScript running in browsers. +* Accesses functionality and information that's not available to JavaScript running in browsers. -* Simulates user events or OS-level events more accurately than JavaScript unit tests. +* Simulates user events or OS-level events more accurately than JavaScript unit tests. -* Manages multiple windows, tabs, and webpages in a single test session. +* Manages multiple windows, tabs, and webpages in a single test session. -* Runs multiple sessions of Microsoft Edge on a specific machine. +* Runs multiple sessions of Microsoft Edge on a specific machine. See [Use WebDriver to automate Microsoft Edge](../webdriver/index.md). diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index d8b64454ed..9dd6fec700 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -1196,12 +1196,14 @@ # ----------------------------------------------------------------------------- - name: Get started items: - - name: Extension concepts and architecture + - name: Get started developing an extension href: ./extensions/getting-started/index.md + - name: Extension concepts and architecture + href: ./extensions/getting-started/architecture.md + - name: Sideload an extension to install and test it locally href: ./extensions/getting-started/extension-sideloading.md - # ----------------------------------------------------------------------------- - name: Samples items: @@ -1248,14 +1250,21 @@ - name: Declare API permissions in the manifest href: ./extensions/developer-guide/declare-permissions.md -# ------------------------------------- - - name: Create a DevTools extension, adding a custom tool tab and panel - href: ./extensions/developer-guide/devtools-extension.md + + # - name: Develop a regular extension # see "Get started developing an extension" - name: Develop an extension for the Microsoft Edge sidebar href: ./extensions/developer-guide/sidebar.md displayName: sidebar extensions, sidepanel, side panel + - name: Add a custom tool in Microsoft Edge DevTools + items: + - name: Add a custom tool in Microsoft Edge DevTools + href: ./extensions/developer-guide/devtools-extension.md + + - name: "Sample: Custom DevTools tool" + href: ./extensions/developer-guide/devtools-extension-sample.md + - name: Native messaging href: ./extensions/developer-guide/native-messaging.md diff --git a/microsoft-edge/visual-studio-code/ide-integration.md b/microsoft-edge/visual-studio-code/ide-integration.md index 76e4bfbaa1..71da231b62 100644 --- a/microsoft-edge/visual-studio-code/ide-integration.md +++ b/microsoft-edge/visual-studio-code/ide-integration.md @@ -60,11 +60,11 @@ See [Debug Microsoft Edge in Visual Studio Code](debugger-for-edge.md). Use webhint, a customizable linting tool, to improve the functionality of your site, including: -* Accessibility. -* Performance. -* Cross-browser compatibility. -* PWA compatibility. -* Security. +* Accessibility. +* Performance. +* Cross-browser compatibility. +* PWA compatibility. +* Security. webhint checks your code for best practices and common errors. Identify and fix problems in your files, including HTML, CSS, JavaScript, and TypeScript. Hints appear as wavy underlines in the text editor, and are summarized in the **Problems** pane. @@ -78,9 +78,9 @@ Microsoft [Visual Studio](https://visualstudio.microsoft.com/vs) is an integrate In addition to the standard editor and debugger that most IDEs provide, Visual Studio includes features to ease your development process, including: -* Compilers. -* Code completion tools. -* Graphical designers. -* And many more features. +* Compilers. +* Code completion tools. +* Graphical designers. +* And many more features. See [Visual Studio for web development](../visual-studio/index.md). diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 0b97437857..34a6eaa41f 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -26,13 +26,13 @@ Visual Studio Code is a lightweight but powerful source code editor for Windows, The DevTools extension for Visual Studio Code enables you to: -* Develop webpages and use DevTools without leaving Visual Studio Code. This extension gives you an alternative to using DevTools for webpage development within the browser window. +* Develop webpages and use DevTools without leaving Visual Studio Code. This extension gives you an alternative to using DevTools for webpage development within the browser window. -* Emulate devices, such as displaying your webpage in various viewport sizes during development. +* Emulate devices, such as displaying your webpage in various viewport sizes during development. -* Test the accessibility of your webpages from within Visual Studio Code. +* Test the accessibility of your webpages from within Visual Studio Code. -* Live-edit CSS and SASS and see your changes reflected immediately in a browser instance while editing your actual source files. CSS mirror editing allows you to control whether to save changes to your `.css` file. DevTools opens and edits your `.css` files, but without automatically saving the files, so that you can decide and control whether to save the changes that you made within the **Styles** tab of the **Elements** tool. +* Live-edit CSS and SASS and see your changes reflected immediately in a browser instance while editing your actual source files. CSS mirror editing allows you to control whether to save changes to your `.css` file. DevTools opens and edits your `.css` files, but without automatically saving the files, so that you can decide and control whether to save the changes that you made within the **Styles** tab of the **Elements** tool. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/console-integration.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/console-integration.md index a9f9c8c251..579c394c6c 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/console-integration.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/console-integration.md @@ -14,9 +14,9 @@ In the **Edge DevTools** tab's **Console** tool in Visual Studio Code with this ![The DevTools Console inside the extension as an own tab](./console-integration-images/console-full.png) You can: -* View [log messages](../../devtools/console/console-log.md). -* Access the `window` object and use the [DOM interaction convenience methods](../../devtools/console/console-dom-interaction.md). -* [Filter the Console](../../devtools/console/console-filters.md) and set [live expressions](../../devtools/console/live-expressions.md). +* View [log messages](../../devtools/console/console-log.md). +* Access the `window` object and use the [DOM interaction convenience methods](../../devtools/console/console-dom-interaction.md). +* [Filter the Console](../../devtools/console/console-filters.md) and set [live expressions](../../devtools/console/live-expressions.md). diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md index efd9c6eabe..6936b4915b 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md @@ -11,9 +11,9 @@ ms.date: 10/06/2022 CSS mirror editing provides two-way interaction so that you can change the CSS either way: -* In the code editor, edit the `.css` file, your changes are mirrored in the **Elements** tool in the **Edge DevTools** tab. +* In the code editor, edit the `.css` file, your changes are mirrored in the **Elements** tool in the **Edge DevTools** tab. -* In the **Elements** tool in the **Edge DevTools** tab, your changes are mirrored in the `.css` file in the code editor. +* In the **Elements** tool in the **Edge DevTools** tab, your changes are mirrored in the `.css` file in the code editor. CSS mirror editing is enabled by default in the extension. As a result, in the DevTools extension, in the **Styles** tab in the **Elements** tool, when you change CSS selectors, rules, or values, the local `.css` file is automatically edited as you change values. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md index 00845a4bc8..5b5723ec2b 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md @@ -28,11 +28,11 @@ To open DevTools in Visual Studio Code in Debug mode by using the DevTools UI, r ![Tabs opened from right-clicking an .html file in Explorer](./debugging-a-webpage-images/tabs-from-right-click-html-explorer.png) When you open DevTools in Visual Studio Code in Debug mode, the following UI components are opened: -* The **Edge DevTools** tab. -* The **Edge DevTools: Browser** tab. -* The Debug toolbar. -* The **Run** (Debugger) Side Bar, including the **Watch** pane. -* The **Debug Console** at bottom of window. +* The **Edge DevTools** tab. +* The **Edge DevTools: Browser** tab. +* The Debug toolbar. +* The **Run** (Debugger) Side Bar, including the **Watch** pane. +* The **Debug Console** at bottom of window. See also [Step 5: Step through JavaScript code in the Debugger](./get-started-right-click-html.md#step-5-step-through-javascript-code-in-the-debugger) in _Get started by right-clicking an HTML file_. @@ -45,18 +45,18 @@ Most of these approaches require a DevTools-generated `launch.json` file that co #### DevTools UI features to open DevTools in Debug mode -* Right-click an `.html` file in **Explorer** > **Open with Edge**. This approach essentially uses a file path rather than a URL, and doesn't require you to generate a `launch.json` file. +* Right-click an `.html` file in **Explorer** > **Open with Edge**. This approach essentially uses a file path rather than a URL, and doesn't require you to generate a `launch.json` file. -* **Activity Bar** > **Microsoft Edge Tools** > click the **Launch Project** button. +* **Activity Bar** > **Microsoft Edge Tools** > click the **Launch Project** button. #### Visual Studio Code UI features to open DevTools in Debug mode -* Press **F5**. +* Press **F5**. -* On the **Activity Bar**, click the **Run and Debug** icon (![Run and Debug button](./debugging-a-webpage-images/run-and-debug-icon.png)), and then in the **Run and Debug** Side Bar, click the **Run and Debug** button. +* On the **Activity Bar**, click the **Run and Debug** icon (![Run and Debug button](./debugging-a-webpage-images/run-and-debug-icon.png)), and then in the **Run and Debug** Side Bar, click the **Run and Debug** button. -* Open the Visual Studio Code command palette, start typing the word **debug** after **>**, and then select **Debug: Open Link**. See [Open Link command](https://code.visualstudio.com/docs/nodejs/browser-debugging#_open-link-command) in _Browser debugging in VS Code_. +* Open the Visual Studio Code command palette, start typing the word **debug** after **>**, and then select **Debug: Open Link**. See [Open Link command](https://code.visualstudio.com/docs/nodejs/browser-debugging#_open-link-command) in _Browser debugging in VS Code_. @@ -89,11 +89,11 @@ To start the Visual Studio Code debugger along with DevTools, by using the usual 1. Click in the `.html` file in the editor, and then do any of the following UI actions that start the Visual Studio Code debugger the usual ways: - * Press **F5**. + * Press **F5**. - * On the **Activity Bar**, click the **Run and Debug** icon (![Run and Debug icon](./debugging-a-webpage-images/run-and-debug-icon.png)), and then in the **Run and Debug** Side Bar, click the **Run and Debug** button, as shown below. + * On the **Activity Bar**, click the **Run and Debug** icon (![Run and Debug icon](./debugging-a-webpage-images/run-and-debug-icon.png)), and then in the **Run and Debug** Side Bar, click the **Run and Debug** button, as shown below. - * Open the Visual Studio Code command palette, start typing the word **debug**, and then select **Debug: Open Link**. + * Open the Visual Studio Code command palette, start typing the word **debug**, and then select **Debug: Open Link**. ![Start Microsoft Edge DevTools from the JavaScript debugger](./debugging-a-webpage-images/start-session.png) @@ -186,9 +186,9 @@ When you choose to debug your project in Visual Studio Code, whether you use Dev Which webpage opens is in DevTools is set by `launch.json` if that file exists in your workspace (your open folder). Thus you might press **F5** while your own `.html` file is open, and yet see the default, **Success** page in the **DevTools** tabs. Options in that case are: -* Edit `launch.json` in your open folder to point to a URL (normally), or possibly a file path. Then you can use the Visual Studio Code debugger workflow/UI, such as **F5**. +* Edit `launch.json` in your open folder to point to a URL (normally), or possibly a file path. Then you can use the Visual Studio Code debugger workflow/UI, such as **F5**. -* Or, delete `launch.json`, then **Activity Bar** > **Explorer** > right-click your `.html` file > select **Open with Edge**. This approach doesn't use the Visual Studio Code Debugger workflow/UI, such as **F5**. +* Or, delete `launch.json`, then **Activity Bar** > **Explorer** > right-click your `.html` file > select **Open with Edge**. This approach doesn't use the Visual Studio Code Debugger workflow/UI, such as **F5**. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/device-state-emulation.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/device-state-emulation.md index 449f7a9351..5d2ad301f7 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/device-state-emulation.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/device-state-emulation.md @@ -52,10 +52,10 @@ Click the **Rotate** button (![The Rotate button](./device-state-emulation-image Use the **Emulate CSS media features** button (![Emulate CSS media features](./device-state-emulation-images/emulate-css-media-features-button.png)) to: -* Emulate CSS media queries. -* Test how your product looks in print mode. -* Switch between dark and light mode. -* Emulate forced colors. +* Emulate CSS media queries. +* Test how your product looks in print mode. +* Switch between dark and light mode. +* Emulate forced colors. ![Browser preview in the extension showing the web product in forced color mode](./device-state-emulation-images/edge-for-code-forced-colours.png) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/external-browser-window.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/external-browser-window.md index 816bcfa8e8..20a2f5ee2b 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/external-browser-window.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/external-browser-window.md @@ -36,11 +36,11 @@ By default, DevTools opens the **Edge DevTools: Browser** tab in Visual Studio C ![Embedded browser](./external-browser-window-images/embedded-browser.png) This tab is also called: -* The _headless browser_, in **Settings**. -* The _screencast_, in tooltips. -* The _embedded browser_. -* The _DevTools browser_. -* The _embedded DevTools browser_. +* The _headless browser_, in **Settings**. +* The _screencast_, in tooltips. +* The _embedded browser_. +* The _DevTools browser_. +* The _embedded DevTools browser_. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md index a5092dcc5c..46b2af136d 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-instance.md @@ -13,11 +13,11 @@ Use this tutorial to learn how to open and close DevTools by clicking the **Laun This way of opening DevTools is useful for these simple scenarios: -* If you want to experiment with editing the default, Success page by using DevTools. +* If you want to experiment with editing the default, Success page by using DevTools. -* If you want to inspect a page that's specified by using a URL, and don't need Debug mode. To open a different webpage, you can paste a URL or file path, in the Address bar. +* If you want to inspect a page that's specified by using a URL, and don't need Debug mode. To open a different webpage, you can paste a URL or file path, in the Address bar. -* If you don't have a folder open and you want to experiment with changing CSS on a page that's specified by using a URL, without editing a local source file. +* If you don't have a folder open and you want to experiment with changing CSS on a page that's specified by using a URL, without editing a local source file. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md index be6a160671..4cdac6ad8b 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md @@ -105,9 +105,9 @@ To clone the **Demos** repo to use the **demo-to-do** sample for this tutorial: 1. If the green **Code** button isn't shown, click **Demos** in the path **Microsoft Edge** / **Demos** in the upper left to go to the main page of the repo. 1. Click the green **Code** button, and then select the **Copy** button. This article assumes you're using the **Source Control** features within Visual Studio Code. Or, you can use one of the other methods that are provided, if you know that you want to use that approach instead: - * **Open with GitHub Desktop** - * **Open with Visual Studio** - * **Download ZIP** + * **Open with GitHub Desktop** + * **Open with Visual Studio** + * **Download ZIP** ![Cloning the MicrosoftEdge/Demos repo](./install-images/clone-repo.png) @@ -146,9 +146,9 @@ To clone the **Demos** repo to use the **demo-to-do** sample for this tutorial: If you installed Node.js and npm, as described above, `npx http-server` is a simple way to start a local web server. You can skip to the steps below, or read this background information first. In many cases, you don't need to enter a URL or run a localhost server. For example, you can: -* Open a folder that contains webpage source files, and then right-click an `.html` file. -* Enter a local file path in the Address bar, such as `C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html` (the default, Success page). -* Enter a remote server URL in the Address bar of the **Edge DevTools: Browser** tab, such as [https://microsoftedge.github.io/Demos/demo-to-do/](https://microsoftedge.github.io/Demos/demo-to-do/). +* Open a folder that contains webpage source files, and then right-click an `.html` file. +* Enter a local file path in the Address bar, such as `C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html` (the default, Success page). +* Enter a remote server URL in the Address bar of the **Edge DevTools: Browser** tab, such as [https://microsoftedge.github.io/Demos/demo-to-do/](https://microsoftedge.github.io/Demos/demo-to-do/). If your webpage uses certain APIs that require the webpage to be running on a web server, to use DevTools, you must start a local web server for testing. If you don't serve out your project on a webserver, but only instead, you use local files, you can still use DevTools, with debugging ability, by right-clicking a local `.html` file. Functionality of your app which specifically requires your app to be on a server won't work, and DevTools will have limited utility. @@ -161,9 +161,9 @@ For information about http-server, see [http-server: a simple static HTTP server 1. In Visual Studio Code, select **File** > **Open Folder** > open the directory that contains the `.html`, `.css`, and `.js` files for a webpage, such as `C:\Users\username\Documents\GitHub\Demos\demo-to-do\`. In the above example path: - * `\Documents\GitHub\` is where the `Demos` repo was cloned to. - * `\Demos\` is the GitHub repo that's used for examples in the Microsoft Edge Developer documentation. - * `\demo-to-do\` is one of the sample directories in the repo. + * `\Documents\GitHub\` is where the `Demos` repo was cloned to. + * `\Demos\` is the GitHub repo that's used for examples in the Microsoft Edge Developer documentation. + * `\demo-to-do\` is one of the sample directories in the repo. 1. In Visual Studio Code, select **View** > **Terminal**. Or, to keep the web server running regardless of Visual Studio's state, open a command prompt outside of Visual Studio Code, such as `git bash`. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md index 44901d1598..846df770fa 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md @@ -87,9 +87,9 @@ The `"name"` string of each debug configuration populates dropdown lists in seve 1. In Visual Studio Code's **Explorer** pane, the `launch.json` file is placed in a `.vscode` folder at the root of the folder that you opened. - * For a repo, such as the Demos repo, if you open the entire repo folder, the **Generate launch.json** button creates a `\.vscode\launch.json` file near the root, for the entire repo directory. + * For a repo, such as the Demos repo, if you open the entire repo folder, the **Generate launch.json** button creates a `\.vscode\launch.json` file near the root, for the entire repo directory. - * If you open a particular, smaller folder, such as `\Demos\demo-to-do\`, the **Generate launch.json** button puts a `launch.json` file in that folder only. + * If you open a particular, smaller folder, such as `\Demos\demo-to-do\`, the **Generate launch.json** button puts a `launch.json` file in that folder only. Visual Studio Code uses a `launch.json` file to configure and customize the debugger. `launch.json` is a debugger configuration file. This file also controls which web browser to use in conjunction with the debugger. For example, when you test your webpage by clicking a button in the webpage to cause your JavaScript code to run, the Visual Studio Code debugger listens to the browser and steps through the JavaScript code of the webpage. @@ -97,7 +97,7 @@ The following is a copy of the `launch.json` after clicking the **Create launch. There are three _configurations_ and two _compounds_ initially defined by default: -* `configurations` - in the Visual Studio Code UI, these configuration names appear in Debugger UI: +* `configurations` - in the Visual Studio Code UI, these configuration names appear in Debugger UI: * **Launch Microsoft Edge** - this is a "launch"-type configuration. @@ -105,7 +105,7 @@ There are three _configurations_ and two _compounds_ initially defined by defaul * **Open Edge DevTools** - this is a "debug"-type (or "attach"-type) configuration. -* `compounds` - in the Visual Studio Code UI, these appear in the Debug toolbar: +* `compounds` - in the Visual Studio Code UI, these appear in the Debug toolbar: * **Launch Edge Headless and attach DevTools** @@ -218,9 +218,9 @@ In the **Microsoft Edge Tools** pane, in the **Targets** section, on the right s This compound configuration launches the following components: -* The **Edge DevTools: Browser** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Launch Microsoft Edge in headless mode", above. +* The **Edge DevTools: Browser** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Launch Microsoft Edge in headless mode", above. -* The **Edge DevTools** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Open Edge DevTools", above. +* The **Edge DevTools** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Open Edge DevTools", above. ```json @@ -240,11 +240,11 @@ The name of this compound configuration, **Launch Edge Headless and attach DevTo This compound configuration launches the following components: -* The **Edge DevTools: Browser** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Launch Microsoft Edge", above. +* The **Edge DevTools: Browser** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Launch Microsoft Edge", above. -* The Microsoft Edge browser window. This is defined by the configuration that has the `name` "Launch Microsoft Edge", above. +* The Microsoft Edge browser window. This is defined by the configuration that has the `name` "Launch Microsoft Edge", above. -* The **Edge DevTools** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Open Edge DevTools", above. +* The **Edge DevTools** tab (pane) in Visual Studio Code. This is defined by the configuration that has the `name` "Open Edge DevTools", above. ```json { diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md index 2c008f80a3..283a3d487a 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md @@ -29,9 +29,9 @@ To open DevTools and the embedded browser, along with the Debug toolbar for an H 1. In Visual Studio Code, do any of the following: - * Select **Activity Bar** > **Explorer** (![Explorer button](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. - * Select **File** > **Open Folder**. - * Select **File** > **Open Recent**. + * Select **Activity Bar** > **Explorer** (![Explorer button](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. + * Select **File** > **Open Folder**. + * Select **File** > **Open Recent**. 1. Open a folder that contains web app source files. @@ -44,11 +44,11 @@ To open DevTools and the embedded browser, along with the Debug toolbar for an H ![The DevTools components from selecting Open Browser with DevTools](./open-devtools-and-embedded-browser-images/devtools-extension-v211.png) The following components open in Visual Studio Code: - * The **Edge DevTools** tab, including the **Elements** tab and other tool tabs. - * The **Edge DevTools: Browser** tab, including the Device Emulation toolbar on the bottom. - * The Debug toolbar at top, including buttons such as **Pause**, **Step Over**, **Step Into**, **Reset**, and **Stop**. - * The Debug Console at bottom. - * The **Run and Debug** side bar (same as selecting **View** > **Run**). + * The **Edge DevTools** tab, including the **Elements** tab and other tool tabs. + * The **Edge DevTools: Browser** tab, including the Device Emulation toolbar on the bottom. + * The Debug toolbar at top, including buttons such as **Pause**, **Step Over**, **Step Into**, **Reset**, and **Stop**. + * The Debug Console at bottom. + * The **Run and Debug** side bar (same as selecting **View** > **Run**). In this approach, an instance is not listed in **Activity Bar** > **Microsoft Edge Tools** > **Targets**. @@ -70,9 +70,9 @@ These steps assume that initially, no folder is open in Visual Studio Code, and 1. In Visual Studio Code, do any of the following: - * Select **Activity Bar** > **Explorer** (![the Explorer button](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. - * Select **File** > **Open Folder**. - * Select **File** > **Open Recent**. + * Select **Activity Bar** > **Explorer** (![the Explorer button](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. + * Select **File** > **Open Folder**. + * Select **File** > **Open Recent**. To use all the DevTools features, including CSS mirror editing of your local source file when you edit CSS in DevTools, open a folder that contains source files that match the webpage that you want to display in DevTools. @@ -84,10 +84,10 @@ These steps assume that initially, no folder is open in Visual Studio Code, and ![Clicking the Launch Instance button](./open-devtools-and-embedded-browser-images/devtools-extension-new-browser-instance.png) - * The **Edge DevTools** tab opens, initially containing information about the Success page, such as `C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html`. - * The **Edge DevTools: Browser tab** (the embedded browser) opens, initially showing the **Success** page. - * The Debug toolbar and debug UI of Visual Studio Code doesn't open. - * In the **Microsoft Edge Tools** pane, the **Targets** section opens, listing a target, and the **Launch Instance** button is removed. + * The **Edge DevTools** tab opens, initially containing information about the Success page, such as `C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html`. + * The **Edge DevTools: Browser tab** (the embedded browser) opens, initially showing the **Success** page. + * The Debug toolbar and debug UI of Visual Studio Code doesn't open. + * In the **Microsoft Edge Tools** pane, the **Targets** section opens, listing a target, and the **Launch Instance** button is removed. 1. In the **Edge DevTools: Browser** tab, in the Address bar, paste a file path or a URL, that matches the folder that's open in Visual Studio Code. @@ -128,17 +128,17 @@ To open DevTools by clicking the **Launch Project** button, do the following ste 1. In Visual Studio Code, do any of the following: - * Select **Activity Bar** > **Explorer** (![the Explorer icon](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. - * Select **File** > **Open Folder**. - * Select **File** > **Open Recent**. + * Select **Activity Bar** > **Explorer** (![the Explorer icon](./open-devtools-and-embedded-browser-images/explorer-icon.png)) > click the **Open Folder** button. + * Select **File** > **Open Folder**. + * Select **File** > **Open Recent**. Select a directory that contains webpage source files. For example, `C:\Users\username\Documents\GitHub\Demos\demo-to-do\`. 1. In the **Activity Bar**, click **Microsoft Edge Tools** (![the Microsoft Edge Tools icon](./open-devtools-and-embedded-browser-images/microsoft-edge-tools-icon.png)). The **Microsoft Edge Tools** pane opens. - * If the folder doesn't already contain a `.vscode` directory that contains a `launch.json file`, the **Microsoft Edge Tools** Side Bar contains a **Launch Instance** button and a **Generate launch.json** button. + * If the folder doesn't already contain a `.vscode` directory that contains a `launch.json file`, the **Microsoft Edge Tools** Side Bar contains a **Launch Instance** button and a **Generate launch.json** button. - * If the folder already contains a `.vscode` directory that contains a `launch.json` file, the **Microsoft Edge Tools** Side Bar contains a **Launch Project** button and not a **Generate launch.json** button. In this case, you may want to inspect or change the `url` string in the existing `launch.json` file, as described below. + * If the folder already contains a `.vscode` directory that contains a `launch.json` file, the **Microsoft Edge Tools** Side Bar contains a **Launch Project** button and not a **Generate launch.json** button. In this case, you may want to inspect or change the `url` string in the existing `launch.json` file, as described below. Continue below. @@ -214,11 +214,11 @@ If DevTools is able to correlate and establish the workspace mapping between the If DevTools can't map the files in the **Edge DevTools: Browser** tab to the files in the folder that you opened in Visual Studio Code's Explorer, you can inspect webpages, and you can change them, such as changing CSS values in the **Sources** tab of the **Elements** tool in the **Edge DevTools** tab. In this case, though, you can't use CSS mirror editing though, to have DevTools automatically edit your source files. Options include: -* Clear the **CSS mirror editing** checkbox in **Styles** tab and continue experimenting with CSS changes. +* Clear the **CSS mirror editing** checkbox in **Styles** tab and continue experimenting with CSS changes. -* Open a folder that contains source files that match the webpage. +* Open a folder that contains source files that match the webpage. -* Grant trust to a folder by opening it in Visual Studio Code. +* Grant trust to a folder by opening it in Visual Studio Code. For example: @@ -260,11 +260,11 @@ Next, try changing CSS without a matching folder opened: Options in this case include: -* Clear the **CSS mirror editing** checkbox in **Styles** tab and continue experimenting with CSS changes (without automatic editing of CSS in source files). This prevents further error messages about mapping to source files for CSS mirror editing. +* Clear the **CSS mirror editing** checkbox in **Styles** tab and continue experimenting with CSS changes (without automatic editing of CSS in source files). This prevents further error messages about mapping to source files for CSS mirror editing. -* Open a folder that contains source files that match the webpage, to have automatic editing of CSS in source files. +* Open a folder that contains source files that match the webpage, to have automatic editing of CSS in source files. -* Grant trust to a folder by opening it in Visual Studio Code, in case DevTools is attempting to edit a source file but Visual Studio Code hasn't granted trust to the containing folder. +* Grant trust to a folder by opening it in Visual Studio Code, in case DevTools is attempting to edit a source file but Visual Studio Code hasn't granted trust to the containing folder. See also: * [Troubleshooting the DevTools extension](./troubleshooting.md) @@ -274,9 +274,9 @@ See also: In some cases, behavior of DevTools is different for file paths than for URLs. -* If you enter a file path in the Address bar of the DevTools browser, and you edit the CSS in DevTools, the browser knows where to find the source files. You might need to open that folder to grant trust to it, to be able to use CSS mirror editing. Or, clear the **CSS mirror editing** checkbox. +* If you enter a file path in the Address bar of the DevTools browser, and you edit the CSS in DevTools, the browser knows where to find the source files. You might need to open that folder to grant trust to it, to be able to use CSS mirror editing. Or, clear the **CSS mirror editing** checkbox. -* If you enter a URL in the Address bar of the DevTools browser, the browser knows where to find the downloaded copy of the source files, if you are only inspecting webpages and experimenting with CSS. If you want to use CSS mirror editing (to have DevTools edit CSS in source files), the **CSS mirror editing** checkbox must be selected and you must open a folder in Visual Studio Code containing source files that match the webpage. +* If you enter a URL in the Address bar of the DevTools browser, the browser knows where to find the downloaded copy of the source files, if you are only inspecting webpages and experimenting with CSS. If you want to use CSS mirror editing (to have DevTools edit CSS in source files), the **CSS mirror editing** checkbox must be selected and you must open a folder in Visual Studio Code containing source files that match the webpage. @@ -284,27 +284,27 @@ In some cases, behavior of DevTools is different for file paths than for URLs. Close instances of DevTools by using any of the following approaches: -* If Visual Studio Code is in Debug mode, click the **Stop** button in the Debug toolbar, or select **Run** > **Stop Debugging**: +* If Visual Studio Code is in Debug mode, click the **Stop** button in the Debug toolbar, or select **Run** > **Stop Debugging**: ![Stop button in the Debug toolbar](./open-devtools-and-embedded-browser-images/stop-button-debug-toolbar.png) The **Edge DevTools** and **Edge DevTools: Browser** tabs close. -* If the **Edge DevTools** tab is open, click **Close** (**x**) on the tab. +* If the **Edge DevTools** tab is open, click **Close** (**x**) on the tab. -* If the **Edge DevTools: Browser** tab is open, click **Close** (**x**) on the tab. +* If the **Edge DevTools: Browser** tab is open, click **Close** (**x**) on the tab. -* Select **Activity Bar** > **Microsoft Edge Tools**. If the **Targets** section lists any targets, hover on the right side of the target instance and then click **Close instance** (**x**): +* Select **Activity Bar** > **Microsoft Edge Tools**. If the **Targets** section lists any targets, hover on the right side of the target instance and then click **Close instance** (**x**): ![Closing DevTools if opened by clicking the Launch Instance button](./open-devtools-and-embedded-browser-images/close-devtools-opened-by-launch-instance.png) The **Launch Instance** or **Launch Project** button is then displayed. -* Select **File** > **Close Folder**. +* Select **File** > **Close Folder**. -* Close the Visual Studio Code window. +* Close the Visual Studio Code window. -* If an external, automation-controlled browser was opened by the DevTools extension, close the external browser window. +* If an external, automation-controlled browser was opened by the DevTools extension, close the external browser window. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md index c3e4cf8f08..0c34e77394 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md @@ -11,9 +11,9 @@ ms.date: 10/06/2022 In the **Elements** tool: -* The **Styles** tab indicates which source file is used to apply styles to the selected node in the DOM tree. +* The **Styles** tab indicates which source file is used to apply styles to the selected node in the DOM tree. -* The **Event Listeners** tab indicates which source file is used to define event handlers for the selected node in the DOM tree. +* The **Event Listeners** tab indicates which source file is used to define event handlers for the selected node in the DOM tree. The source file name and line number are shown as a clickable link. Clicking a file name link opens that file in the Visual Studio Code editor: diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/troubleshooting.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/troubleshooting.md index 30fa2ec31c..20adf094ff 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/troubleshooting.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/troubleshooting.md @@ -19,9 +19,9 @@ By default, the **CSS mirror editing** checkbox is selected, in the **Styles** t If you are changing CSS in DevTools, either: - * Select the **CSS mirror editing** checkbox and open a folder that contains source files that match the webpage that you are inspecting with DevTools. + * Select the **CSS mirror editing** checkbox and open a folder that contains source files that match the webpage that you are inspecting with DevTools. - * Or, clear the **CSS mirror editing** checkbox, to prevent such error messages. + * Or, clear the **CSS mirror editing** checkbox, to prevent such error messages. See also: * [The CSS Mirror Editing checkbox](./css-mirror-editing-styles-tab.md#the-css-mirror-editing-checkbox) in _Update .css files from within the Styles tab (CSS mirror editing)_ @@ -67,17 +67,17 @@ If you enter a different URL or file path in the Address bar of the DevTools bro Suppose you click the **Launch Instance** button, then paste a localhost URL into the Address bar, such as `http://localhost:8080`, but you don't have the local source files folder open. Then in the **Styles** tab of the Elements tool, try to change a CSS value. Error messages might appear, such as: -* **Error while mirroring css content to document. Could not mirror css changes to document. No workspace mapping was found.** +* **Error while mirroring css content to document. Could not mirror css changes to document. No workspace mapping was found.** -* **Unable to open file in editor.** +* **Unable to open file in editor.** -* **Error while opening file in editor.** +* **Error while opening file in editor.** -* **Error while fetching.** +* **Error while fetching.** -* **Could not attach to main target.** +* **Could not attach to main target.** -* **Error while fetching list of available targets. No available targets to attach.** +* **Error while fetching list of available targets. No available targets to attach.** ![No workspace mapping](./troubleshooting-images/no-workspace-mapping.png) diff --git a/microsoft-edge/visual-studio/index.md b/microsoft-edge/visual-studio/index.md index 5663b55399..463129bdb4 100644 --- a/microsoft-edge/visual-studio/index.md +++ b/microsoft-edge/visual-studio/index.md @@ -13,10 +13,10 @@ Microsoft [Visual Studio](https://visualstudio.microsoft.com/vs) is an integrate In addition to the standard editor and debugger that most IDEs provide, Visual Studio includes features to ease your development process, including: -* Compilers. -* Code completion tools. -* Graphical designers. -* And many more features. +* Compilers. +* Code completion tools. +* Graphical designers. +* And many more features. If you aren't already using Visual Studio, go to [Download Visual Studio](https://visualstudio.microsoft.com/downloads) to download it. @@ -28,10 +28,10 @@ Currently, Visual Studio 2019 supports debugging JavaScript in Microsoft Edge fo Follow the steps in this section to use Visual Studio to do the following: -* Build your ASP.NET and ASP.NET Core app. -* Start a web server. -* Launch Microsoft Edge. -* Connect the Visual Studio debugger with a single button. +* Build your ASP.NET and ASP.NET Core app. +* Start a web server. +* Launch Microsoft Edge. +* Connect the Visual Studio debugger with a single button. The simplified workflow allows you to debug JavaScript that runs in Microsoft Edge directly from your IDE. diff --git a/microsoft-edge/web-platform/how-to-detect-win11.md b/microsoft-edge/web-platform/how-to-detect-win11.md index 1ef8039f5f..dcd193a373 100644 --- a/microsoft-edge/web-platform/how-to-detect-win11.md +++ b/microsoft-edge/web-platform/how-to-detect-win11.md @@ -20,14 +20,14 @@ user agent information Websites can differentiate between users on Windows 11 and Windows 10, and detect the CPU architecture of the device, by using User-Agent Client Hints (UA-CH). The User-Agent Client Hints format is used by browsers to provide user agent information to websites. Websites can also use the user agent information that's sent from the browser to detect information such as: -* The browser brand. -* The browser version number. -* The device platform on which the browser is running. +* The browser brand. +* The browser version number. +* The device platform on which the browser is running. There are two approaches for sites to access user agent information: -* User-Agent strings (legacy). -* User-Agent Client Hints (recommended). +* User-Agent strings (legacy). +* User-Agent Client Hints (recommended). For details about these two approaches, see [Detecting Microsoft Edge from your website](user-agent-guidance.md). diff --git a/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection.md b/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection.md index d6eb66e0d9..61286ce6f9 100644 --- a/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection.md +++ b/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection.md @@ -18,18 +18,18 @@ To minimize disruptions, Microsoft Edge supports a new capability that automatic ## Redirection experience On redirection to Microsoft Edge, the user is shown the one-time dialog in the next screenshot. The dialog provides the user with the following information: -* It explains why the website is being redirected. -* It prompts the user for consent to copy browsing data and preferences from Internet Explorer to Microsoft Edge. +* It explains why the website is being redirected. +* It prompts the user for consent to copy browsing data and preferences from Internet Explorer to Microsoft Edge. The following browsing data is imported: -* Favorites -* Passwords -* Search engines -* Open tabs -* History -* Settings -* Cookies -* The Home Page +* Favorites +* Passwords +* Search engines +* Open tabs +* History +* Settings +* Cookies +* The Home Page Browsing notification and prompt to import data and preferences: @@ -43,14 +43,14 @@ Finally, a website incompatibility banner is displayed under the Address bar for The website incompatibility banner provides the following details to the user. -* Recommends that the user to switch to Microsoft Edge. -* Offers to set Microsoft Edge as the default browser. -* Gives the user the option to explore Microsoft Edge. +* Recommends that the user to switch to Microsoft Edge. +* Offers to set Microsoft Edge as the default browser. +* Gives the user the option to explore Microsoft Edge. When a website is redirected from Internet Explorer to Microsoft Edge, one of the following actions occurs. -* If the active Internet Explorer tab had no prior content, it is closed. -* If the active Internet Explorer tab had prior content, it navigates to the [Microsoft support page that explains why the website was redirected to Microsoft Edge](https://support.microsoft.com/office/the-website-you-were-trying-to-reach-doesn-t-work-with-internet-explorer-8f5fc675-cd47-414c-9535-12821ddfc554). +* If the active Internet Explorer tab had no prior content, it is closed. +* If the active Internet Explorer tab had prior content, it navigates to the [Microsoft support page that explains why the website was redirected to Microsoft Edge](https://support.microsoft.com/office/the-website-you-were-trying-to-reach-doesn-t-work-with-internet-explorer-8f5fc675-cd47-414c-9535-12821ddfc554). > [!NOTE] > After a redirection, users may continue to use Internet Explorer for websites that aren't on the Internet Explorer compatibility list. @@ -63,12 +63,12 @@ The Internet Explorer compatibility list is an XML file on [microsoft.com](https Email the following information to [ietoedge@microsoft.com](mailto:ietoedge@microsoft.com) for your website to be added or removed from the Internet Explorer compatibility list. -* Owner name -* Corporate title -* Email address -* Company name -* Street address -* Website address +* Owner name +* Corporate title +* Email address +* Company name +* Street address +* Website address The Internet Explorer compatibility list is usually updated within a week. If you experience wait times greater than one week, we may be working through an outage. diff --git a/microsoft-edge/web-platform/password-reveal.md b/microsoft-edge/web-platform/password-reveal.md index bebedbdf12..3fcab09de8 100644 --- a/microsoft-edge/web-platform/password-reveal.md +++ b/microsoft-edge/web-platform/password-reveal.md @@ -57,14 +57,14 @@ Instead of fully removing the control, you can instead modify the styling of the Keep the following things in mind when you style the **password reveal** button: -* The eye icon implements as a background image. To add a background color to the **password reveal** button, use the CSS `background-color` property instead of the `background` shorthand property. +* The eye icon implements as a background image. To add a background color to the **password reveal** button, use the CSS `background-color` property instead of the `background` shorthand property. -* You can adjust the size and scale of the **password reveal** button. +* You can adjust the size and scale of the **password reveal** button. > [!NOTE] > The browser hides any overflow outside of the bounds of the password input control. -* Currently, no state selectors are available to style the toggled state of the **password reveal** button. +* Currently, no state selectors are available to style the toggled state of the **password reveal** button. @@ -72,9 +72,9 @@ Keep the following things in mind when you style the **password reveal** button: The **password reveal** button is unavailable until the user enters text into the **password** field. To help keep the user's password entry secure, the browser suppresses the button in the following scenarios: -* If focus moves away from the **password** field, the browser removes the **password reveal** button. +* If focus moves away from the **password** field, the browser removes the **password reveal** button. -* If scripts modify the **password** field, the browser removes the **password reveal** button. +* If scripts modify the **password** field, the browser removes the **password reveal** button. If the **password reveal** button is removed, the user must delete the contents of the **password** field to make the **password reveal** button appear again. This behavior prevents someone from making a minor adjustment to display the password, should the user step away from an unlocked device. diff --git a/microsoft-edge/web-platform/tracking-prevention.md b/microsoft-edge/web-platform/tracking-prevention.md index 057271ffd7..6c8f0876a2 100644 --- a/microsoft-edge/web-platform/tracking-prevention.md +++ b/microsoft-edge/web-platform/tracking-prevention.md @@ -68,9 +68,9 @@ For the URL `https://a.subdomain.of.a.known.tracker.test/some/path`, the tested To provide protection from tracking actions on the web, Microsoft Edge takes two enforcement actions against classified trackers: -* **Restrict storage access** - If a known tracking resource tries to access any web storage where it may try to persist data about the user, Microsoft Edge blocks that access. This includes restricting the ability for that tracker to get or set cookies as well as access storage APIs such as `IndexedDB` and `localStorage`. +* **Restrict storage access** - If a known tracking resource tries to access any web storage where it may try to persist data about the user, Microsoft Edge blocks that access. This includes restricting the ability for that tracker to get or set cookies as well as access storage APIs such as `IndexedDB` and `localStorage`. -* **Block resource loads** - If a known tracking resource is being loaded on a website, Microsoft Edge may block that load before the request reaches the network depending on compatibility impact of the load and the tracking prevention setting a user has set. Blocked loads may include tracking scripts, pixels, iframes, and more. This prevents any data potentially being sent to the tracking domain and may even improve load times and page performance as a side effect. +* **Block resource loads** - If a known tracking resource is being loaded on a website, Microsoft Edge may block that load before the request reaches the network depending on compatibility impact of the load and the tracking prevention setting a user has set. Blocked loads may include tracking scripts, pixels, iframes, and more. This prevents any data potentially being sent to the tracking domain and may even improve load times and page performance as a side effect. A user may choose the page info flyout icon on the left side of the Address bar to find out which trackers were blocked on a specific page: @@ -149,11 +149,11 @@ The following are the enforcement actions and mitigations that are applied to ea | **Strict** | B | B | S | B | B | B | B | Enabled | Disabled | About the table: -* The column headers are the categories of trackers as defined by the tracking protection list categories that are listed in disconnect.me [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). -* The left column lists the three levels of tracking prevention in Microsoft Edge (Basic, Balanced, and Strict). -* `S` indicates that storage access is blocked. -* `B` indicates that both storage access and resource loads (such as network requests) are blocked. -* A hyphen (`-`) indicates that no block is applied to either storage access or resource loads. +* The column headers are the categories of trackers as defined by the tracking protection list categories that are listed in disconnect.me [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). +* The left column lists the three levels of tracking prevention in Microsoft Edge (Basic, Balanced, and Strict). +* `S` indicates that storage access is blocked. +* `B` indicates that both storage access and resource loads (such as network requests) are blocked. +* A hyphen (`-`) indicates that no block is applied to either storage access or resource loads. The Org Engagement mitigation doesn't apply to the Cryptomining or Fingerprinting categories. diff --git a/microsoft-edge/web-platform/user-agent-guidance.md b/microsoft-edge/web-platform/user-agent-guidance.md index 7f23dae6ac..133008da44 100644 --- a/microsoft-edge/web-platform/user-agent-guidance.md +++ b/microsoft-edge/web-platform/user-agent-guidance.md @@ -21,9 +21,9 @@ user agent string Microsoft Edge enables your website to retrieve user agent information. You use the user agent information to present webpages correctly for each user's browser. Browsers provide mechanisms for websites to detect browser information such as brand, version number, and host operating system. -* **User-Agent Client Hints** are the best way to retrieve browser information. See [User-Agent Client Hints](#user-agent-client-hints), below. +* **User-Agent Client Hints** are the best way to retrieve browser information. See [User-Agent Client Hints](#user-agent-client-hints), below. -* **User-Agent strings** are a legacy way to retrieve browser information. They are outdated and have a history of causing website compatibility problems. See [User-Agent strings](#user-agent-strings), below. +* **User-Agent strings** are a legacy way to retrieve browser information. They are outdated and have a history of causing website compatibility problems. See [User-Agent strings](#user-agent-strings), below. You may want to provide different experiences to users based on their browser. For example, if you include steps about how to configure Microsoft Edge or another browser for use with your site, you may want to detect the browser and then show the appropriate content. @@ -291,13 +291,13 @@ To turn off user agent overrides in the Microsoft Edge Beta or Stable channels: Legacy browser considerations: -* The Microsoft Edge Legacy browser is no longer supported. See the blog post [New Microsoft Edge to replace Microsoft Edge Legacy](https://techcommunity.microsoft.com/t5/microsoft-365-blog/new-microsoft-edge-to-replace-microsoft-edge-legacy-with-april-s/ba-p/2114224). +* The Microsoft Edge Legacy browser is no longer supported. See the blog post [New Microsoft Edge to replace Microsoft Edge Legacy](https://techcommunity.microsoft.com/t5/microsoft-365-blog/new-microsoft-edge-to-replace-microsoft-edge-legacy-with-april-s/ba-p/2114224). -* Microsoft Edge Legacy was only available on Windows 10. +* Microsoft Edge Legacy was only available on Windows 10. -* Of all the User-Agent mechanisms described in this article, the only supported browser-specific mechanism for Microsoft Edge Legacy is User-Agent string. +* Of all the User-Agent mechanisms described in this article, the only supported browser-specific mechanism for Microsoft Edge Legacy is User-Agent string. -* The User-Agent string for Microsoft Edge Legacy includes the `Edge` token. +* The User-Agent string for Microsoft Edge Legacy includes the `Edge` token. A fully formed example of a Microsoft Edge Legacy User-Agent string: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19582` diff --git a/microsoft-edge/web-platform/web-platform.md b/microsoft-edge/web-platform/web-platform.md index 67eb028222..6996a10a30 100644 --- a/microsoft-edge/web-platform/web-platform.md +++ b/microsoft-edge/web-platform/web-platform.md @@ -39,9 +39,9 @@ See [Tracking prevention in Microsoft Edge](./tracking-prevention.md). Microsoft Edge enables your website to retrieve user agent information. You use the user agent information to present webpages correctly for each user's browser. Browsers provide mechanisms for websites to detect browser information such as brand, version number, and host operating system. -* **User-Agent Client Hints** are an improved mechanism for retrieving browser information. +* **User-Agent Client Hints** are an improved mechanism for retrieving browser information. -* **User-Agent strings** are legacy; they are outdated and have a history of causing website compatibility problems. +* **User-Agent strings** are legacy; they are outdated and have a history of causing website compatibility problems. You may want to provide different experiences to users based on their browser. If you include steps about how to configure Microsoft Edge or another browser for use with your site, you may want to detect the browser and then show the appropriate content. @@ -67,14 +67,14 @@ See [Develop experiences for the sidebar in Microsoft Edge](./sidebar.md). Websites can differentiate between users on Windows 11 and Windows 10 by using User-Agent Client Hints (UA-CH). The User-Agent Client Hints format is used by browsers to provide user agent information to websites. Websites can use the user agent information that's sent from the browser to detect information such as: -* The browser brand. -* The browser version number. -* The device platform on which the browser is running. +* The browser brand. +* The browser version number. +* The device platform on which the browser is running. There are two approaches for sites to access user agent information: -* User-Agent strings (legacy). -* User-Agent Client Hints (recommended). +* User-Agent strings (legacy). +* User-Agent Client Hints (recommended). See [Detect Windows 11 and CPU architecture using User-Agent Client Hints](./how-to-detect-win11.md). diff --git a/microsoft-edge/web-we-want/index.md b/microsoft-edge/web-we-want/index.md index feb9baca97..9d6aa2eb1b 100644 --- a/microsoft-edge/web-we-want/index.md +++ b/microsoft-edge/web-we-want/index.md @@ -15,13 +15,13 @@ If you build for the web, you inevitably run into problems. Perhaps there's no w The Web We Want initiative is the place to let browser vendors and standards groups know what you think is missing from the web platform. Here's how you can get involved: -* Navigate to [The Web We Want](https://webwewant.fyi) website and submit web platform or developer tools features. +* Navigate to [The Web We Want](https://webwewant.fyi) website and submit web platform or developer tools features. -* View the [list of submitted Wants](https://webwewant.fyi/wants) to upvote existing Wants that you need, which helps us prioritize them. +* View the [list of submitted Wants](https://webwewant.fyi/wants) to upvote existing Wants that you need, which helps us prioritize them. -* Join in the [discussions](https://github.com/WebWeWant/webwewant.fyi/discussions) to provide feedback, link to resources, and otherwise help usher a Want into reality. +* Join in the [discussions](https://github.com/WebWeWant/webwewant.fyi/discussions) to provide feedback, link to resources, and otherwise help usher a Want into reality. -* Stay in touch by following the initiative on [Twitter](https://twitter.com/webwewantfyi) or [LinkedIn](https://www.linkedin.com) (direct link: `https://www.linkedin.com/company/the-web-we-want`; requires sign in) to keep up-to-date on what's in development, or to participate in surveys that help us prioritize submitted Wants. +* Stay in touch by following the initiative on [Twitter](https://twitter.com/webwewantfyi) or [LinkedIn](https://www.linkedin.com) (direct link: `https://www.linkedin.com/company/the-web-we-want`; requires sign in) to keep up-to-date on what's in development, or to participate in surveys that help us prioritize submitted Wants. @@ -29,11 +29,11 @@ The Web We Want initiative is the place to let browser vendors and standards gro We've successfully shipped a few Wants into DevTools, such as: -* Source Order Viewer - * The [Want](https://webwewant.fyi/wants/64). - * The docs: [Test keyboard support using the Source Order Viewer](../devtools/accessibility/test-tab-key-source-order-viewer.md). +* Source Order Viewer + * The [Want](https://webwewant.fyi/wants/64). + * The docs: [Test keyboard support using the Source Order Viewer](../devtools/accessibility/test-tab-key-source-order-viewer.md). -* 3D View +* 3D View * [Navigate z-index, DOM, and layers using the 3D View tool](../devtools/3d-view/index.md) - similar to what was in the Firefox DevTools. There are also other Wants that have previous proposals in standards groups. Join us in driving the future of the web forward with the Web We Want! diff --git a/microsoft-edge/webdriver/ie-mode.md b/microsoft-edge/webdriver/ie-mode.md index 20e6b5d9ad..9014a1bb1f 100644 --- a/microsoft-edge/webdriver/ie-mode.md +++ b/microsoft-edge/webdriver/ie-mode.md @@ -352,6 +352,6 @@ When using Microsoft Edge in IE mode, if your test switches focus away from a ce ## See also -* [Use WebDriver to automate Microsoft Edge](./index.md) - An overview of automating Microsoft Edge with the WebDriver protocol. -* [Selenium documentation](https://www.selenium.dev/documentation) - Information about WebDriver in the context of Selenium, and how to write automated WebDriver tests using Selenium. -* [Contact the Microsoft Edge DevTools team](../devtools/contact.md) to send feedback about using WebDriver, WebDriver testing frameworks (such as Selenium), and Microsoft Edge. +* [Use WebDriver to automate Microsoft Edge](./index.md) - An overview of automating Microsoft Edge with the WebDriver protocol. +* [Selenium documentation](https://www.selenium.dev/documentation) - Information about WebDriver in the context of Selenium, and how to write automated WebDriver tests using Selenium. +* [Contact the Microsoft Edge DevTools team](../devtools/contact.md) to send feedback about using WebDriver, WebDriver testing frameworks (such as Selenium), and Microsoft Edge. diff --git a/microsoft-edge/webdriver/index.md b/microsoft-edge/webdriver/index.md index 7fd8d81381..621548700f 100644 --- a/microsoft-edge/webdriver/index.md +++ b/microsoft-edge/webdriver/index.md @@ -12,13 +12,13 @@ ms.date: 12/12/2024 WebDriver allows you to automate Microsoft Edge by simulating user interaction. Tests that use WebDriver have some advantages over JavaScript unit tests that run in the browser: -* WebDriver accesses functionality and information that's not available to JavaScript running in browsers. +* WebDriver accesses functionality and information that's not available to JavaScript running in browsers. -* WebDriver simulates user events or OS-level events more accurately than JavaScript unit tests. +* WebDriver simulates user events or OS-level events more accurately than JavaScript unit tests. -* WebDriver manages multiple windows, tabs, and webpages in a single test session. +* WebDriver manages multiple windows, tabs, and webpages in a single test session. -* WebDriver runs multiple sessions of Microsoft Edge on a specific machine. +* WebDriver runs multiple sessions of Microsoft Edge on a specific machine. This article provides raw code samples, and not complete tests. This article doesn't provide a complete how-to for getting started with Selenium WebDriver, but covers only the Microsoft Edge-specific portions of the process. This includes obtaining Microsoft Edge WebDriver and setting Microsoft Edge-specific options in code. @@ -28,9 +28,9 @@ This article provides raw code samples, and not complete tests. This article do To automate Microsoft Edge with WebDriver to simulate user interaction, you need three components: -* Microsoft Edge. -* Microsoft Edge WebDriver. -* A WebDriver testing framework. +* Microsoft Edge. +* Microsoft Edge WebDriver. +* A WebDriver testing framework. The functional relationship between these components is as follows: @@ -52,23 +52,23 @@ To begin writing automated tests, make sure the Microsoft Edge WebDriver version Download and install a version of Microsoft Edge WebDriver that matches your browser version, as follows: -1. Go to `edge://settings/help` and note your version of Microsoft Edge, a four-part number: +1. Go to `edge://settings/help` and note your version of Microsoft Edge, a four-part number: - ![The build number for Microsoft Edge on Sep. 28, 2024](./index-images/microsoft-edge-version.png) + ![The build number for Microsoft Edge on Sep. 28, 2024](./index-images/microsoft-edge-version.png) -1. Go to [Microsoft Edge WebDriver](https://developer.microsoft.com/microsoft-edge/tools/webdriver/). +1. Go to [Microsoft Edge WebDriver](https://developer.microsoft.com/microsoft-edge/tools/webdriver/). -1. In the **Downloads** section of the page, click a platform button (such as **x64**) under a version number that matches your version number of Microsoft Edge: +1. In the **Downloads** section of the page, click a platform button (such as **x64**) under a version number that matches your version number of Microsoft Edge: - ![The `Get the latest version` section of the Microsoft Edge WebDriver webpage](./index-images/microsoft-edge-driver-install.png) + ![The `Get the latest version` section of the Microsoft Edge WebDriver webpage](./index-images/microsoft-edge-driver-install.png) - The first three parts of the four-part version number must match, between Microsoft Edge and Microsoft Edge WebDriver. For example, the following versions of Microsoft Edge and Microsoft Edge WebDriver will work together, because the first three numbers are the same: - * 128.0.2739.79 - * 128.0.2739.84 + The first three parts of the four-part version number must match, between Microsoft Edge and Microsoft Edge WebDriver. For example, the following versions of Microsoft Edge and Microsoft Edge WebDriver will work together, because the first three numbers are the same: + * 128.0.2739.79 + * 128.0.2739.84 - To download older versions, click the **Go to full directory** button below the **Recent versions** section. + To download older versions, click the **Go to full directory** button below the **Recent versions** section. -1. After the download completes, extract the `msedgedriver` executable to your preferred location. Add the folder where the executable is located to your `PATH` environment variable. +1. After the download completes, extract the `msedgedriver` executable to your preferred location. Add the folder where the executable is located to your `PATH` environment variable. You must install both a browser driver (Microsoft Edge WebDriver), and a WebDriver testing framework (such as Selenium WebDriver), as described in [Choose a WebDriver testing framework](#choose-a-webdriver-testing-framework) below. These are separate components. @@ -404,8 +404,8 @@ Your enterprise administrator defines what are trusted sites, including cloud re For more information about Application Guard, see: -* [Microsoft Edge support for Microsoft Defender Application Guard](/deployedge/microsoft-edge-security-windows-defender-application-guard). -* [Microsoft Defender Application Guard overview](/windows/security/threat-protection/microsoft-defender-application-guard/md-app-guard-overview). +* [Microsoft Edge support for Microsoft Defender Application Guard](/deployedge/microsoft-edge-security-windows-defender-application-guard). +* [Microsoft Defender Application Guard overview](/windows/security/threat-protection/microsoft-defender-application-guard/md-app-guard-overview). @@ -439,8 +439,8 @@ If your IT admin has set the [DeveloperToolsAvailability](/deployedge/microsoft- If you're using the Microsoft Edge WebDriver template that's provided with Visual Studio, which creates a simple test project, make sure you've done the following: -* Download Microsoft Edge WebDriver and make sure it's available in the PATH. -* Add the WebDriver framework (such as the **Selenium.WebDriver** NuGet package) to the project. +* Download Microsoft Edge WebDriver and make sure it's available in the PATH. +* Add the WebDriver framework (such as the **Selenium.WebDriver** NuGet package) to the project. After you do these steps, the example test that navigates to Bing should complete successfully. diff --git a/microsoft-edge/webview2/concepts/basic-authentication.md b/microsoft-edge/webview2/concepts/basic-authentication.md index 2a62d627b9..af75e4c25e 100644 --- a/microsoft-edge/webview2/concepts/basic-authentication.md +++ b/microsoft-edge/webview2/concepts/basic-authentication.md @@ -49,11 +49,11 @@ For more information, see [Navigation events for WebView2 apps](navigation-event ## Communication between the HTTP server, WebView2 control, and host app -* The **HTTP server** checks authentication (username and password credentials) and returns either an error document or the requested webpage. +* The **HTTP server** checks authentication (username and password credentials) and returns either an error document or the requested webpage. -* The **WebView2 control** instance raises the events. The WebView2 control sits between the HTTP server and the host app. The WebView2 control serves as an intermediary for communication between the host app and the HTTP server. +* The **WebView2 control** instance raises the events. The WebView2 control sits between the HTTP server and the host app. The WebView2 control serves as an intermediary for communication between the host app and the HTTP server. -* You write the **host app**. The host app sets the user name and password on the event's arguments (`EventArgs`) response objects. +* You write the **host app**. The host app sets the user name and password on the event's arguments (`EventArgs`) response objects. `BasicAuthenticationRequestedEventArgs` has a `Response` property. The `Response` property is an object that contains the username and password properties. @@ -113,8 +113,8 @@ The following simplified example shows the host app providing credentials (user This example isn't realistic, because: -* In practice, you'd prompt the user for the username and password rather than hardcoding them like `"user"` and `"pass"`. -* This code is synchronous, but you'd probably use asynchronous code instead. +* In practice, you'd prompt the user for the username and password rather than hardcoding them like `"user"` and `"pass"`. +* This code is synchronous, but you'd probably use asynchronous code instead. For more realistic code, see the subsequent section. @@ -185,8 +185,8 @@ else This example demonstrates a host app prompting the user for credentials (user name and password), and uses async code. This example builds upon the above sample, by adding the following features: -* Displays a dialog to prompt the user for their username and password. -* Calls the `GetDeferral` method on the `event` argument. +* Displays a dialog to prompt the user for their username and password. +* Calls the `GetDeferral` method on the `event` argument. ##### [C#](#tab/csharp) @@ -396,8 +396,8 @@ For more information, see [Navigation events for WebView2 apps](navigation-event #### Navigations for basic authentication There are two kinds of navigations in the flow: -* A "server requested authentication" navigation. -* A "server gave the WebView2 control a document" navigation. +* A "server requested authentication" navigation. +* A "server gave the WebView2 control a document" navigation. After the first type of navigation, the server has asked for authentication and the app needs to try that kind of navigation again (with a new navigation ID). The new navigation will use whatever the host app gets from the events arguments response objects. @@ -438,4 +438,4 @@ Navigation `event args` has a property: the `NavigationId`. The `NavigationId` ## See also -* [HTTP authentication](https://developer.mozilla.org/docs/Web/HTTP/Authentication) at MDN. +* [HTTP authentication](https://developer.mozilla.org/docs/Web/HTTP/Authentication) at MDN. diff --git a/microsoft-edge/webview2/concepts/browser-features.md b/microsoft-edge/webview2/concepts/browser-features.md index 6ab34d7956..583b26c616 100644 --- a/microsoft-edge/webview2/concepts/browser-features.md +++ b/microsoft-edge/webview2/concepts/browser-features.md @@ -15,9 +15,9 @@ WebView2 is based on the Microsoft Edge browser. You have the opportunity to ex This article covers: -* The modified browser features and supporting information. -* The ability to turn on or off the feature. -* Guidance on keyboard shortcuts. +* The modified browser features and supporting information. +* The ability to turn on or off the feature. +* Guidance on keyboard shortcuts. @@ -25,9 +25,9 @@ This article covers: In the context of WebView2, browser features adhere to the following design guidelines: -* Most features work the same in WebView2 and Microsoft Edge. If a feature doesn't make sense in the context of WebView2 or for other reasons, the feature is modified or turned off. +* Most features work the same in WebView2 and Microsoft Edge. If a feature doesn't make sense in the context of WebView2 or for other reasons, the feature is modified or turned off. -* WebView2 features don't include Microsoft Edge branding. +* WebView2 features don't include Microsoft Edge branding. @@ -35,9 +35,9 @@ In the context of WebView2, browser features adhere to the following design guid The following table displays the WebView2 features that differ from the Microsoft Edge browser: -* **Default state** indicates that the feature is part of the default experience on a new WebView2 instance. +* **Default state** indicates that the feature is part of the default experience on a new WebView2 instance. -* **Configurable** indicates that you can turn on or off the feature using WebView2 APIs or command-line switches. +* **Configurable** indicates that you can turn on or off the feature using WebView2 APIs or command-line switches. * This article doesn't cover turning a feature on or off by using a command-line switch. See [List of Chromium Command Line Switches](https://peter.sh/experiments/chromium-command-line-switches). | Feature | Default state | Configurable | Details | @@ -86,21 +86,21 @@ The following WebView2 platform features are currently unavailable: The following Microsoft Edge and Google Chrome settings webpages aren't available in WebView2: -* `chrome-search://local-ntp/local-ntp.html` -* `edge://application-guard-internals` -* `edge://apps` -* `edge://compat` -* `edge://extensions` -* `edge://favorites` -* `edge://help` -* `edge://management` -* `edge://network-error` -* `edge://new-tab-page` -* `edge://newtab` -* `edge://omnibox` -* `edge://settings` -* `edge://supervised-user-internals` -* `edge://version` +* `chrome-search://local-ntp/local-ntp.html` +* `edge://application-guard-internals` +* `edge://apps` +* `edge://compat` +* `edge://extensions` +* `edge://favorites` +* `edge://help` +* `edge://management` +* `edge://network-error` +* `edge://new-tab-page` +* `edge://newtab` +* `edge://omnibox` +* `edge://settings` +* `edge://supervised-user-internals` +* `edge://version` ## Google Authentication diff --git a/microsoft-edge/webview2/concepts/clear-browsing-data.md b/microsoft-edge/webview2/concepts/clear-browsing-data.md index 3f0c7bcd49..6c1396b81c 100644 --- a/microsoft-edge/webview2/concepts/clear-browsing-data.md +++ b/microsoft-edge/webview2/concepts/clear-browsing-data.md @@ -15,9 +15,9 @@ To clear browsing data from the user data folder for a WebView2 app and free up The Clear Browsing Data API allows you to programmatically erase data in the [user data folder](user-data-folder.md) that's associated with a WebView2 user profile. For example, use this API to clear user data and history when a user signs out. You can: -* Clear all browsing data. -* Clear selected kinds of browsing data. -* Clear selected kinds of browsing data in a specified time range. +* Clear all browsing data. +* Clear selected kinds of browsing data. +* Clear selected kinds of browsing data in a specified time range. @@ -108,9 +108,9 @@ This example clears autofill data and password autosave data from the last hour. The following parameter values are passed to the Clear Browsing Data API method: -* The selected kinds of browser data = autofill data and password autosave data. +* The selected kinds of browser data = autofill data and password autosave data. -* The specified time range = the past hour (3600 seconds). +* The specified time range = the past hour (3600 seconds). diff --git a/microsoft-edge/webview2/concepts/data-privacy.md b/microsoft-edge/webview2/concepts/data-privacy.md index 7d3a682087..83f03ddddb 100644 --- a/microsoft-edge/webview2/concepts/data-privacy.md +++ b/microsoft-edge/webview2/concepts/data-privacy.md @@ -15,9 +15,9 @@ WebView2 collects a set of optional and required diagnostic data to keep WebView Additionally, WebView2 follows the standards that are outlined in [User data and privacy in Microsoft Edge](/legal/microsoft-edge/privacy). WebView2 has mechanisms to ensure privacy. WebView2 data collection follows the same strict standards as Microsoft Edge. For more information, see [Microsoft Privacy Statement – Microsoft privacy](https://privacy.microsoft.com/privacystatement). The main diagnostic data sources are: -* Chromium and Microsoft Edge telemetry infrastructure. -* Windows data reporting. -* Watson (Microsoft Internal) infrastructure to collect crash dumps. +* Chromium and Microsoft Edge telemetry infrastructure. +* Windows data reporting. +* Watson (Microsoft Internal) infrastructure to collect crash dumps. This article is for WebView2 developers. @@ -38,14 +38,14 @@ Here's an example of diagnostic data settings, for a Windows 11 machine that has ![Settings on Windows 11 for Diagnostic data](./data-privacy-images/diagnostic-data-settings.png) When the Windows **Diagnostic data** setting is on: -* WebView2-related data is collected, including API usage, SDK usage, and creation failure. -* Browser diagnostic data is collected. Only browser events that are relevant to WebView2 are collected. +* WebView2-related data is collected, including API usage, SDK usage, and creation failure. +* Browser diagnostic data is collected. Only browser events that are relevant to WebView2 are collected. Regardless of the Windows **Diagnostic data** setting, WebView2 collects required data that's necessary to maintain performance and reliability; see [Diagnostics, feedback, and privacy in Windows](https://support.microsoft.com/windows/diagnostics-feedback-and-privacy-in-windows-28808a2b-a31b-dd73-dcd3-4559a5199319). Although you don't have control of overall diagnostic data collection, WebView2 offers APIs to control the behavior of the following features that generate data: -* SmartScreen. -* Custom crash reporting. +* SmartScreen. +* Custom crash reporting. These features are described below. diff --git a/microsoft-edge/webview2/concepts/developer-guide.md b/microsoft-edge/webview2/concepts/developer-guide.md index 764852ac5f..7cf8529a92 100644 --- a/microsoft-edge/webview2/concepts/developer-guide.md +++ b/microsoft-edge/webview2/concepts/developer-guide.md @@ -116,11 +116,11 @@ If any of your app's event handlers on the `CoreWebView2Environment` object hold To prevent such a memory leak: -* For any added event handler, remove the event handler before releasing the environment object. +* For any added event handler, remove the event handler before releasing the environment object. -* Avoid holding a reference to the environment object in an event handler. Instead, the event handler can access the environment object from the `sender` argument of the "event completed" callback. +* Avoid holding a reference to the environment object in an event handler. Instead, the event handler can access the environment object from the `sender` argument of the "event completed" callback. -* If you want the app to hold a reference to a WebView2 object, use a weak reference whenever possible. +* If you want the app to hold a reference to a WebView2 object, use a weak reference whenever possible. diff --git a/microsoft-edge/webview2/concepts/distribution.md b/microsoft-edge/webview2/concepts/distribution.md index 42fb09d7b4..5beb9386e1 100644 --- a/microsoft-edge/webview2/concepts/distribution.md +++ b/microsoft-edge/webview2/concepts/distribution.md @@ -31,9 +31,9 @@ See [Windows Server Update Services (WSUS)](./enterprise.md#windows-server-updat During development and testing, a WebView2 app can use either option as the backing web platform: -* The WebView2 Runtime. The Runtime generally provides the same web platform capabilities and update cadence as the Stable channel of the Microsoft Edge browser. Use the WebView2 Runtime in a production environment or to develop and test against the web platform that your users have today. +* The WebView2 Runtime. The Runtime generally provides the same web platform capabilities and update cadence as the Stable channel of the Microsoft Edge browser. Use the WebView2 Runtime in a production environment or to develop and test against the web platform that your users have today. -* A preview (Insider) Microsoft Edge browser channel. These Microsoft Edge preview channels are Beta, Dev, and Canary. Use this approach to test your app for forward-compatibility, so that you know if a breaking change is coming that will require updating your app. See [Test upcoming APIs and features](../how-to/set-preview-channel.md). +* A preview (Insider) Microsoft Edge browser channel. These Microsoft Edge preview channels are Beta, Dev, and Canary. Use this approach to test your app for forward-compatibility, so that you know if a breaking change is coming that will require updating your app. See [Test upcoming APIs and features](../how-to/set-preview-channel.md). A production release of a WebView2 app can only use the WebView2 Runtime as the backing web platform, not Microsoft Edge. @@ -43,11 +43,11 @@ A production release of a WebView2 app can only use the WebView2 Runtime as the WebView2 apps aren't permitted to use the Stable channel of Microsoft Edge as the backing web platform. This restriction prevents a production release of a WebView2 app from taking a dependency on the browser. A WebView2 app cannot take a dependency on the browser during production, for the following reasons: -* Microsoft Edge isn't guaranteed to be present on all user devices. Many devices in enterprises and in education are disconnected from Windows Update or aren't managed by Microsoft directly. Such devices might not have Microsoft Edge installed. Requiring the production version of WebView2 apps to use the WebView2 Runtime rather than Microsoft Edge avoids making Microsoft Edge a prerequisite for running a WebView2 app. +* Microsoft Edge isn't guaranteed to be present on all user devices. Many devices in enterprises and in education are disconnected from Windows Update or aren't managed by Microsoft directly. Such devices might not have Microsoft Edge installed. Requiring the production version of WebView2 apps to use the WebView2 Runtime rather than Microsoft Edge avoids making Microsoft Edge a prerequisite for running a WebView2 app. -* Browsers and apps have different use cases. If a WebView2 app required the presence of Microsoft Edge on the client, that would potentially have unintended side-effects on the WebView2 app. For example, an IT admin can prevent the browser from being updated from a specific version, to keep the browser compatible with an internal website. Requiring the production version of a WebView2 app to use the WebView2 Runtime rather than the browser allows the WebView2 app to stay evergreen even if browser updates are prevented by the clients' admin. +* Browsers and apps have different use cases. If a WebView2 app required the presence of Microsoft Edge on the client, that would potentially have unintended side-effects on the WebView2 app. For example, an IT admin can prevent the browser from being updated from a specific version, to keep the browser compatible with an internal website. Requiring the production version of a WebView2 app to use the WebView2 Runtime rather than the browser allows the WebView2 app to stay evergreen even if browser updates are prevented by the clients' admin. -* As opposed to the browser, the WebView2 Runtime is developed and tested for app scenarios, and in some cases the WebView2 Runtime might include bug fixes that aren't yet available in the browser. +* As opposed to the browser, the WebView2 Runtime is developed and tested for app scenarios, and in some cases the WebView2 Runtime might include bug fixes that aren't yet available in the browser. The Evergreen WebView2 Runtime will be included as part of the Windows 11 operating system. Various WebView2 apps have installed the Evergreen Runtime on devices with an operating system prior to Windows 11. However, some devices might not have the Runtime pre-installed, so it's a good practice to check whether the Runtime is present on the client. @@ -61,11 +61,11 @@ The Evergreen distribution mode ensures that your WebView2 app is taking advanta The Evergreen distribution mode has the following characteristics: -* The WebView2 Runtime updates automatically without requiring any action from you. It receives the same Microsoft Edge updates that are described in [Release notes for Microsoft Edge Stable Channel](/deployedge/microsoft-edge-relnote-stable-channel) and [Release notes for Microsoft Edge Security Updates](/deployedge/microsoft-edge-relnotes-security). +* The WebView2 Runtime updates automatically without requiring any action from you. It receives the same Microsoft Edge updates that are described in [Release notes for Microsoft Edge Stable Channel](/deployedge/microsoft-edge-relnote-stable-channel) and [Release notes for Microsoft Edge Security Updates](/deployedge/microsoft-edge-relnotes-security). -* All WebView2 apps that use the Evergreen distribution mode use a shared copy of the Evergreen WebView2 Runtime, which saves disk space. +* All WebView2 apps that use the Evergreen distribution mode use a shared copy of the Evergreen WebView2 Runtime, which saves disk space. -* On eligible systems, binaries for Microsoft Edge and the Evergreen WebView2 Runtime are hard-linked together when they are on the same version. This linking provides benefits for disk footprint, memory, and performance. +* On eligible systems, binaries for Microsoft Edge and the Evergreen WebView2 Runtime are hard-linked together when they are on the same version. This linking provides benefits for disk footprint, memory, and performance. When you use the Evergreen distribution mode of the WebView2 Runtime, your WebView2 app assumes that clients have the latest Runtime. Your app cannot require a particular version of the WebView2 Runtime for all apps on the client. By the time a new WebView2 SDK package is released, a compatible version of the WebView2 Runtime has already been distributed to clients. Therefore it's OK for your WebView2 app to use the APIs that are in the latest version of the WebView2 SDK. @@ -77,9 +77,9 @@ For introductory information, see [Windows 11 devices and Windows 10 devices](./ The vast majority of Windows 10 devices have the WebView2 Runtime installed already, as described in [Delivering Microsoft Edge WebView2 Runtime to managed Windows 10 devices](https://blogs.windows.com/msedgedev/2022/12/14/delivering-microsoft-edge-webview2-runtime-to-managed-windows-10-devices/). A small number of Windows 10 devices don't have the WebView2 Runtime installed. We recommend that you handle this edge case, by using either of the following approaches: -* Programmatically deploy the Evergreen Runtime with your app. See [Deploying the Evergreen WebView2 Runtime](#deploying-the-evergreen-webview2-runtime) below. +* Programmatically deploy the Evergreen Runtime with your app. See [Deploying the Evergreen WebView2 Runtime](#deploying-the-evergreen-webview2-runtime) below. -* Redirect your end users to the Microsoft site: [Download Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/consumer/), and have end users download the Evergreen WebView2 Runtime installer from the site and install the Runtime themselves. +* Redirect your end users to the Microsoft site: [Download Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/consumer/), and have end users download the Evergreen WebView2 Runtime installer from the site and install the Runtime themselves. See also: * [Prerelease and Release SDKs for WebView2](./versioning.md) - Use a Prerelease version of the SDK along with a preview channel of Microsoft Edge; or use a Release version of the SDK along with the Evergreen WebView2 Runtime. @@ -90,15 +90,15 @@ See also: Only one installation of the Evergreen WebView2 Runtime is needed for all Evergreen apps on the device. Several tools are available at [Download the WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2#download-the-webview2-runtime) to help you deploy the Evergreen Runtime. -* For online clients: _WebView2 Runtime Bootstrapper_ is a tiny (approximately 2 MB) installer. The WebView2 Runtime Bootstrapper downloads and installs the Evergreen Runtime from Microsoft servers that matches the user's device architecture. +* For online clients: _WebView2 Runtime Bootstrapper_ is a tiny (approximately 2 MB) installer. The WebView2 Runtime Bootstrapper downloads and installs the Evergreen Runtime from Microsoft servers that matches the user's device architecture. - * In the setup part of your WebView2 app, link to the bootstrapper. Use a link to programmatically download the bootstrapper; select the **Get the Link** button at the above download page. + * In the setup part of your WebView2 app, link to the bootstrapper. Use a link to programmatically download the bootstrapper; select the **Get the Link** button at the above download page. - * Or, download the bootstrapper and package it with your WebView2 app. + * Or, download the bootstrapper and package it with your WebView2 app. -* For offline clients: _WebView2 Runtime Standalone Installer_ is a full installer that installs the Evergreen WebView2 Runtime in offline environments. +* For offline clients: _WebView2 Runtime Standalone Installer_ is a full installer that installs the Evergreen WebView2 Runtime in offline environments. -* If you're using App Installer to deploy MSIX applications, you can specify the WebView2 Runtime as a dependency, to have it be installed with the application. For details about how to do this, see [win32dependencies:ExternalDependency (Windows 10, Windows 11)](/uwp/schemas/appxpackage/uapmanifestschema/element-win32dependencies-externaldependency) in the App package manifest docs. See also [Install Windows 10 apps with App Installer](/windows/msix/app-installer/app-installer-root). +* If you're using App Installer to deploy MSIX applications, you can specify the WebView2 Runtime as a dependency, to have it be installed with the application. For details about how to do this, see [win32dependencies:ExternalDependency (Windows 10, Windows 11)](/uwp/schemas/appxpackage/uapmanifestschema/element-win32dependencies-externaldependency) in the App package manifest docs. See also [Install Windows 10 apps with App Installer](/windows/msix/app-installer/app-installer-root). @@ -117,7 +117,7 @@ Use the following online deployment workflow or offline deployment workflow to e To verify that a WebView2 Runtime is installed, use one of the following approaches: - * Approach 1: Inspect the `pv (REG_SZ)` regkey for the WebView2 Runtime at both of the following registry locations. The `HKEY_LOCAL_MACHINE` regkey is used for _per-machine_ install. The `HKEY_CURRENT_USER` regkey is used for _per-user_ install. + * Approach 1: Inspect the `pv (REG_SZ)` regkey for the WebView2 Runtime at both of the following registry locations. The `HKEY_LOCAL_MACHINE` regkey is used for _per-machine_ install. The `HKEY_CURRENT_USER` regkey is used for _per-user_ install. For WebView2 applications, at least one of these regkeys must be present and defined with a version greater than 0.0.0.0. If neither regkey exists, or if only one of these regkeys exists but its value is `null`, an empty string, or 0.0.0.0, this means that the WebView2 Runtime isn't installed on the client. Inspect these regkeys to detect whether the WebView2 Runtime is installed, and to get the version of the WebView2 Runtime. Find `pv (REG_SZ)` at the following two locations. @@ -137,7 +137,7 @@ To verify that a WebView2 Runtime is installed, use one of the following approac HKEY_CURRENT_USER\Software\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5} ``` - * Approach 2: Run [GetAvailableCoreWebView2BrowserVersionString](/microsoft-edge/webview2/reference/win32/webview2-idl#getavailablecorewebview2browserversionstring) and evaluate whether the `versionInfo` is `nullptr`. `nullptr` indicates that the WebView2 Runtime isn't installed. This API returns version information for the WebView2 Runtime or for any installed preview channels of Microsoft Edge (Beta, Dev, or Canary). + * Approach 2: Run [GetAvailableCoreWebView2BrowserVersionString](/microsoft-edge/webview2/reference/win32/webview2-idl#getavailablecorewebview2browserversionstring) and evaluate whether the `versionInfo` is `nullptr`. `nullptr` indicates that the WebView2 Runtime isn't installed. This API returns version information for the WebView2 Runtime or for any installed preview channels of Microsoft Edge (Beta, Dev, or Canary). @@ -258,15 +258,15 @@ To use the Fixed Version distribution mode: 1. Indicate the path to the Fixed Version binaries when creating the WebView2 environment. - * For Win32 C/C++, you can create the environment using the [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl#createcorewebview2environmentwithoptions) function. Use the `browserExecutableFolder` parameter to indicate the path to the folder that contains the WebView2 runtime (`msedgewebview2.exe`). + * For Win32 C/C++, you can create the environment using the [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl#createcorewebview2environmentwithoptions) function. Use the `browserExecutableFolder` parameter to indicate the path to the folder that contains the WebView2 runtime (`msedgewebview2.exe`). - * For .NET, you must specify the environment before the WebView2 `Source` property takes effect. For .NET, you can use either of the following approaches to specify the environment: + * For .NET, you must specify the environment before the WebView2 `Source` property takes effect. For .NET, you can use either of the following approaches to specify the environment: - * Set the `CreationProperties` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.webview2.creationproperties)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms.webview2)) property on the `WebView2` element. Use the `BrowserExecutableFolder` member in the `CoreWebView2CreationProperties` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.corewebview2creationproperties)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms)) class to indicate the path to the Fixed Version binaries. + * Set the `CreationProperties` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.webview2.creationproperties)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms.webview2)) property on the `WebView2` element. Use the `BrowserExecutableFolder` member in the `CoreWebView2CreationProperties` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.corewebview2creationproperties)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms)) class to indicate the path to the Fixed Version binaries. - * Alternatively, use `EnsureCoreWebView2Async` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.webview2.ensurecorewebview2async)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms.webview2.ensurecorewebview2async)) to specify the environment. Use the `browserExecutableFolder` parameter in [CoreWebView2Environment.CreateAsync](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createasync) to indicate the path to the Fixed Version binaries. + * Alternatively, use `EnsureCoreWebView2Async` ([WPF](/dotnet/api/microsoft.web.webview2.wpf.webview2.ensurecorewebview2async)/[WinForms](/dotnet/api/microsoft.web.webview2.winforms.webview2.ensurecorewebview2async)) to specify the environment. Use the `browserExecutableFolder` parameter in [CoreWebView2Environment.CreateAsync](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createasync) to indicate the path to the Fixed Version binaries. - * For WinUI, make sure the app has access to the folder by specifying the installed location and setting the environment variable for runtime path. One way to do this is by adding the following C# code to your app: + * For WinUI, make sure the app has access to the folder by specifying the installed location and setting the environment variable for runtime path. One way to do this is by adding the following C# code to your app: ```csharp StorageFolder localFolder = Windows.ApplicationModel.Package.Current.InstalledLocation; @@ -278,7 +278,7 @@ To use the Fixed Version distribution mode: 1. Package and ship the Fixed Version binaries with your app. Update the binaries as appropriate. - * For WinUI, this might include opening the project file (`.csproj`) in a code editor, and then add the following code within the project tags: + * For WinUI, this might include opening the project file (`.csproj`) in a code editor, and then add the following code within the project tags: ```xml @@ -313,7 +313,7 @@ To use the Fixed Version distribution mode: #### Known issues for Fixed Version -* Currently, Fixed Version cannot be run from a network location or UNC path. +* Currently, Fixed Version cannot be run from a network location or UNC path. @@ -323,9 +323,9 @@ The `WebView2Loader` code needs to be shipped with the app. This can be done by `WebView2Loader.dll` is a native and architecture-specific binary, so you need to include all flavors of this binary that you expect your app to run in. For example: -* For x86, you would include the x86 version of `WebView2Loader.dll`. +* For x86, you would include the x86 version of `WebView2Loader.dll`. -* For a managed app using AnyCPU, you would include the x86, x64, and arm64 versions of `WebView2Loader.dll`. The correct version of `WebView2Loader.dll` is loaded from the appropriate architecture-specific folder. +* For a managed app using AnyCPU, you would include the x86, x64, and arm64 versions of `WebView2Loader.dll`. The correct version of `WebView2Loader.dll` is loaded from the appropriate architecture-specific folder. Example native app folder structure: diff --git a/microsoft-edge/webview2/concepts/end-user-faq.md b/microsoft-edge/webview2/concepts/end-user-faq.md index 3bb0650e77..6eeefc961c 100644 --- a/microsoft-edge/webview2/concepts/end-user-faq.md +++ b/microsoft-edge/webview2/concepts/end-user-faq.md @@ -34,10 +34,10 @@ Most people will see WebView2 used by Widgets, Teams, Office, Outlook, Weather, WebView2 follows the process model that's used in the Chromium browser engine of Microsoft Edge, described in [Process Model and Site Isolation](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md). Having functionality broken up into multiple processes help reliability, security, and performance. Each process performs a certain responsibility, and can do that work uninterrupted, even if one of the other processes hits a problem. There are normally a few processes: -* The WebView2 manager. -* A GPU process. -* Utility processes, such as network or audio, depending on the content. -* Renderer processes. +* The WebView2 manager. +* A GPU process. +* Utility processes, such as network or audio, depending on the content. +* Renderer processes. Your machine will have one set of processes for each app that uses WebView2, and typically one renderer process for each WebView2 control that's in the app, similar to how you have one renderer process per tab in a browser. For details, see [Process model for WebView2 apps](./process-model.md). diff --git a/microsoft-edge/webview2/concepts/environment-controller-core.md b/microsoft-edge/webview2/concepts/environment-controller-core.md index 2e4ef41e35..90f4e8b324 100644 --- a/microsoft-edge/webview2/concepts/environment-controller-core.md +++ b/microsoft-edge/webview2/concepts/environment-controller-core.md @@ -17,11 +17,11 @@ ms.date: 06/24/2022 The `CoreWebView2Environment`, `CoreWebView2Controller`, and `CoreWebView2` classes (or equivalent interfaces) work together so your app can host a WebView2 browser control and access its browser features. These three large classes expose a wide range of APIs that your host app can access to provide many categories of browser-related features for your users. -* The `CoreWebView2Environment` class represents a group of WebView2 controls that share the same WebView2 browser process, user data folder, and renderer. From this `CoreWebView2Environment` class, you create pairs of `CoreWebView2Controller` and `CoreWebView2` instances. +* The `CoreWebView2Environment` class represents a group of WebView2 controls that share the same WebView2 browser process, user data folder, and renderer. From this `CoreWebView2Environment` class, you create pairs of `CoreWebView2Controller` and `CoreWebView2` instances. -* The `CoreWebView2Controller` class is responsible for hosting-related functionality such as window focus, visibility, size, and input, where your app hosts the WebView2 control. +* The `CoreWebView2Controller` class is responsible for hosting-related functionality such as window focus, visibility, size, and input, where your app hosts the WebView2 control. -* The `CoreWebView2` class is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. +* The `CoreWebView2` class is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. @@ -66,13 +66,13 @@ or, equivalently: * `ICoreWebView2Controller` `CoreWebView2Environment` represents a group of WebView2 controls that all share the following: -* They share the same WebView2 browser process. -* They share the same user data folder. -* They potentially share WebView2 renderer and other WebView2 processes. +* They share the same WebView2 browser process. +* They share the same user data folder. +* They potentially share WebView2 renderer and other WebView2 processes. From the `CoreWebView2Environment`, you create `CoreWebView2Controller` and `CoreWebView2` pairs. They always come together as a `CoreWebView2Controller` and a corresponding `CoreWebView2`. -* The `CoreWebView2Controller` is responsible for all hosting-related functionality such as focus, visibility, size, and input. -* The `CoreWebView2` is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. +* The `CoreWebView2Controller` is responsible for all hosting-related functionality such as focus, visibility, size, and input. +* The `CoreWebView2` is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. diff --git a/microsoft-edge/webview2/concepts/evergreen-vs-fixed-version.md b/microsoft-edge/webview2/concepts/evergreen-vs-fixed-version.md index 6951bc7a1a..5a2eb6b6d2 100644 --- a/microsoft-edge/webview2/concepts/evergreen-vs-fixed-version.md +++ b/microsoft-edge/webview2/concepts/evergreen-vs-fixed-version.md @@ -32,15 +32,15 @@ In the _Evergreen_ distribution mode, the WebView2 Runtime isn't packaged with y Pros: -* The underlying web platform (WebView2 Runtime) updates automatically without more effort from you. +* The underlying web platform (WebView2 Runtime) updates automatically without more effort from you. -* Less disk space is required for the WebView2 Runtime on client systems, because the WebView2 Runtime is shared by all WebView2 apps that are on the client. +* Less disk space is required for the WebView2 Runtime on client systems, because the WebView2 Runtime is shared by all WebView2 apps that are on the client. -* On eligible systems, binaries for Microsoft Edge and the Evergreen WebView2 Runtime are hard-linked together when they are on the same version. This linking provides benefits for disk footprint, memory, and performance. +* On eligible systems, binaries for Microsoft Edge and the Evergreen WebView2 Runtime are hard-linked together when they are on the same version. This linking provides benefits for disk footprint, memory, and performance. Cons: -* Your WebView2 app cannot specify that a particular version of the WebView2 Runtime is required. +* Your WebView2 app cannot specify that a particular version of the WebView2 Runtime is required. See also: * [The Evergreen Runtime distribution mode](./distribution.md#the-evergreen-runtime-distribution-mode) in _Distribute your app and the WebView2 Runtime_. @@ -66,15 +66,15 @@ See: In the _Fixed Version_ distribution mode, you download a specific version of the WebView2 Runtime and package it together with your WebView2 app in your app package. The WebView2 Runtime that you package with your app is used only by your WebView2 app, not by any other apps on the client's machine. Pros: -* You have more control over versioning of the WebView2 Runtime. You know which WebView2 APIs are available to your app, because you control which version of the WebView2 Runtime is available to your app. Your app doesn't need to test whether the latest APIs are present. +* You have more control over versioning of the WebView2 Runtime. You know which WebView2 APIs are available to your app, because you control which version of the WebView2 Runtime is available to your app. Your app doesn't need to test whether the latest APIs are present. Cons: -* You need to manage the WebView2 Runtime yourself. The WebView2 Runtime isn't automatically updated on clients, so to use the latest WebView2 APIs, you must periodically update your app together with the updated WebView2 Runtime. +* You need to manage the WebView2 Runtime yourself. The WebView2 Runtime isn't automatically updated on clients, so to use the latest WebView2 APIs, you must periodically update your app together with the updated WebView2 Runtime. -* More disk space is required on the client, if there are multiple WebView2 apps installed. +* More disk space is required on the client, if there are multiple WebView2 apps installed. -* The Fixed Version runtime can't be installed by using an installer. +* The Fixed Version runtime can't be installed by using an installer. See also: * [The Fixed Version runtime distribution mode](./distribution.md#the-fixed-version-runtime-distribution-mode) in _Distribute your app and the WebView2 Runtime_. @@ -89,15 +89,15 @@ The [Download the WebView2 Runtime](https://developer.microsoft.com/microsoft-ed The Evergreen distribution mode is recommended for most apps. -* The **Evergreen Bootstrapper** section of the page provides a small Evergreen Runtime bootstrapper that runs on the client machine, for online users. The bootstrapper downloads and installs the appropriate Evergreen WebView2 Runtime onto the client. You can use the bootstrapper a couple different ways: +* The **Evergreen Bootstrapper** section of the page provides a small Evergreen Runtime bootstrapper that runs on the client machine, for online users. The bootstrapper downloads and installs the appropriate Evergreen WebView2 Runtime onto the client. You can use the bootstrapper a couple different ways: - * Link to the bootstrapper, using a link that you obtain from the **Get the Link** button. Your app uses this link to programmatically download the bootstrapper onto the client and invoke the bootstrapper. This approach avoids the need to package the bootstrapper with your app. This approach has a dependency on Microsoft's Content Delivery Network (CDN), to get the bootstrapper. + * Link to the bootstrapper, using a link that you obtain from the **Get the Link** button. Your app uses this link to programmatically download the bootstrapper onto the client and invoke the bootstrapper. This approach avoids the need to package the bootstrapper with your app. This approach has a dependency on Microsoft's Content Delivery Network (CDN), to get the bootstrapper. - * Download the bootstrapper (using the **Download** button in the **Bootstrapper** section) and then distribute the bootstrapper with your app. In this approach, you package the bootstrapper with your app installer/updater or with your app itself, and invoke the bootstrapper that you included with your app. This approach avoids dependency on Microsoft's CDN, to get the bootstrapper. + * Download the bootstrapper (using the **Download** button in the **Bootstrapper** section) and then distribute the bootstrapper with your app. In this approach, you package the bootstrapper with your app installer/updater or with your app itself, and invoke the bootstrapper that you included with your app. This approach avoids dependency on Microsoft's CDN, to get the bootstrapper. -* The **Evergreen Standalone Installer** section of the page provides a large, standalone Evergreen installer, primarily for offline users. In this approach, you package the standalone installer with your app installer/updater or app itself, and invoke the Evergreen Standalone installer. This approach avoids dependency on Microsoft's CDN, to get the Runtime. +* The **Evergreen Standalone Installer** section of the page provides a large, standalone Evergreen installer, primarily for offline users. In this approach, you package the standalone installer with your app installer/updater or app itself, and invoke the Evergreen Standalone installer. This approach avoids dependency on Microsoft's CDN, to get the Runtime. -* The **Fixed Version** section of the page provides a Fixed Version runtime, which is a specific version of the WebView2 Runtime that you distribute along with your app. +* The **Fixed Version** section of the page provides a Fixed Version runtime, which is a specific version of the WebView2 Runtime that you distribute along with your app. diff --git a/microsoft-edge/webview2/concepts/frames.md b/microsoft-edge/webview2/concepts/frames.md index 566b30f0b6..59472e84ab 100644 --- a/microsoft-edge/webview2/concepts/frames.md +++ b/microsoft-edge/webview2/concepts/frames.md @@ -201,8 +201,8 @@ See also: ## Sending and receiving messages Messages can be sent between the native app and JavaScript code that's in an iframe: -* You can send messages from JavaScript in an iframe in an HTML page to the host app. -* You can send messages from the host app to JavaScript in an iframe in an HTML page. +* You can send messages from JavaScript in an iframe in an HTML page to the host app. +* You can send messages from the host app to JavaScript in an iframe in an HTML page. #### Sending web messages from an iframe to the host app diff --git a/microsoft-edge/webview2/concepts/overview-features-apis.md b/microsoft-edge/webview2/concepts/overview-features-apis.md index fa0f598c43..fc3d47ea7d 100644 --- a/microsoft-edge/webview2/concepts/overview-features-apis.md +++ b/microsoft-edge/webview2/concepts/overview-features-apis.md @@ -139,11 +139,11 @@ This page only lists APIs that are in Release SDKs; it doesn't list Experimental The `CoreWebView2Environment`, `CoreWebView2Controller`, and `CoreWebView2` classes (or equivalent interfaces) work together so your app can host a WebView2 browser control and access its browser features. These three large classes expose a wide range of APIs that your host app can access to provide many categories of browser-related features for your users. -* The `CoreWebView2Environment` class represents a group of WebView2 controls that share the same WebView2 browser process, user data folder, and renderer processes. From this `CoreWebView2Environment` class, you create pairs of `CoreWebView2Controller` and `CoreWebView2` instances. +* The `CoreWebView2Environment` class represents a group of WebView2 controls that share the same WebView2 browser process, user data folder, and renderer processes. From this `CoreWebView2Environment` class, you create pairs of `CoreWebView2Controller` and `CoreWebView2` instances. -* The `CoreWebView2Controller` class is responsible for hosting-related functionality such as window focus, visibility, size, and input, where your app hosts the WebView2 control. +* The `CoreWebView2Controller` class is responsible for hosting-related functionality such as window focus, visibility, size, and input, where your app hosts the WebView2 control. -* The `CoreWebView2` class is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. +* The `CoreWebView2` class is for the web-specific parts of the WebView2 control, including networking, navigation, script, and parsing and rendering HTML. @@ -177,9 +177,9 @@ 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. 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. -* Run a dedicated JavaScript file on the web side of an application. +* 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. +* Run a dedicated JavaScript file on the web side of an application. See also: * [Interop of native and web code](../how-to/communicate-btwn-web-native.md) @@ -845,10 +845,10 @@ We're actively investigating these issues, and we encourage you to report any pr #### Downloads Your app can manage the download experience in WebView2. Your app can: -* Allow or block downloads based on different metadata. -* Change the download location. -* Configure a custom download UI. -* Customize the default UI. +* Allow or block downloads based on different metadata. +* Change the download location. +* Configure a custom download UI. +* Customize the default UI. ##### [.NET/C#](#tab/dotnetcsharp) @@ -1563,8 +1563,8 @@ Provides hit-testing results on the regions that a WebView2 contains. Useful fo #### Swipe gesture navigation By hosting the WebView2 control, your app can enable or disable swiping gesture navigation on touch input-enabled devices. This gesture allows end users to: -* Swipe left/right (swipe horizontally) to navigate to the previous or next page in the navigation history. -* Pull to refresh (swipe vertically) the current page. +* Swipe left/right (swipe horizontally) to navigate to the previous or next page in the navigation history. +* Pull to refresh (swipe vertically) the current page. This feature is currently disabled by default in the browser. To enable this feature in WebView2, set the `AdditionalBrowserArguments` property, specifying the `--pull-to-refresh` switch. @@ -1924,8 +1924,8 @@ See also: ###### Custom crash reporting If any WebView2 process crashes, one or more minidump files are created and sent to Microsoft for diagnosis. Use this API to customize crash reporting when running diagnostics and doing analysis. -* To prevent crash dumps from being sent to Microsoft, set the `IsCustomCrashReportingEnabled` property to `false`. -* To locate crash dumps and do customization with them, use the `CrashDumpFolderPath` property. +* To prevent crash dumps from being sent to Microsoft, set the `IsCustomCrashReportingEnabled` property to `false`. +* To locate crash dumps and do customization with them, use the `CrashDumpFolderPath` property. See also: * [Custom crash reporting](./data-privacy.md#custom-crash-reporting) in _Data and privacy in WebView2_. @@ -2233,10 +2233,10 @@ Through the WebView2 control, your app can manage navigation to webpages and man #### Manage content loaded into WebView2 These APIs load, stop loading, and reload content to WebView2. The content that's loaded can be: -* Content from a URL. -* A string of HTML. -* Local content via virtual host name to local folder mapping. -* Content from a constructed network request. +* Content from a URL. +* A string of HTML. +* Local content via virtual host name to local folder mapping. +* Content from a constructed network request. See also: * [Using local content in WebView2 apps](./working-with-local-content.md) @@ -2558,10 +2558,10 @@ The `CustomSchemeRegistration` allows registration of custom schemes in WebView2 #### Client certificates In WebView2, you can use the Client Certificate API to select the client certificate at the application level. This API allows you to: -* Display a UI to the user, if desired. -* Replace the default client certificate dialog prompt. -* Programmatically query the certificates. -* Select a certificate from the list to respond to the server, when WebView2 is making a request to an HTTP server that needs a client certificate for HTTP authentication. +* Display a UI to the user, if desired. +* Replace the default client certificate dialog prompt. +* Programmatically query the certificates. +* Select a certificate from the list to respond to the server, when WebView2 is making a request to an HTTP server that needs a client certificate for HTTP authentication. ##### [.NET/C#](#tab/dotnetcsharp) @@ -2664,9 +2664,9 @@ Launch a URI scheme that is registered with the OS. ## iframes iframes allow you to embed other webpages into your own webpage. In WebView2, you can: -* Find out when iframes are created. -* Find out when iframes are navigating. -* Allow bypassing x-frame options. +* Find out when iframes are created. +* Find out when iframes are navigating. +* Allow bypassing x-frame options. See also: * [Host/web object sharing](#hostweb-object-sharing), above diff --git a/microsoft-edge/webview2/concepts/process-model.md b/microsoft-edge/webview2/concepts/process-model.md index b74d835278..c456643bdb 100644 --- a/microsoft-edge/webview2/concepts/process-model.md +++ b/microsoft-edge/webview2/concepts/process-model.md @@ -20,9 +20,9 @@ The WebView2 Runtime uses the same process model as the Microsoft Edge browser. ## Processes in the WebView2 Runtime A _WebView2 process group_ is a collection of WebView2 Runtime processes. A WebView2 process group includes the following: -* A single browser process. -* One or more renderer processes. -* Other helper processes, such as the GPU process and the Audio service process. +* A single browser process. +* One or more renderer processes. +* Other helper processes, such as the GPU process and the Audio service process. ![Process 1](./process-model-images/process-model-1.png) @@ -30,9 +30,9 @@ The number and presence of processes in a WebView2 process group can change as a The number of renderer processes can vary based on the following conditions: -* Use of the _Site Isolation_ feature in the WebView2 Runtime. See [Per-frame renderer processes - Site Isolation](https://developer.chrome.com/blog/inside-browser-part1/#site-isolation). +* Use of the _Site Isolation_ feature in the WebView2 Runtime. See [Per-frame renderer processes - Site Isolation](https://developer.chrome.com/blog/inside-browser-part1/#site-isolation). -* The number of distinct disconnected origins that are rendered in instances of WebView2 that use the same user data folder. +* The number of distinct disconnected origins that are rendered in instances of WebView2 that use the same user data folder. The logic that controls when these extra processes are created depends on the Chromium architecture, and is beyond the scope of the WebView2 Runtime. diff --git a/microsoft-edge/webview2/concepts/process-related-events.md b/microsoft-edge/webview2/concepts/process-related-events.md index 64a025f102..e2fbc455fb 100644 --- a/microsoft-edge/webview2/concepts/process-related-events.md +++ b/microsoft-edge/webview2/concepts/process-related-events.md @@ -46,11 +46,11 @@ To use this article, we recommend first reading [Process model for WebView2 apps When you initialize a WebView2 control, WebView2 will ensure there's a WebView2 Runtime to power your control and connect to its [WebView2 Process Group](process-model.md#processes-in-the-webview2-runtime). Once this connection is established, your control will start monitoring these processes and report the following events so your application can react accordingly: -* **Any process failure.** When _any of the processes_ in the WebView2 Runtime fails, the CoreWebView2 will raise the `ProcessFailed` event. This can be due to a process crash, or an unresponsive renderer process. Use this event for diagnostics and recovery from failures in the WebView2 processes. See [Handle process crashes](#handle-process-crashes) and [A process rendering content in the WebView2 control has exited unexpectedly](#a-process-rendering-content-in-the-webview2-control-has-exited-unexpectedly), below. +* **Any process failure.** When _any of the processes_ in the WebView2 Runtime fails, the CoreWebView2 will raise the `ProcessFailed` event. This can be due to a process crash, or an unresponsive renderer process. Use this event for diagnostics and recovery from failures in the WebView2 processes. See [Handle process crashes](#handle-process-crashes) and [A process rendering content in the WebView2 control has exited unexpectedly](#a-process-rendering-content-in-the-webview2-control-has-exited-unexpectedly), below. -* **Main browser process exits.** If the main browser process exits for _any reason_, the `CoreWebView2Environment` will raise the `BrowserProcessExited` event. Use this event to synchronize operations involving the WebView2 Runtime resources and lifetime, such as _User Data Folder_ management and updates. See [Handle main browser process exited](#handle-main-browser-process-exited), below. +* **Main browser process exits.** If the main browser process exits for _any reason_, the `CoreWebView2Environment` will raise the `BrowserProcessExited` event. Use this event to synchronize operations involving the WebView2 Runtime resources and lifetime, such as _User Data Folder_ management and updates. See [Handle main browser process exited](#handle-main-browser-process-exited), below. -* **Main browser process crashes.** When the main browser process crashes, it will produce both a `ProcessFailed` event and a `BrowserProcessExited` event, since the main browser process _exited_ because of a failure. +* **Main browser process crashes.** When the main browser process crashes, it will produce both a `ProcessFailed` event and a `BrowserProcessExited` event, since the main browser process _exited_ because of a failure. ##### [.NET/C#](#tab/dotnetcsharp) diff --git a/microsoft-edge/webview2/concepts/security.md b/microsoft-edge/webview2/concepts/security.md index 35ecc6f175..e64da9c59b 100644 --- a/microsoft-edge/webview2/concepts/security.md +++ b/microsoft-edge/webview2/concepts/security.md @@ -44,13 +44,13 @@ Use the `PostWebMessageAsJson` method to send messages to the WebView2 control. Restrict web content functionality, if it's not needed. Update the WebView2 properties in `CoreWebView2Settings` to restrict the functionality of the web content, as follows: -* Set `AreHostObjectsAllowed` to `false`, if you don't expect the web content to access host objects. +* Set `AreHostObjectsAllowed` to `false`, if you don't expect the web content to access host objects. -* Set `IsWebMessageEnabled` to `false`, if you don't expect the web content to post web messages to your native application. +* Set `IsWebMessageEnabled` to `false`, if you don't expect the web content to post web messages to your native application. -* Set `IsScriptEnabled` to `false`, if you don't expect the web content to run scripts (for example, when showing static HTML content). +* Set `IsScriptEnabled` to `false`, if you don't expect the web content to run scripts (for example, when showing static HTML content). -* Set `AreDefaultScriptDialogsEnabled` to `false`, if you don't expect the web content to show `alert` or `prompt` dialogs. +* Set `AreDefaultScriptDialogsEnabled` to `false`, if you don't expect the web content to show `alert` or `prompt` dialogs. ##### [.NET/C#](#tab/dotnetcsharp) diff --git a/microsoft-edge/webview2/concepts/user-data-folder.md b/microsoft-edge/webview2/concepts/user-data-folder.md index 131a9b3e7b..b97d4cc29c 100644 --- a/microsoft-edge/webview2/concepts/user-data-folder.md +++ b/microsoft-edge/webview2/concepts/user-data-folder.md @@ -436,9 +436,9 @@ To find out what the user data folder (UDF) location was set to, use the `CoreWe Reasons you might want to read the UDF location: -* If you want to clear browsing data from the UDF folder, such as at the end of a session. +* If you want to clear browsing data from the UDF folder, such as at the end of a session. -* If you want to delete the UDF. +* If you want to delete the UDF. @@ -562,8 +562,8 @@ If the user data folder (UDF) doesn't have Write permissions, the following erro The above is true regardless of whether the location of the user data folder was the default UDF location or a custom UDF location. If there's insufficient memory, or the Microsoft Edge runtime is unable to start, or the WebView2 Runtime is not found, error message strings similar to the following may be returned: -* `Microsoft Edge runtime unable to start` -* `Failed to create WebView2 environment` +* `Microsoft Edge runtime unable to start` +* `Failed to create WebView2 environment` Add code, such as `try/catch` code, to handle these errors. These errors tend to be fatal errors that you can't recover from, so `try/catch` will prevent the app from crashing. You'll then be able to detect the failure and close the app gracefully. Some errors are unrecoverable, such as `Access Denied` when trying to use a user data folder that you don't have Write permissions to. @@ -599,11 +599,11 @@ If your host app is for multiple users, you should probably create one UDF per u If you launch two copies of your host app, they will use the same UDF. -* For Win32 host apps, the UDF is not automatically removed. -* For .NET (WPF & WinForms) host apps, the UDF is not automatically removed. -* For ClickOnce host apps, the UDF is automatically removed. -* For WinUI 2 (UWP) host apps, the UDF is not automatically removed. -* For WinUI 3 host apps, the UDF is not automatically removed. +* For Win32 host apps, the UDF is not automatically removed. +* For .NET (WPF & WinForms) host apps, the UDF is not automatically removed. +* For ClickOnce host apps, the UDF is automatically removed. +* For WinUI 2 (UWP) host apps, the UDF is not automatically removed. +* For WinUI 3 host apps, the UDF is not automatically removed. @@ -631,15 +631,15 @@ In this scenario, create a new user data folder (UDF) for each user, and delete Your host app or the uninstaller can delete the user data folder (UDF). You might need to delete UDFs for any of the following reasons: -* If you want to uninstall a packaged Windows Store app. In this case, Windows deletes UDFs automatically. +* If you want to uninstall a packaged Windows Store app. In this case, Windows deletes UDFs automatically. -* If you want to clean up all browsing data history. However, see the _clear browsing data_ methods first, as an easier, more flexible approach. +* If you want to clean up all browsing data history. However, see the _clear browsing data_ methods first, as an easier, more flexible approach. -* If you want to recover from data corruption. +* If you want to recover from data corruption. -* If you want to remove previous session data. +* If you want to remove previous session data. -* If you want to change the UDF location. If you change the UDF location, the previous UDF will not be automatically cleaned up. +* If you want to change the UDF location. If you change the UDF location, the previous UDF will not be automatically cleaned up. @@ -663,13 +663,13 @@ Files in UDFs might still be in use after the WebView2 app is closed. In this s WebView2 control instances can share the same user data folders (UDFs), to do the following: -* Optimize system resources by running in one browser process. See [Process model for WebView2 apps](../concepts/process-model.md). +* Optimize system resources by running in one browser process. See [Process model for WebView2 apps](../concepts/process-model.md). -* Have WebView2 controls with different profiles, to separate browser data storage such as cookies, permissions, and cached resources under the same UDF. See [Support multiple profiles under a single user data folder](../concepts/multi-profile-support.md). +* Have WebView2 controls with different profiles, to separate browser data storage such as cookies, permissions, and cached resources under the same UDF. See [Support multiple profiles under a single user data folder](../concepts/multi-profile-support.md). Consider the following when sharing UDFs: -* When re-creating WebView2 controls to update browser versions using [add_NewBrowserVersionAvailable](/microsoft-edge/webview2/reference/win32/icorewebview2environment#add_newbrowserversionavailable) (Win32) event handlers or [NewBrowserVersionAvailable](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.newbrowserversionavailable) (.NET) events, your host app must ensure that browser processes exit and close any WebView2 controls that share the same UDF. To retrieve the process ID of the browser process, use the `BrowserProcessId` property of the WebView2 control. +* When re-creating WebView2 controls to update browser versions using [add_NewBrowserVersionAvailable](/microsoft-edge/webview2/reference/win32/icorewebview2environment#add_newbrowserversionavailable) (Win32) event handlers or [NewBrowserVersionAvailable](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.newbrowserversionavailable) (.NET) events, your host app must ensure that browser processes exit and close any WebView2 controls that share the same UDF. To retrieve the process ID of the browser process, use the `BrowserProcessId` property of the WebView2 control. diff --git a/microsoft-edge/webview2/concepts/versioning.md b/microsoft-edge/webview2/concepts/versioning.md index 9c6493312d..3f74077ba0 100644 --- a/microsoft-edge/webview2/concepts/versioning.md +++ b/microsoft-edge/webview2/concepts/versioning.md @@ -13,12 +13,12 @@ ms.date: 04/25/2023 The WebView2 SDK is provided as a Prerelease or Release version of the **Microsoft.Web.WebView2** NuGet package. Either use a Prerelease SDK with a preview channel of Microsoft Edge, or use a Release SDK with the WebView2 Runtime. _Prerelease_ SDK packages are for use during development if you want to test the latest WebView2 APIs, including the Experimental APIs, before support for those APIs is added to the Runtime. The Canary channel is recommended, because it has the implementations of the latest APIs. When you want to test and use Experimental WebView2 APIs, use the following combination: -* A _Prerelease_ version of the WebView2 SDK. -* A _preview channel_ of Microsoft Edge on your development client. +* A _Prerelease_ version of the WebView2 SDK. +* A _preview channel_ of Microsoft Edge on your development client. _Release_ SDK packages only contain Stable APIs, not Experimental APIs. When you're working on a production release of your WebView2 app, use the following combination: -* A _Release_ version of the WebView2 SDK. -* The WebView2 _Runtime_ on your development client. +* A _Release_ version of the WebView2 SDK. +* The WebView2 _Runtime_ on your development client. More details about the Prerelease and Release SDK packages are provided below. @@ -57,9 +57,9 @@ When developing an Evergreen WebView2 app, regularly test the app against the la When you use a WebView2 _Prerelease_ SDK package, use a Microsoft Edge preview channel on your development client. Preview channels are also called _Insiders_ channels. The Canary preview channel is recommended rather than Beta or Dev, because Canary is most recent and has implementations of the latest Experimental APIs. The Prerelease SDK package is a superset of the Release SDK package. A Prerelease SDK contains method signatures for: -* [Experimental APIs](#experimental-apis). -* Stable APIs that are no longer Experimental, but haven't been included in a Release SDK yet. -* Stable APIs that have been added to Release SDKs. +* [Experimental APIs](#experimental-apis). +* Stable APIs that are no longer Experimental, but haven't been included in a Release SDK yet. +* Stable APIs that have been added to Release SDKs. Preview channels of Microsoft Edge provide the implementations of Experimental WebView2 APIs and of Stable APIs. The Experimental APIs are subject to change based on feedback. Avoid using a Prerelease SDK package to build production apps. @@ -107,9 +107,9 @@ The WebView2 _release_ SDK has been forward-compatible ever since version 1 ([Re The WebView2 APIs in a Release SDK package are stable and forward-compatible. A WebView2 API works when using a WebView2 Runtime that has an equal or higher build number as the SDK build number in which the API was introduced. The build number is the third part of the four-part version number for the Webview2 SDK, and of the four-part version number for Microsoft Edge and the WebView2 Runtime. -* When you use a WebView2 SDK that has a build number _equal to or less than_ the WebView2 Runtime, every API that you have access to in that SDK works with that version of the Runtime. +* When you use a WebView2 SDK that has a build number _equal to or less than_ the WebView2 Runtime, every API that you have access to in that SDK works with that version of the Runtime. -* When you use a WebView2 SDK that has a build number _greater than_ the WebView2 Runtime, the newer APIs' implementations aren't available in the Runtime. +* When you use a WebView2 SDK that has a build number _greater than_ the WebView2 Runtime, the newer APIs' implementations aren't available in the Runtime. For example, if an API is introduced in SDK 1.0.**900**.0, that API would work with Runtime 94.0.**900+**.0, but not with Runtime 90.0.**700**.0. @@ -135,9 +135,9 @@ For full support of Experimental APIs, use a Microsoft Edge preview channel, not Use a Prerelease SDK to try out new, Experimental APIs early and provide feedback before the Experimental APIs are promoted to become Stable, forward-compatible APIs. -* The Experimental APIs (in a Prerelease SDK) aren't guaranteed to be forward-compatible. -* The Stable APIs that are in a Prerelease SDK are forward-compatible, even if they aren't included in a Release SDK yet. -* The Stable APIs that are in a Release SDK are forward-compatible. +* The Experimental APIs (in a Prerelease SDK) aren't guaranteed to be forward-compatible. +* The Stable APIs that are in a Prerelease SDK are forward-compatible, even if they aren't included in a Release SDK yet. +* The Stable APIs that are in a Release SDK are forward-compatible. For more information, see [Forward compatibility of APIs](#forward-compatibility-of-apis), above. @@ -154,13 +154,13 @@ See also: Once an API has been moved from Experimental to Stable status, you need to move your app's code to the Stable API. Using Experimental APIs or a Prerelease SDK is not recommended for production apps. Follow these practices when moving your app from using Experimental APIs to using Stable APIs: -* In your project in Visual Studio, update your WebView2 SDK package version to a newer Prerelease SDK or Release SDK. See [Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_. +* In your project in Visual Studio, update your WebView2 SDK package version to a newer Prerelease SDK or Release SDK. See [Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_. -* Update your app's code to use Stable APIs instead of Experimental APIs (for COM). The Stable API will be supported with bug fixes, but the Experimental API will be deprecated, and not available in the newer (Prerelease or Release) SDK. After an API is promoted to Stable, the Experimental version of that API is supported for two releases of the Prerelease SDK, in a deprecated state. In subsequent versions of the Prerelease SDK, Experimental APIs might be modified, removed, or added. +* Update your app's code to use Stable APIs instead of Experimental APIs (for COM). The Stable API will be supported with bug fixes, but the Experimental API will be deprecated, and not available in the newer (Prerelease or Release) SDK. After an API is promoted to Stable, the Experimental version of that API is supported for two releases of the Prerelease SDK, in a deprecated state. In subsequent versions of the Prerelease SDK, Experimental APIs might be modified, removed, or added. -* Always use feature detection, to ensure that the Stable API is implemented in the user's version of the WebView2 Runtime. See [Feature-detecting to test whether the installed Runtime supports recently added APIs](#feature-detecting-to-test-whether-the-installed-runtime-supports-recently-added-apis), below. +* Always use feature detection, to ensure that the Stable API is implemented in the user's version of the WebView2 Runtime. See [Feature-detecting to test whether the installed Runtime supports recently added APIs](#feature-detecting-to-test-whether-the-installed-runtime-supports-recently-added-apis), below. -* Note for .NET only: In a Prerelease WebView2 SDK, the .NET Stable APIs will fallback to the corresponding Experimental APIs, if the user's WebView2 Runtime has only the Experimental API implementation and doesn't have the Stable API implementation. +* Note for .NET only: In a Prerelease WebView2 SDK, the .NET Stable APIs will fallback to the corresponding Experimental APIs, if the user's WebView2 Runtime has only the Experimental API implementation and doesn't have the Stable API implementation. diff --git a/microsoft-edge/webview2/concepts/win32-api-conventions.md b/microsoft-edge/webview2/concepts/win32-api-conventions.md index f436b3e7b7..0119f2c5d6 100644 --- a/microsoft-edge/webview2/concepts/win32-api-conventions.md +++ b/microsoft-edge/webview2/concepts/win32-api-conventions.md @@ -16,7 +16,7 @@ Supported platforms: Win32. ## Prerequisites -* Experience using the Win32 API. +* Experience using the Win32 API. @@ -24,9 +24,9 @@ Supported platforms: Win32. Asynchronous methods in the WebView2 Win32 C++ API use a delegate interface to contact you for any of the following reasons: -* The async method has completed. -* The success or failure code. -* The result of the asynchronous method. +* The async method has completed. +* The success or failure code. +* The result of the asynchronous method. The final parameter for all asynchronous methods is a pointer to a delegate interface, of which you provide an implementation. @@ -89,14 +89,14 @@ For instance, the `NavigationCompleted` event on `ICoreWebView2` has the `ICoreW When the `NavigationCompleted` event runs, your `Invoke` method is requested: -* The first parameter runs the `NavigationCompleted` event. -* The second parameter contains information about whether the navigation completed successfully, and so on. +* The first parameter runs the `NavigationCompleted` event. +* The second parameter contains information about whether the navigation completed successfully, and so on. Similar to the async method completed handler delegate interface, use one of the following actions to set it up: -* Implement it directly. +* Implement it directly. -* Use the [Callback function (WRL)](/cpp/cppcx/wrl/callback-function-wrl) function that is used in the following WebView2 code: +* Use the [Callback function (WRL)](/cpp/cppcx/wrl/callback-function-wrl) function that is used in the following WebView2 code: diff --git a/microsoft-edge/webview2/concepts/working-with-local-content.md b/microsoft-edge/webview2/concepts/working-with-local-content.md index 6ce94871ae..c8dc5b7dab 100644 --- a/microsoft-edge/webview2/concepts/working-with-local-content.md +++ b/microsoft-edge/webview2/concepts/working-with-local-content.md @@ -41,13 +41,13 @@ These scenarios are described in more detail below. WebView2 allows navigations to file URLs, to load basic HTML or a PDF. This is the simplest and most efficient approach to loading local content. However, it is less flexible than the other approaches. Like in a web browser, file URLs are limited in some capabilities: -* The document has an origin that is unique to its file path. This means that web APIs that require an origin such as `localStorage` or `indexedDB` will work, but the stored data will not be available to other local documents loaded from other file paths. +* The document has an origin that is unique to its file path. This means that web APIs that require an origin such as `localStorage` or `indexedDB` will work, but the stored data will not be available to other local documents loaded from other file paths. -* Some web APIs are limited to secure HTTPS URLs only and are not available to documents loaded by file URLs. This includes APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications. +* Some web APIs are limited to secure HTTPS URLs only and are not available to documents loaded by file URLs. This includes APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications. -* For each resource, the full path must be specified. +* For each resource, the full path must be specified. -* To allow references to other local files from file URIs, or to display XML files with XSL transformations applied, you can set the `--allow-file-access-from-files` browser argument. See [CoreWebView2EnvironmentOptions.AdditionalBrowserArguments Property](/dotnet/api/microsoft.web.webview2.core.corewebview2environmentoptions.additionalbrowserarguments). +* To allow references to other local files from file URIs, or to display XML files with XSL transformations applied, you can set the `--allow-file-access-from-files` browser argument. See [CoreWebView2EnvironmentOptions.AdditionalBrowserArguments Property](/dotnet/api/microsoft.web.webview2.core.corewebview2environmentoptions.additionalbrowserarguments). diff --git a/microsoft-edge/webview2/get-started/win32.md b/microsoft-edge/webview2/get-started/win32.md index efabbec1ef..e9689917b4 100644 --- a/microsoft-edge/webview2/get-started/win32.md +++ b/microsoft-edge/webview2/get-started/win32.md @@ -32,9 +32,9 @@ This tutorial starts with the completed project that's in the repo, which alread The completed tutorial project is available in the **WebView2Samples** repo: -* Sample name: **Win32_GettingStarted** -* Repo directory: [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) -* Solution file: **WebView2GettingStarted.sln** +* Sample name: **Win32_GettingStarted** +* Repo directory: [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) +* Solution file: **WebView2GettingStarted.sln** @@ -288,10 +288,10 @@ If you want to follow the steps below to add the WebView2 code to `HelloWebView. ## Step 10 - Include the WebView2.h header in HelloWebView.cpp Above, we did the following: -* Cloned or downloaded the samples repo including an existing project that contains a standard C++ Windows desktop application. -* Updated or installed the Windows Implementation Library (WIL). -* Updated or installed the WebView2 SDK, to add WebView2 features. -* Optionally deleted the WebView2 code from `HelloWebView.cpp`. +* Cloned or downloaded the samples repo including an existing project that contains a standard C++ Windows desktop application. +* Updated or installed the Windows Implementation Library (WIL). +* Updated or installed the WebView2 SDK, to add WebView2 features. +* Optionally deleted the WebView2 code from `HelloWebView.cpp`. --- @@ -317,11 +317,11 @@ Next, add WebView2 features to the app, as follows: 1. Note the headers used: - * `wrl.h` - Windows Runtime C++ Template Library (WRL) - A template library that provides a low-level way to author and use Windows Runtime components. + * `wrl.h` - Windows Runtime C++ Template Library (WRL) - A template library that provides a low-level way to author and use Windows Runtime components. * `wil/com.h` - Windows Implementation Libraries (WIL) - A header-only C++ library to make life easier for developers on Windows through readable, type-safe C++ interfaces for common Windows coding patterns. - * `WebView2.h` - The WebView2 control is powered by Microsoft Edge, and enables you to embed web technologies (HTML, CSS, and JavaScript) in your native applications. + * `WebView2.h` - The WebView2 control is powered by Microsoft Edge, and enables you to embed web technologies (HTML, CSS, and JavaScript) in your native applications. 1. Select **File** > **Save All** (**Ctrl+Shift+S**) to save the project. @@ -354,20 +354,20 @@ Next, add a WebView2 control to the main window. You'll use the `CreateCoreWebView2Environment` method to set up the environment and locate the Microsoft Edge browser powering the control. Note that if you want to override the following defaults, you can instead use the "with options" version of that method, `CreateCoreWebView2EnvironmentWithOptions`: -* Browser location -* User data folder -* Browser flags +* Browser location +* User data folder +* Browser flags Upon completion of the `CreateCoreWebView2Environment` method, you'll: -* Run the `ICoreWebView2Environment::CreateCoreWebView2Controller` method inside the `ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler` callback. +* Run the `ICoreWebView2Environment::CreateCoreWebView2Controller` method inside the `ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler` callback. -* Run the `ICoreWebView2Controller::get_CoreWebView2` method to get the associated WebView2 control. +* Run the `ICoreWebView2Controller::get_CoreWebView2` method to get the associated WebView2 control. Now to do the above, in the callback, you'll: -* Set a few more settings. -* Resize the WebView2 control to fill 100% of the parent window. -* Then display the Bing.com website in the WebView2 control in your Win32 app. +* Set a few more settings. +* Resize the WebView2 control to fill 100% of the parent window. +* Then display the Bing.com website in the WebView2 control in your Win32 app. --- @@ -468,9 +468,9 @@ In the previous step, we discussed navigating to URL by using the `ICoreWebView2 In error cases, one or more of the following events may occur, depending on whether the navigation continued to an error webpage: -* `SourceChanged` -* `ContentLoading` -* `HistoryChanged` +* `SourceChanged` +* `ContentLoading` +* `HistoryChanged` If an HTTP redirect occurs, there are multiple `NavigationStarting` events in a row. @@ -496,8 +496,8 @@ Use host apps to inject JavaScript code into WebView2 controls at runtime. You The injected JavaScript is run with specific timing: -* Run it after the creation of the global object. -* Run it before any other script included in the HTML document is run. +* Run it after the creation of the global object. +* Run it before any other script included in the HTML document is run. --- diff --git a/microsoft-edge/webview2/get-started/winforms.md b/microsoft-edge/webview2/get-started/winforms.md index 3a7bb4ad55..9601bcb2a0 100644 --- a/microsoft-edge/webview2/get-started/winforms.md +++ b/microsoft-edge/webview2/get-started/winforms.md @@ -14,14 +14,14 @@ This article is to learn to write your own WebView2 code. If you want to run a This tutorial helps you: -* Set up your development tools. -* Use the **C# Windows Forms App (.NET Framework)** Visual Studio project template to create a WinForms project. -* Install the **Microsoft.Web.WebView2** SDK package for the WinForms project. -* Learn about WebView2 concepts along the way. +* Set up your development tools. +* Use the **C# Windows Forms App (.NET Framework)** Visual Studio project template to create a WinForms project. +* Install the **Microsoft.Web.WebView2** SDK package for the WinForms project. +* Learn about WebView2 concepts along the way. @@ -29,12 +29,12 @@ This tutorial helps you: Do either of the following: -* Create a new project in Visual Studio starting from a project template, using the steps in the sections below. This will give you the latest code and project structure. +* Create a new project in Visual Studio starting from a project template, using the steps in the sections below. This will give you the latest code and project structure. -* Clone or download the `WebView2Samples` repo, open the completed project in Visual Studio, and follow the steps in this article to understand creating the WinForms project and understand the added WebView2 code. See [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. A completed version of this tutorial project is available in the WebView2Samples repo directory [WinForms_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinForms_GettingStarted). - * Sample name: **Win32_GettingStarted** - * Repo directory: [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) - * Solution file: **WebView2GettingStarted.sln** +* Clone or download the `WebView2Samples` repo, open the completed project in Visual Studio, and follow the steps in this article to understand creating the WinForms project and understand the added WebView2 code. See [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. A completed version of this tutorial project is available in the WebView2Samples repo directory [WinForms_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinForms_GettingStarted). + * Sample name: **Win32_GettingStarted** + * Repo directory: [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) + * Solution file: **WebView2GettingStarted.sln** The sample in the repo might not be as up-to-date as a project that you create by using the latest Visual Studio project templates. @@ -364,11 +364,11 @@ maintenance link (keep) During webpage navigation, the WebView2 control raises events. The app that hosts WebView2 controls listens for the following events: -* `NavigationStarting` -* `SourceChanged` -* `ContentLoading` -* `HistoryChanged` -* `NavigationCompleted` +* `NavigationStarting` +* `SourceChanged` +* `ContentLoading` +* `HistoryChanged` +* `NavigationCompleted` For more information, see [Navigation events for WebView2 apps](../concepts/navigation-events.md). @@ -376,9 +376,9 @@ For more information, see [Navigation events for WebView2 apps](../concepts/navi When an error occurs, the following events are raised and may depend on navigation to an error webpage: -* `SourceChanged` -* `ContentLoading` -* `HistoryChanged` +* `SourceChanged` +* `ContentLoading` +* `HistoryChanged` > [!NOTE] > If an HTTP redirect occurs, there are multiple `NavigationStarting` events in a row. @@ -431,9 +431,9 @@ To demonstrate how to use the events, start by registering a handler for `Naviga You can use host apps to inject JavaScript code into WebView2 controls at runtime. You can task WebView2 to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed. The injected JavaScript runs with specific timing. -* Run the injected JavaScript after the creation of the global object. +* Run the injected JavaScript after the creation of the global object. -* Run the injected JavaScript before any other script included in the HTML document is run. +* Run the injected JavaScript before any other script included in the HTML document is run. For example, add a script that sends an alert when a user navigates to a non-HTTPS site, as follows: @@ -473,9 +473,9 @@ For example, add a script that sends an alert when a user navigates to a non-HTT The host and web content can use `postMessage` to communicate with each other as follows: -* Web content in a WebView2 control can use `window.chrome.webview.postMessage` to post a message to the host. The host handles the message using any registered `WebMessageReceived` on the host. +* Web content in a WebView2 control can use `window.chrome.webview.postMessage` to post a message to the host. The host handles the message using any registered `WebMessageReceived` on the host. -* Hosts post messages to web content in a WebView2 control using `CoreWebView2.PostWebMessageAsString` or `CoreWebView2.PostWebMessageAsJSON`. These messages are caught by handlers added to `window.chrome.webview.addEventListener`. +* Hosts post messages to web content in a WebView2 control using `CoreWebView2.PostWebMessageAsString` or `CoreWebView2.PostWebMessageAsJSON`. These messages are caught by handlers added to `window.chrome.webview.addEventListener`. The communication mechanism passes messages from web content to the host using native capabilities. @@ -521,9 +521,9 @@ In your project, when the WebView2 control navigates to a URL, it displays the U Next, for WebView2 to send and respond to the web message, after `CoreWebView2` is initialized, the host will inject a script in the web content to: - * Send the URL to the host using `postMessage`. + * Send the URL to the host using `postMessage`. - * Register an event handler to display a message sent from the host, in an alert box, before displaying webpage content. + * Register an event handler to display a message sent from the host, in an alert box, before displaying webpage content. 1. In `Form1.cs`, update `InitializeAsync` to match the following code: diff --git a/microsoft-edge/webview2/get-started/winui.md b/microsoft-edge/webview2/get-started/winui.md index 432cdbe511..cd92d2afec 100644 --- a/microsoft-edge/webview2/get-started/winui.md +++ b/microsoft-edge/webview2/get-started/winui.md @@ -37,9 +37,9 @@ In this tutorial, you do the following: A completed version of this tutorial project is available in the **WebView2Samples** repo: -* Sample name: **WinUI3GetStarted** -* Repo directory: [WinUI3_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted) -* Solution file: **WinUI3GetStarted.sln** +* Sample name: **WinUI3GetStarted** +* Repo directory: [WinUI3_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted) +* Solution file: **WinUI3GetStarted.sln** @@ -469,9 +469,9 @@ To handle navigation events: You can use the host app to inject JavaScript code into the WebView2 control at runtime. You can task WebView2 to run arbitrary JavaScript, or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames, until the JavaScript is removed. The injected JavaScript is run with specific timing, to either: -* Run the injected JavaScript after the creation of the global object. +* Run the injected JavaScript after the creation of the global object. -* Run the injected JavaScript before running any other script that's included in the HTML document. +* Run the injected JavaScript before running any other script that's included in the HTML document. Below, you add JavaScript that displays an alert when a user tries to open a non-HTTPS site. To do this, you inject a script into the web content that uses [ExecuteScriptAsync](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.webview2.executescriptasync). diff --git a/microsoft-edge/webview2/get-started/winui2.md b/microsoft-edge/webview2/get-started/winui2.md index 8ad5184c55..86a69f4ea2 100644 --- a/microsoft-edge/webview2/get-started/winui2.md +++ b/microsoft-edge/webview2/get-started/winui2.md @@ -13,18 +13,18 @@ ms.date: 10/31/2023 This article is to learn to write your own WebView2 code. If you want to run a sample first, see [Win32 sample app](../samples/webview2apissample.md) or another sample app article, such as [WinUI 2 (UWP) sample app](../samples/webview2_sample_uwp.md). In this tutorial, you: -* Set up your development tools for creating UWP apps that use WebView2 to display web content. -* Create an initial WinUI 2 (UWP) app. -* Install the **Microsoft.UI.Xaml** package (WinUI 2) for the project. -* Add a WebView2 control that displays webpage content. -* Learn about WebView2 concepts along the way. +* Set up your development tools for creating UWP apps that use WebView2 to display web content. +* Create an initial WinUI 2 (UWP) app. +* Install the **Microsoft.UI.Xaml** package (WinUI 2) for the project. +* Add a WebView2 control that displays webpage content. +* Learn about WebView2 concepts along the way. You use the **C# Blank App (Universal Windows)** project template, then install the **Microsoft.UI.Xaml** package (WinUI 2) for this project. Installing that package installs the **Microsoft.Web.WebView2** package (the WebView2 SDK) as a dependency. The **Microsoft.UI.Xaml** (WinUI 2) package is part of the Windows UI Library. This package provides Windows UI features, including: -* UWP XAML controls. -* Dense control styles. -* Fluent styles and materials. +* UWP XAML controls. +* Dense control styles. +* Fluent styles and materials. @@ -44,9 +44,9 @@ See also: A completed version of this Getting Started project (solution) is in the WebView2Samples repo. You can use the completed solution (from the repo or from doing the below steps) as a baseline to add more WebView2 code and other features. A completed version of this tutorial project is available in the **WebView2Samples** repo: -* Sample name: **WinUI2_Sample** -* Repo directory: [WinUI2_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI2_GettingStarted) -* Solution file: **MyUWPGetStartApp.sln** +* Sample name: **WinUI2_Sample** +* Repo directory: [WinUI2_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI2_GettingStarted) +* Solution file: **MyUWPGetStartApp.sln** Follow the major Step sections in sequence, below. @@ -166,7 +166,7 @@ This article shows steps and screenshots for Visual Studio 2022 Community Editio 1. Accept the defaults, and click the **OK** button. 1. If the **Developer Mode** window section appears, in that section, click **On**. If you haven't already set your machine to Developer Mode, the **Use developer features** dialog opens, to confirm turning on developer mode. - * Click **Yes** to turn on Developer Mode for your machine, and then close the **Settings** window. + * Click **Yes** to turn on Developer Mode for your machine, and then close the **Settings** window. Visual Studio displays the newly created solution and project: diff --git a/microsoft-edge/webview2/get-started/wpf.md b/microsoft-edge/webview2/get-started/wpf.md index ac0d7d1964..45ff8b5799 100644 --- a/microsoft-edge/webview2/get-started/wpf.md +++ b/microsoft-edge/webview2/get-started/wpf.md @@ -21,9 +21,9 @@ In this tutorial, you use the **WPF Application** or **WPF App (.NET Framework)* #### Completed project A completed version of this tutorial project is available in the **WebView2Samples** repo: -* Sample name: **WPF_GettingStarted** -* Repo directory: [WPF_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WPF_GettingStarted#readme) -* Solution file: **WPFSample.sln** +* Sample name: **WPF_GettingStarted** +* Repo directory: [WPF_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WPF_GettingStarted#readme) +* Solution file: **WPFSample.sln** @@ -371,11 +371,11 @@ maintenance link (keep) During webpage navigation, the WebView2 control raises events. The app that hosts WebView2 controls listens for the following events: -* `NavigationStarting` -* `SourceChanged` -* `ContentLoading` -* `HistoryChanged` -* `NavigationCompleted` +* `NavigationStarting` +* `SourceChanged` +* `ContentLoading` +* `HistoryChanged` +* `NavigationCompleted` ![Navigation events, from new document, to navigation starting, through navigation completed](./wpf-images/navigation-events.png) @@ -455,8 +455,8 @@ You can use host apps to inject JavaScript code into WebView2 controls at runtim The injected JavaScript is run with specific timing: -* Run it after the creation of the global object. -* Run it before any other script included in the HTML document is run. +* Run it after the creation of the global object. +* Run it before any other script included in the HTML document is run. For example, add scripts that send an alert when a user navigates to non-HTTPS sites, as follows: @@ -488,9 +488,9 @@ For example, add scripts that send an alert when a user navigates to non-HTTPS s The host and web content can communicate in the following ways using `postMessage`: -* Web content in a WebView2 control can post a message to the host using `window.chrome.webview.postMessage`. The host handles the message using any registered `WebMessageReceived` on the host. +* Web content in a WebView2 control can post a message to the host using `window.chrome.webview.postMessage`. The host handles the message using any registered `WebMessageReceived` on the host. -* Hosts post messages to web content in a WebView2 control using `CoreWebView2.PostWebMessageAsString` or `CoreWebView2.PostWebMessageAsJSON`. The messages are caught by handlers added to `window.chrome.webview.addEventListener`. +* Hosts post messages to web content in a WebView2 control using `CoreWebView2.PostWebMessageAsString` or `CoreWebView2.PostWebMessageAsJSON`. The messages are caught by handlers added to `window.chrome.webview.addEventListener`. The communication mechanism passes messages from web content to the host using native capabilities. diff --git a/microsoft-edge/webview2/how-to/chromium-devtools-protocol.md b/microsoft-edge/webview2/how-to/chromium-devtools-protocol.md index 781e735449..01f6ab15a0 100644 --- a/microsoft-edge/webview2/how-to/chromium-devtools-protocol.md +++ b/microsoft-edge/webview2/how-to/chromium-devtools-protocol.md @@ -14,13 +14,13 @@ The [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protoco To use the Chrome DevTools Protocol API in a WebView2 app, do either of the following: -* Install and use the [Microsoft.Web.WebView2.DevToolsProtocolExtension](https://www.nuget.org/packages/Microsoft.Web.WebView2.DevToolsProtocolExtension) NuGet package (.NET). +* Install and use the [Microsoft.Web.WebView2.DevToolsProtocolExtension](https://www.nuget.org/packages/Microsoft.Web.WebView2.DevToolsProtocolExtension) NuGet package (.NET). -* Or, run one of the following methods: +* Or, run one of the following methods: - * .NET: [CallDevToolsProtocolAsync](/dotnet/api/microsoft.web.webview2.core.corewebview2.calldevtoolsprotocolmethodasync#Microsoft_Web_WebView2_Core_CoreWebView2_CallDevToolsProtocolMethodAsync_System_String_System_String_), [GetDevToolsProtocolEventReceiver](/dotnet/api/microsoft.web.webview2.core.corewebview2.getdevtoolsprotocoleventreceiver) + * .NET: [CallDevToolsProtocolAsync](/dotnet/api/microsoft.web.webview2.core.corewebview2.calldevtoolsprotocolmethodasync#Microsoft_Web_WebView2_Core_CoreWebView2_CallDevToolsProtocolMethodAsync_System_String_System_String_), [GetDevToolsProtocolEventReceiver](/dotnet/api/microsoft.web.webview2.core.corewebview2.getdevtoolsprotocoleventreceiver) - * Win32 C/C++: [CallDevToolsProtocolMethod](/microsoft-edge/webview2/reference/win32/icorewebview2#calldevtoolsprotocolmethod), [ICoreWebView2DevToolsProtocolEventReceiver](/microsoft-edge/webview2/reference/win32/icorewebview2devtoolsprotocoleventreceiver) + * Win32 C/C++: [CallDevToolsProtocolMethod](/microsoft-edge/webview2/reference/win32/icorewebview2#calldevtoolsprotocolmethod), [ICoreWebView2DevToolsProtocolEventReceiver](/microsoft-edge/webview2/reference/win32/icorewebview2devtoolsprotocoleventreceiver) diff --git a/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md b/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md index d765c837bc..729aaf65ca 100644 --- a/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md +++ b/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md @@ -13,9 +13,9 @@ ms.date: 2/24/2022 The Microsoft Edge WebView2 control lets you embed web content into native applications. You can use WebView2 in different ways, depending on what you need to accomplish. This article describes how to communicate using simple messages, JavaScript code, and native objects. Some common use cases include: -* 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. -* Run a dedicated JavaScript file on the web side of an application. +* 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. +* Run a dedicated JavaScript file on the web side of an application. diff --git a/microsoft-edge/webview2/how-to/context-menus.md b/microsoft-edge/webview2/how-to/context-menus.md index cbedb48ac0..a790065460 100644 --- a/microsoft-edge/webview2/how-to/context-menus.md +++ b/microsoft-edge/webview2/how-to/context-menus.md @@ -12,19 +12,19 @@ ms.date: 04/27/2022 The WebView2 control provides a default context menu, and you can create your own context menu when using a WebView2 control. Use the **ContextMenuRequested** API to customize the context-menus (right-click menus) of a WebView2 app. For example, you can do any of the following: -* Add a custom context menu. +* Add a custom context menu. Instead of using the default context menu, your host app can draw its own context menu by using the information that's sent from the WebView2 context menu. Your app handles the `ContextMenuRequested` event. You can use the data provided in the Event arguments of `ContextMenuRequested` to display a custom context menu with entries of your choice. For this case, you handle the event and request a deferral. You can add default menu items and/or custom menu items to a custom context menu. -* Add default menu items to a custom context menu. +* Add default menu items to a custom context menu. -* Add custom menu items to a default context menu. +* Add custom menu items to a default context menu. -* Remove default or custom menu items from the default context menu. +* Remove default or custom menu items from the default context menu. -* Disable context menus. +* Disable context menus. **Terminology:** @@ -368,9 +368,9 @@ void ContextMenu::AddMenuItems( You can: -* Add default menu items to a custom context menu, as shown above in "Adding a custom context menu". +* Add default menu items to a custom context menu, as shown above in "Adding a custom context menu". -* Add custom menu items to a default context menu, as shown below in "Adding custom menu items to a default context menu". +* Add custom menu items to a default context menu, as shown below in "Adding custom menu items to a default context menu". @@ -634,9 +634,9 @@ This section explains how to detect when the user requests opening a context men When a user requests opening a context menu (such as by right-clicking), your app needs to listen for the `ContextMenuRequested` event. When your app detects this event, your app should do some combination of the following: -* Add custom menu items to the default context menu. -* Remove custom menu items from the default context menu. -* Open a custom context menu. +* Add custom menu items to the default context menu. +* Remove custom menu items from the default context menu. +* Open a custom context menu. The `ContextMenuRequested` event indicates that the user requested opening a context menu. @@ -646,16 +646,16 @@ The WebView2 control only raises the `ContextMenuRequested` event if the current The [CoreWebView2ContextMenuRequestedEventArgs](/dotnet/api/microsoft.web.webview2.core.corewebview2contextmenurequestedeventargs) contains the following information: -* An ordered list of `ContextMenuItem` objects to populate the custom context menu. The ordered list includes the following: - * The internal name of the menu item. - * The UI label of the menu item, displayed to the user in the UI. - * The kind of menu item. - * A keyboard shortcut Description, if any, such as **Alt+C**. - * Any other properties of the custom menu item. +* An ordered list of `ContextMenuItem` objects to populate the custom context menu. The ordered list includes the following: + * The internal name of the menu item. + * The UI label of the menu item, displayed to the user in the UI. + * The kind of menu item. + * A keyboard shortcut Description, if any, such as **Alt+C**. + * Any other properties of the custom menu item. -* The coordinates where the context menu was requested, so your app can detect which UI item the user right-clicked. The coordinates are defined in relation to the upper left corner of the WebView2 control. +* The coordinates where the context menu was requested, so your app can detect which UI item the user right-clicked. The coordinates are defined in relation to the upper left corner of the WebView2 control. -* A selection object that will include the kind of context selected and the appropriate context menu parameter data. +* A selection object that will include the kind of context selected and the appropriate context menu parameter data. When the user selects a custom menu item on a context menu, the WebView2 control fires a `CustomItemSelected` event. @@ -695,9 +695,9 @@ The WebView2 control raises this event to indicate that the user selected a cust If the user selects a custom menu item, the `CustomMenuItemSelected` event is raised on the context menu item object that was selected, in these cases: -* The app adds custom menu items, but defers the context menu UI to the WebView2 platform. +* The app adds custom menu items, but defers the context menu UI to the WebView2 platform. -* The app adds custom menu items, shows custom UI, and sets the `SelectedCommandId` property to the ID of the custom menu item. +* The app adds custom menu items, shows custom UI, and sets the `SelectedCommandId` property to the ID of the custom menu item. diff --git a/microsoft-edge/webview2/how-to/customize-ui.md b/microsoft-edge/webview2/how-to/customize-ui.md index 7209fb9c5f..65d7708bc8 100644 --- a/microsoft-edge/webview2/how-to/customize-ui.md +++ b/microsoft-edge/webview2/how-to/customize-ui.md @@ -18,8 +18,8 @@ ms.date: 02/08/2022 Use the **ContextMenuRequested** API to customize the context-menus (right-click menus) of your WebView2 app. Using this API, you can: -* Add and remove items from the default WebView2 context menus. +* Add and remove items from the default WebView2 context menus. -* Create your own context menu by using data that's passed from the WebView2 control to your app. +* Create your own context menu by using data that's passed from the WebView2 control to your app. See [Customize context menus in WebView2](context-menus.md). diff --git a/microsoft-edge/webview2/how-to/debug-devtools.md b/microsoft-edge/webview2/how-to/debug-devtools.md index 47e12a8d97..ecf4162c17 100644 --- a/microsoft-edge/webview2/how-to/debug-devtools.md +++ b/microsoft-edge/webview2/how-to/debug-devtools.md @@ -16,9 +16,9 @@ Use Microsoft Edge Developer Tools to debug web content displayed in WebView2 co When you're using a WebView2 app, there are several ways to open DevTools: -* Press **F12**. -* Press **Ctrl+Shift+I**. -* Right-click the page and then select `Inspect`. +* Press **F12**. +* Press **Ctrl+Shift+I**. +* Right-click the page and then select `Inspect`. An app can also use the `OpenDevToolsWindow` API to programmatically open a DevTools window. For example, you can use this approach if the above hotkeys and the context menu items have been removed. diff --git a/microsoft-edge/webview2/how-to/javascript.md b/microsoft-edge/webview2/how-to/javascript.md index d29659f9d4..3d2a30fe64 100644 --- a/microsoft-edge/webview2/how-to/javascript.md +++ b/microsoft-edge/webview2/how-to/javascript.md @@ -58,9 +58,9 @@ When executing script via `ExecuteScriptAsync` that script is run in the global For example: -* If you run the script `const example = 10;` more than once, the subsequent times you run the script will throw an exception, because `example` was defined the first time you ran it. +* If you run the script `const example = 10;` more than once, the subsequent times you run the script will throw an exception, because `example` was defined the first time you ran it. -* If you instead run the script `(() => { const example = 10; })();` the `example` variable is defined in the context of that anonymous function. That way, it's not polluting the global context, and can be run more than once. +* If you instead run the script `(() => { const example = 10; })();` the `example` variable is defined in the context of that anonymous function. That way, it's not polluting the global context, and can be run more than once. diff --git a/microsoft-edge/webview2/how-to/machine-setup.md b/microsoft-edge/webview2/how-to/machine-setup.md index c61f8ce690..39fd79854c 100644 --- a/microsoft-edge/webview2/how-to/machine-setup.md +++ b/microsoft-edge/webview2/how-to/machine-setup.md @@ -27,8 +27,8 @@ This article covers general-purpose setup of your development environment for We ## Install a preview channel of Microsoft Edge Install any Microsoft Edge preview channel (Beta, Dev, or Canary) on a supported operating system: - * Windows 10 - * Windows 11 + * Windows 10 + * Windows 11 To download a preview channel of Microsoft Edge (Beta, Dev, or Canary), go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider). @@ -42,14 +42,14 @@ The preview channels of Microsoft Edge are required in order to use a prerelease ## Download the WebView2Samples repo There are two repos containing WebView2 samples: -* [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples) -* [WebView2Browser repo](https://github.com/MicrosoftEdge/WebView2Browser) +* [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples) +* [WebView2Browser repo](https://github.com/MicrosoftEdge/WebView2Browser) You can download a repo as a `.zip` file, or clone the repo. -* If you download the repo (as a `.zip` file), you get a snapshot copy of the repo. You can then download another, updated copy of the repo later. +* If you download the repo (as a `.zip` file), you get a snapshot copy of the repo. You can then download another, updated copy of the repo later. -* If you clone the repo, you can update your local copy using git commands or features of various Dev apps. +* If you clone the repo, you can update your local copy using git commands or features of various Dev apps. To download the repo (as a `.zip` file): @@ -89,9 +89,9 @@ To download the repo (as a `.zip` file): You can download the repo as a `.zip` file, or clone the repo. -* If you download the repo (as a `.zip` file), you get a snapshot copy of the repo. You can then download another, updated copy of the repo later. +* If you download the repo (as a `.zip` file), you get a snapshot copy of the repo. You can then download another, updated copy of the repo later. -* If you clone the repo, you can update your local copy using git commands or features of various Dev apps. +* If you clone the repo, you can update your local copy using git commands or features of various Dev apps. To clone the `WebView2Samples` repo (or the `WebView2Browser` repo), you must first install git. You can download the repo, as described above, or clone it. @@ -113,9 +113,9 @@ To clone the `WebView2Samples` repo (or the `WebView2Browser` repo), you must fi ![Cloning the WebView2Samples repo](./machine-setup-images/clone-the-webview2-samples-repo.png) 1. Decide which tool you want to use to locally clone the repo: - * Visual Studio - * GitHub Desktop - * Git Bash shell or command prompt + * Visual Studio + * GitHub Desktop + * Git Bash shell or command prompt Next, clone the GitHub repo to your local drive. To do that, follow the appropriate steps below, for the tool you want to use. @@ -198,11 +198,11 @@ After you clone or download the `WebView2Samples` repo, open a `.sln` file in Vi For general, initial Dev environment setup, you can open any type of `.sln` file from the `WebView2Samples` repo: -* A platform-specific `.sln` file in a subdirectory of the `GettingStartedGuides` directory. These match the Getting Started tutorials and are completed examples that demonstrate a couple API features. +* A platform-specific `.sln` file in a subdirectory of the `GettingStartedGuides` directory. These match the Getting Started tutorials and are completed examples that demonstrate a couple API features. -* The Win32 `.sln` file containing multiple platform projects, in the `SampleApps` directory. This is a comprehensive API demonstration. +* The Win32 `.sln` file containing multiple platform projects, in the `SampleApps` directory. This is a comprehensive API demonstration. -* A platform-specific `.sln` file in a subdirectory of the `SampleApps` directory. These are comprehensive API demonstrations. +* A platform-specific `.sln` file in a subdirectory of the `SampleApps` directory. These are comprehensive API demonstrations. diff --git a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md index da7febc16a..9ee1f9ded2 100644 --- a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md +++ b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md @@ -130,11 +130,11 @@ If your app failed the **Supported API** test, update the Windows SDK to version ## Step 6: Upload the app package -* After all of the Windows App Certification Kit (WACK) tests have passed, upload your app package to the Windows Store, by using either of the following approaches: +* After all of the Windows App Certification Kit (WACK) tests have passed, upload your app package to the Windows Store, by using either of the following approaches: - * Approach 1: In Windows App Certification Kit (WACK), select **Project** > **Publish** > **Upload App Packages**. + * Approach 1: In Windows App Certification Kit (WACK), select **Project** > **Publish** > **Upload App Packages**. - * Approach 2: Go to Partner Center and upload your app package to the Windows Store through Partner Center. + * Approach 2: Go to Partner Center and upload your app package to the Windows Store through Partner Center. diff --git a/microsoft-edge/webview2/how-to/set-preview-channel.md b/microsoft-edge/webview2/how-to/set-preview-channel.md index fe26df7c98..267e81c1ff 100644 --- a/microsoft-edge/webview2/how-to/set-preview-channel.md +++ b/microsoft-edge/webview2/how-to/set-preview-channel.md @@ -35,9 +35,9 @@ The Canary channel is recommended, because it offers the latest experimental API #### Interplay between the WebView2 Prerelease SDK and Microsoft Edge Preview Channels -* **Prerelease SDK:** This version of the WebView2 SDK provides method signatures for experimental APIs, which allow you to write code using the experimental WebView2 APIs in your app. +* **Prerelease SDK:** This version of the WebView2 SDK provides method signatures for experimental APIs, which allow you to write code using the experimental WebView2 APIs in your app. -* **Microsoft Edge Preview Channels:** These channels (Edge Beta, Edge Dev, or Edge Canary) contain the necessary Microsoft Edge binaries. These channels allow your app to run and render using the experimental APIs. +* **Microsoft Edge Preview Channels:** These channels (Edge Beta, Edge Dev, or Edge Canary) contain the necessary Microsoft Edge binaries. These channels allow your app to run and render using the experimental APIs. For more information about how SDK versions interact with the WebView2 Runtime and the Microsoft Edge preview channels, see [Prerelease and Release SDKs for WebView2](../concepts/versioning.md). @@ -248,9 +248,9 @@ Do either of the following: ## Setting the browser executable folder (for local testing) An alternative approach is to use a browser executable folder. In this approach, you specify a folder that contains runtime binaries. This folder can be any of the following locations: -* The installed location of the WebView2 Runtime. -* A preview channel of Microsoft Edge. -* A folder containing Fixed Version binaries that you have deployed to the machine yourself. +* The installed location of the WebView2 Runtime. +* A preview channel of Microsoft Edge. +* A folder containing Fixed Version binaries that you have deployed to the machine yourself. If you set the browser executable folder to a specific preview channel of Microsoft Edge, you will need to update the location when that preview channel updates to a newer version. This is because the location includes the version number as part of its path. Therefore, we recommend using this approach for local testing only. diff --git a/microsoft-edge/webview2/how-to/webdriver.md b/microsoft-edge/webview2/how-to/webdriver.md index 900de098b8..c23f07befe 100644 --- a/microsoft-edge/webview2/how-to/webdriver.md +++ b/microsoft-edge/webview2/how-to/webdriver.md @@ -39,9 +39,9 @@ Follow the instructions to install [Microsoft Edge WebDriver](../../webdriver/in Make sure the version of Microsoft Edge WebDriver matches the version of the WebView2 Runtime that your app uses. For the WebView2API Sample to work, make sure your version of the WebView2 Runtime is greater than or equal to the supported version of the latest WebView2 SDK release. -* To locate the latest WebView2 SDK release, see [Release notes for the WebView2 SDK](../release-notes/index.md). +* To locate the latest WebView2 SDK release, see [Release notes for the WebView2 SDK](../release-notes/index.md). -* To find out which version of the WebView2 Runtime you currently have, go to `edge://settings/help`. +* To find out which version of the WebView2 Runtime you currently have, go to `edge://settings/help`. @@ -99,10 +99,10 @@ You've now set up an empty Visual Studio project that's suitable for Selenium te Decide whether to configure Selenium to drive WebView2 by using the "launch" or "attach" approach. -* The "launch" approach: In some scenarios, it's appropriate to let Microsoft Edge WebDriver handle launching your WebView2 app. +* The "launch" approach: In some scenarios, it's appropriate to let Microsoft Edge WebDriver handle launching your WebView2 app. Microsoft Edge WebDriver launches your WebView2 app and automatically attaches to the first available WebView2 instance that your app creates. -* The "attach" approach: In other scenarios, it's appropriate to attach Microsoft Edge WebDriver to a running WebView2 instance. You launch your app outside of Microsoft Edge WebDriver, and then attach Microsoft Edge WebDriver to a running WebView2 instance. This "attach" approach is for a WebView2 app that's not compatible with the "launch" approach. +* The "attach" approach: In other scenarios, it's appropriate to attach Microsoft Edge WebDriver to a running WebView2 instance. You launch your app outside of Microsoft Edge WebDriver, and then attach Microsoft Edge WebDriver to a running WebView2 instance. This "attach" approach is for a WebView2 app that's not compatible with the "launch" approach. @@ -121,8 +121,8 @@ In this scenario, there's one WebView2 instance, and it's available upon launch, If you have any situation that doesn't fit the "launch" scenario above, you should attach Microsoft Edge WebDriver to a running WebView2 instance (instead of letting Microsoft Edge WebDriver handle the WebView2 launch); use [Step 4b: Attaching Microsoft Edge WebDriver to a running WebView2 app](#step-4b-attaching-microsoft-edge-webdriver-to-a-running-webview2-app). Some examples of scenarios that don't fit the "launch" scenario are: -* You need to navigate through some native UI before the WebView2 instance is created. -* Your app creates multiple WebView2 instances, and you want to attach to a specific instance. +* You need to navigate through some native UI before the WebView2 instance is created. +* Your app creates multiple WebView2 instances, and you want to attach to a specific instance. In such scenarios, we recommend attaching to a specific instance of WebView2, because having Microsoft Edge WebDriver launch your WebView2 app is for relatively simple scenarios only. When Microsoft Edge WebDriver launches your app, it automatically attaches to the first WebView2 instance that is created, and will fail if no WebView2 instance is found. @@ -149,9 +149,9 @@ To drive WebView2 with Selenium and Microsoft Edge WebDriver: Next, we'll add code that does the following: - * Configure the `EdgeOptions` instance to use WebView2, by setting the `UseWebView` option to `true`. - * Set `eo.BinaryLocation` to the file path of your WebView2 app binary. - * Create an `EdgeDriver` object using the `EdgeOptions` instance. + * Configure the `EdgeOptions` instance to use WebView2, by setting the `UseWebView` option to `true`. + * Set `eo.BinaryLocation` to the file path of your WebView2 app binary. + * Create an `EdgeDriver` object using the `EdgeOptions` instance. 1. Copy the following code and paste it below the `eo` declaration line: @@ -198,9 +198,9 @@ In this scenario, where you have some native UI to navigate, you launch your app Microsoft Edge WebDriver doesn't handle native UI automation, but here are some other approaches to navigate the native UI and display the WebView2 instance that you are automating: -* Windows Application Driver ([WinAppDriver](https://github.com/Microsoft/WinAppDriver)) is a service to support Selenium-like UI Test Automation on Windows Applications. This service supports testing Universal Windows Platform (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF), and Classic Windows (Win32) apps on Windows 10 PCs. +* Windows Application Driver ([WinAppDriver](https://github.com/Microsoft/WinAppDriver)) is a service to support Selenium-like UI Test Automation on Windows Applications. This service supports testing Universal Windows Platform (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF), and Classic Windows (Win32) apps on Windows 10 PCs. -* Using Microsoft Native UI automation directly. The [Microsoft UI Automation](/windows/win32/winauto/entry-uiauto-win32) framework allows automated test scripts to interact with the UI. Microsoft UI Automation enables Windows applications to provide and consume programmatic information about user interfaces (UIs). It provides programmatic access to most UI elements on the desktop. It enables assistive technology products, such as screen readers, to provide information about the UI to end users and to manipulate the UI by standard input and by means other than standard input. +* Using Microsoft Native UI automation directly. The [Microsoft UI Automation](/windows/win32/winauto/entry-uiauto-win32) framework allows automated test scripts to interact with the UI. Microsoft UI Automation enables Windows applications to provide and consume programmatic information about user interfaces (UIs). It provides programmatic access to most UI elements on the desktop. It enables assistive technology products, such as screen readers, to provide information about the UI to end users and to manipulate the UI by standard input and by means other than standard input. * Use a flag such as a command-line parameter or an environment variable to tell your app to launch directly to the WebView2 instance, to avoid the need for navigating native UI. Depending on your scenario, this might make it possible to use the "launch" approach described in [Step 4a: Letting Microsoft Edge WebDriver launch your WebView2 app](#step-4a-letting-microsoft-edge-webdriver-launch-your-webview2-app). diff --git a/microsoft-edge/webview2/how-to/webresourcerequested.md b/microsoft-edge/webview2/how-to/webresourcerequested.md index 046d41b0a3..19938ac09d 100644 --- a/microsoft-edge/webview2/how-to/webresourcerequested.md +++ b/microsoft-edge/webview2/how-to/webresourcerequested.md @@ -116,9 +116,9 @@ For details about how the URL filter works, see [CoreWebView2.AddWebResourceRequ #### Why would you want to intercept requests that are sent from WebView2? Intercepting requests sent from WebView2 enables you to further configure your request. The host app might want to provide optional content as part of the request that the WebView2 control won't know on its own. Some scenarios include: -* You're logging into a page and the app has credentials so the app can provide authentication header without the user having to enter those credentials. -* You want offline functionality in the app so you redirect the URL to a local file path when no internet connection is detected. -* You want to upload local file content to the request server via a POST request. +* You're logging into a page and the app has credentials so the app can provide authentication header without the user having to enter those credentials. +* You want offline functionality in the app so you redirect the URL to a local file path when no internet connection is detected. +* You want to upload local file content to the request server via a POST request. diff --git a/microsoft-edge/webview2/how-to/winrt-from-js.md b/microsoft-edge/webview2/how-to/winrt-from-js.md index 25246587cd..55cdddfcf0 100644 --- a/microsoft-edge/webview2/how-to/winrt-from-js.md +++ b/microsoft-edge/webview2/how-to/winrt-from-js.md @@ -12,9 +12,9 @@ ms.date: 02/21/2023 Your web-side JavaScript code can access native-side WinRT methods and properties, with the help of the **wv2winrt** tool (the WebView2 WinRT JS Projection tool). The **wv2winrt** tool generates needed code files for your JavaScript code, and enables using methods and properties of any WinRT APIs, including: -* Your WebView2 host app's WinRT APIs. -* Windows WinRT APIs. -* Third-party WinRT APIs. +* Your WebView2 host app's WinRT APIs. +* Windows WinRT APIs. +* Third-party WinRT APIs. For more information about why you'd want to have your web-side JavaScript code access the methods and properties of your WinRT host app, see the introduction of [Call native-side code from web-side code](hostobject.md). @@ -27,8 +27,8 @@ This article is for WinRT WebView2 APIs, not for .NET WebView2 APIs. The C# cod The **wv2winrt** tool (the WebView2 WinRT JS Projection tool) is needed when projecting WinRT objects, because WinRT doesn't support `IDispatch` or any other mechanism to dynamically inspect and interact with WinRT objects, which WebView2's Win32 and .NET platforms support. For .NET use of `AddHostObjectToScript`, see [Call native-side code from web-side code](hostobject.md) instead of this article. @@ -37,18 +37,18 @@ The **wv2winrt** tool (the WebView2 WinRT JS Projection tool) is needed when pro If your WinRT WebView2 app targets WinUI 3 (Windows App SDK) rather than WinUI 2 (UWP), here's an overview of the WinUI 3-specific steps that are provided further below: -* In a non-packaged app, you have to do additional steps that are in the article "Enhancing Non-packaged Desktop Apps using Windows Runtime Components". +* In a non-packaged app, you have to do additional steps that are in the article "Enhancing Non-packaged Desktop Apps using Windows Runtime Components". -* Add `WinRTAdapter` to `CsWinRTIncludes`. +* Add `WinRTAdapter` to `CsWinRTIncludes`. -* For WinUI 3 (Windows App SDK) apps, the main app project has a reference to WinAppSDK which directly includes its own copy of the WebView2 SDK files, so you cannot include a reference to the WebView2 SDK in the main app project without producing error messages. +* For WinUI 3 (Windows App SDK) apps, the main app project has a reference to WinAppSDK which directly includes its own copy of the WebView2 SDK files, so you cannot include a reference to the WebView2 SDK in the main app project without producing error messages. -* The project adapter version doesn't have to match. +* The project adapter version doesn't have to match. -* After installing "default" options for Visual Studio 2022 Community edition, in Visual Studio Installer, click the **.NET** card, then on the right, select the checkbox **Windows App SDK C# Templates**. +* After installing "default" options for Visual Studio 2022 Community edition, in Visual Studio Installer, click the **.NET** card, then on the right, select the checkbox **Windows App SDK C# Templates**. -* If the correct project template still doesn't appear: in the Visual Studio Installer, click the **UWP** card to select it, select the **v143 C++ tools** checkbox on the right, and then click the **Modify** button. +* If the correct project template still doesn't appear: in the Visual Studio Installer, click the **UWP** card to select it, select the **v143 C++ tools** checkbox on the right, and then click the **Modify** button. @@ -146,16 +146,16 @@ Let's get started! 1. Do any of the following approaches to obtain a baseline starter project that contains a couple lines of WebView2 code that embeds the WebView2 control: - * **Use the provided baseline sample solution:** If not done already, clone or download the `WebView2Samples` repo to your local drive. In a separate window or tab, see [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below. This approach uses your local copy of https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln. + * **Use the provided baseline sample solution:** If not done already, clone or download the `WebView2Samples` repo to your local drive. In a separate window or tab, see [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below. This approach uses your local copy of https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln. - * **Use a project template in Visual Studio to create a basic UWP app and add a WebView2 control:** Do the steps in [Get started with WebView2 in WinUI 2 (UWP) apps](../get-started/winui2.md) to create a baseline starter project that contains a couple lines of WebView2 code that embeds the WebView2 control. + * **Use a project template in Visual Studio to create a basic UWP app and add a WebView2 control:** Do the steps in [Get started with WebView2 in WinUI 2 (UWP) apps](../get-started/winui2.md) to create a baseline starter project that contains a couple lines of WebView2 code that embeds the WebView2 control. - * **Use your existing code base:** If you have your own app code base already, you can open that project in Visual Studio. + * **Use your existing code base:** If you have your own app code base already, you can open that project in Visual Studio. 1. On your local drive, open the `.sln` file that you obtained above, such as the Samples repo solution: - * `/WebView2Samples-main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln` - * `/WebView2Samples/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln` + * `/WebView2Samples-main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln` + * `/WebView2Samples/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln` The sample solution opens in Visual Studio: @@ -404,9 +404,9 @@ The WebView2 prerelease SDK is now installed for the main project. If your app targets WinUI 3 (Windows App SDK), skip this step, because: -* WinUI 3 bundles the WebView2 SDK, so there isn't a need to download the WebView2 SDK separately. +* WinUI 3 bundles the WebView2 SDK, so there isn't a need to download the WebView2 SDK separately. -* WinUI 3 doesn't support prerelease WebView2 SDKs. +* WinUI 3 doesn't support prerelease WebView2 SDKs. --- @@ -505,8 +505,8 @@ Next, generate the API code: 1. Right-click the **WinRTAdapter** project, and then select **Build**. Source code is generated for namespaces or classes that you specified in the **Include filters** dialog of the **wv2winrt** tool (the WebView2 WinRT JS Projection tool): - * `Windows.System.UserProfile` namespace - * `Windows.Globalization.Language` class + * `Windows.System.UserProfile` namespace + * `Windows.Globalization.Language` class 1. After building is complete, select **File** > **Save All** (**Ctrl+Shift+S**). @@ -834,7 +834,7 @@ Congratulations! You've finished the sample demonstration of calling WinRT code ##### [WinUI 3 (Windows App SDK)](#tab/winui3) -* The following Visual Studio dialogs might appear. These debugger dialogs are a known bug. Click the **OK** button, and then click the **Cancel** button to close these dialogs: +* The following Visual Studio dialogs might appear. These debugger dialogs are a known bug. Click the **OK** button, and then click the **Cancel** button to close these dialogs: ![Debugger not configured](./winrt-from-js-images/debugger-not-configd.png) @@ -966,8 +966,8 @@ To make the `AddHostObjectToScript` JavaScript proxies act more like other JavaS * `chrome.webview.hostObjects.options.ignoreMemberNotFoundError` - If you attempt to get the value of a property of a proxy, and the property doesn't exist on the corresponding native class, you'll get an exception - unless you set this property to `true`, in which case the behavior will match Chakra WinRT projection behavior (and general JavaScript behavior) and return `undefined` with no error. Chakra WinRT projection puts the WinRT namespaces directly on the root object. In contrast: -* `AddHostObjectToScript` places async root proxies on `chrome.webview.hostObjects`. -* `AddHostObjectToScript` places sync root proxies on `chrome.webview.hostObjects.sync`. +* `AddHostObjectToScript` places async root proxies on `chrome.webview.hostObjects`. +* `AddHostObjectToScript` places sync root proxies on `chrome.webview.hostObjects.sync`. To access root proxies where Chakra WinRT projection code would expect, you can assign the root proxy WinRT namespace locations over to the root object. For example: @@ -1019,8 +1019,8 @@ webView->CoreWebView2->AddScriptToExecuteOnDocumentCreatedAsync( ## Get information about WebView2 properties Information about WebView2 properties is available in two places: -* The WinRTAdapter project's Property Pages. -* `wv2winrt.exe` command-line help. This is the **wv2winrt** tool (the WebView2 WinRT JS Projection tool). +* The WinRTAdapter project's Property Pages. +* `wv2winrt.exe` command-line help. This is the **wv2winrt** tool (the WebView2 WinRT JS Projection tool). diff --git a/microsoft-edge/webview2/how-to/winrt-js-conversion.md b/microsoft-edge/webview2/how-to/winrt-js-conversion.md index 9c28dbcb80..4103b2a5f2 100644 --- a/microsoft-edge/webview2/how-to/winrt-js-conversion.md +++ b/microsoft-edge/webview2/how-to/winrt-js-conversion.md @@ -37,8 +37,8 @@ The WebView2 WinRT JS Projection tool (**wv2winrt**) converts from WinRT to Java | Class constructor | JavaScript constructor and function | See below. | When passing JavaScript objects to host objects: -* If JavaScript `Date` objects need to be passed to host objects as `VT_DATE`, set the host object's `shouldSerializeDates` property to `true`. By default, `Date` objects are passed to the host as `string`, by using `JSON.stringify`. -* If JavaScript typed arrays need to be passed to host objects as `array`, set the host object's `shouldPassTypedArraysAsArrays` property to `true`. By default, typed arrays are passed to the host as `IDispatch`. +* If JavaScript `Date` objects need to be passed to host objects as `VT_DATE`, set the host object's `shouldSerializeDates` property to `true`. By default, `Date` objects are passed to the host as `string`, by using `JSON.stringify`. +* If JavaScript typed arrays need to be passed to host objects as `array`, set the host object's `shouldPassTypedArraysAsArrays` property to `true`. By default, typed arrays are passed to the host as `IDispatch`. See also: * [Introduction to Microsoft Interface Definition Language 3.0](/uwp/midl-3/intro) @@ -50,13 +50,13 @@ See also: A runtime class that has static properties, static methods, or static events is represented as a property of the namespace. Each static property, static method, and static event is represented as a property on that JavaScript object of the runtimeclass. For example, for the WinRT API static method `Windows.Foundation.Uri.EscapeComponent`: -* `Windows.Foundation` is the namespace. -* `Uri` is the runtimeclass. -* `EscapeComponent` is the static method. +* `Windows.Foundation` is the namespace. +* `Uri` is the runtimeclass. +* `EscapeComponent` is the static method. In JavaScript, the representation looks similar: `chrome.webview.hostObjects.Windows.Foundation.Uri.EscapeComponent`: -* `EscapeComponent` is a JavaScript method that's a property on the JavaScript object for the `Uri` runtimeclass. -* The `Uri` runtimeclass is a property on the JavaScript object for the `Foundation` namespace. +* `EscapeComponent` is a JavaScript method that's a property on the JavaScript object for the `Uri` runtimeclass. +* The `Uri` runtimeclass is a property on the JavaScript object for the `Foundation` namespace. For example, to call the static method `Windows.Foundation.Uri.EscapeComponent`, call: @@ -71,8 +71,8 @@ The JavaScript namespace object here is `chrome.webview.hostObjects.Windows.Foun #### Class constructors A constructor for a `RuntimeClass` class is represented as a single property on a JavaScript object that can be called two ways: -* As a constructor on the JavaScript namespace object. -* As a function on the JavaScript namespace object. +* As a constructor on the JavaScript namespace object. +* As a function on the JavaScript namespace object. For example, to create a new `Windows.Foundation.Uri` object, you can either call it as a constructor, using `new`: diff --git a/microsoft-edge/webview2/index.md b/microsoft-edge/webview2/index.md index 69f8652907..3c1d8e074c 100644 --- a/microsoft-edge/webview2/index.md +++ b/microsoft-edge/webview2/index.md @@ -23,19 +23,19 @@ With WebView2, you can embed web code in different parts of your native app, or Developers must often decide between building a web app or a native app. This decision hinges on the tradeoff between reach and power: -* Web apps allow for a broad reach. As a Web developer, you can reuse most of your code across different platforms. +* Web apps allow for a broad reach. As a Web developer, you can reuse most of your code across different platforms. -* To access all the powerful capabilities of a native platform, use a native app. +* To access all the powerful capabilities of a native platform, use a native app. The following diagram shows the spectrum of apps, from maximum reach, to maximum power: ![The spectrum of apps, from maximum reach but less power, to an optimal hybrid blend, to maximum power but less reach](./index-images/web-native.png) -* Wide **reach** includes websites and Progressive Web Apps. +* Wide **reach** includes websites and Progressive Web Apps. -* In the middle are hybrid apps, such as WebViews and Electron. +* In the middle are hybrid apps, such as WebViews and Electron. -* Maximum **power** is native apps. +* Maximum **power** is native apps. Hybrid apps, in the middle of this spectrum, allow you to enjoy the best of both worlds: the ubiquity and strength of the web platform, combined with the power and full capabilities of the native platform. @@ -43,23 +43,23 @@ Hybrid apps, in the middle of this spectrum, allow you to enjoy the best of both ## WebView2 benefits -* **Web ecosystem and skill set**. Utilize the entire web platform, libraries, tooling, and talent that exists within the web ecosystem. +* **Web ecosystem and skill set**. Utilize the entire web platform, libraries, tooling, and talent that exists within the web ecosystem. -* **Rapid innovation**. Web development allows for faster deployment and iteration. +* **Rapid innovation**. Web development allows for faster deployment and iteration. -* **Windows 10 and 11 support**. Support for a consistent user experience across Windows 10 and Windows 11. +* **Windows 10 and 11 support**. Support for a consistent user experience across Windows 10 and Windows 11. -* **Native capabilities**. Access the full set of Native APIs. +* **Native capabilities**. Access the full set of Native APIs. -* **Code-sharing**. Add web code to your codebase allows for increased reuse across multiple platforms. +* **Code-sharing**. Add web code to your codebase allows for increased reuse across multiple platforms. -* **Microsoft support**. Microsoft provides support and adds new feature requests on supported platforms. +* **Microsoft support**. Microsoft provides support and adds new feature requests on supported platforms. -* **Evergreen distribution**. Rely on an up-to-date version of Chromium with regular platform updates and security patches. +* **Evergreen distribution**. Rely on an up-to-date version of Chromium with regular platform updates and security patches. -* **Fixed Version distribution**. Optionally package a specific version of the Chromium bits in your app. +* **Fixed Version distribution**. Optionally package a specific version of the Chromium bits in your app. -* **Incremental adoption**. Add web components piece-by-piece to your app. +* **Incremental adoption**. Add web components piece-by-piece to your app. @@ -110,16 +110,16 @@ For details, see [Windows Server](/deployedge/microsoft-edge-supported-operating The following programming environments are supported for WebView2: -* Win32 C/C++ -* .NET Framework 4.6.2 or later -* .NET Core 3.1 or later -* .NET 5 or later -* [WinUI 2.0](/windows/apps/winui/winui2/) -* [WinUI 3.0](/windows/apps/winui/winui3/) +* Win32 C/C++ +* .NET Framework 4.6.2 or later +* .NET Core 3.1 or later +* .NET 5 or later +* [WinUI 2.0](/windows/apps/winui/winui2/) +* [WinUI 3.0](/windows/apps/winui/winui3/) In addition to Windows devices, WebView2 is also supported on the following devices: -* Xbox -* HoloLens 2 +* Xbox +* HoloLens 2 diff --git a/microsoft-edge/webview2/release-notes/about.md b/microsoft-edge/webview2/release-notes/about.md index f6dcff248d..510e7b8510 100644 --- a/microsoft-edge/webview2/release-notes/about.md +++ b/microsoft-edge/webview2/release-notes/about.md @@ -80,11 +80,11 @@ WebView2 changes may require an update to the Runtime, SDK, or both. Most new A WebView2 shares code and binaries with the Microsoft Edge browser, and is released around the same time. As a result, WebView2 Runtime releases generally also include Microsoft Edge updates. -* For Microsoft Edge updates, see [Release notes for Microsoft Edge Stable Channel](/deployedge/microsoft-edge-relnote-stable-channel) and [Release notes for Microsoft Edge Beta Channel](/deployedge/microsoft-edge-relnote-beta-channel). +* For Microsoft Edge updates, see [Release notes for Microsoft Edge Stable Channel](/deployedge/microsoft-edge-relnote-stable-channel) and [Release notes for Microsoft Edge Beta Channel](/deployedge/microsoft-edge-relnote-beta-channel). -* To update the WebView2 Runtime on your development machine and on user machines, see [Distribute your app and the WebView2 Runtime](../concepts/distribution.md). To view or get the latest WebView2 Runtime versions, see [Download the WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2#download-the-webview2-runtime) in the _Microsoft Edge WebView2_ page at developer.microsoft.com. +* To update the WebView2 Runtime on your development machine and on user machines, see [Distribute your app and the WebView2 Runtime](../concepts/distribution.md). To view or get the latest WebView2 Runtime versions, see [Download the WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2#download-the-webview2-runtime) in the _Microsoft Edge WebView2_ page at developer.microsoft.com. -* To install or update the WebView2 SDK, see [Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_. +* To install or update the WebView2 SDK, see [Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_. diff --git a/microsoft-edge/webview2/release-notes/archive.md b/microsoft-edge/webview2/release-notes/archive.md index 44f778a28a..7716100983 100644 --- a/microsoft-edge/webview2/release-notes/archive.md +++ b/microsoft-edge/webview2/release-notes/archive.md @@ -3181,7 +3181,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* Added support for `WebResourceRequested` for workers, which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different-origin iframes. +* Added support for `WebResourceRequested` for workers, which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different-origin iframes. ##### [.NET/C#](#tab/dotnetcsharp) @@ -3567,7 +3567,7 @@ N/A -* Added support for `WebResourceRequested` for workers, which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different origin iframes. +* Added support for `WebResourceRequested` for workers, which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different origin iframes. ##### [.NET/C#](#tab/dotnetcsharp) @@ -4970,7 +4970,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, * Fixed a crash during initialization when creating a WebView2 using WPF and SDK version 1.0.1722.32, which is now deprecated. (See [SDK 1.0.1722.32 is deprecated](#sdk-10172232-is-deprecated) below.) ([Issue #3375](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3375)) -* Fixed a bug in `PostSharedBufferToScript` that stops after about 32000x1MB buffers are posted. (Runtime-only) ([Issue #3360](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3360)) +* Fixed a bug in `PostSharedBufferToScript` that stops after about 32000x1MB buffers are posted. (Runtime-only) ([Issue #3360](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3360)) ##### [.NET/C#](#tab/dotnetcsharp) @@ -5295,7 +5295,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha --- -* Fixed an issue that was causing the `X-Edge-Shopping-Flag` header to be added to web requests that are coming from WebView2. (Runtime-only) ([Issue #3365](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3365)) +* Fixed an issue that was causing the `X-Edge-Shopping-Flag` header to be added to web requests that are coming from WebView2. (Runtime-only) ([Issue #3365](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3365)) @@ -5317,7 +5317,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added `AdditionalObjects` for WebMessage received: +* Added `AdditionalObjects` for WebMessage received: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5335,7 +5335,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added Window Management permission type: +* Added Window Management permission type: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5353,7 +5353,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for launching external URIs: +* Added support for launching external URIs: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5398,7 +5398,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for texture streaming: +* Added support for texture streaming: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5564,7 +5564,7 @@ The received `WebTexture` interface that the Renderer writes to so that the host -* Added support for profile management: custom data partition, cookie manager and profile deletion: +* Added support for profile management: custom data partition, cookie manager and profile deletion: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5623,7 +5623,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* Managing smartscreen API: +* Managing smartscreen API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5647,13 +5647,13 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes -* Fixed a bug in `PrintAsync` and `PrintToPdfStreamAsync` that throws an exception when print settings are null. +* Fixed a bug in `PrintAsync` and `PrintToPdfStreamAsync` that throws an exception when print settings are null. -* Improved handling of apps running elevated. (Runtime-only) +* Improved handling of apps running elevated. (Runtime-only) -* Added support for window management permission kind. (Runtime and SDK) +* Added support for window management permission kind. (Runtime and SDK) -* Reliability improvement. (Runtime-only) +* Reliability improvement. (Runtime-only) @@ -5742,7 +5742,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for the Experimental File API: +* Added support for the Experimental File API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5782,7 +5782,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* The SharedBuffer API: +* The SharedBuffer API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5832,7 +5832,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* The Permission API: +* The Permission API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5873,7 +5873,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* The ScriptLocale API: +* The ScriptLocale API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -5907,25 +5907,25 @@ Previous name in 1619-prerelease: #### Bug fixes -* Fixed a bug where WebView2 was not closing properly when a `BeforeUnload` event was received. (Runtime-only) ([Issue #2677](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2677)) +* Fixed a bug where WebView2 was not closing properly when a `BeforeUnload` event was received. (Runtime-only) ([Issue #2677](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2677)) -* In the `DownloadStarting` event, the `ResultFilePath` previously wasn't showing the correct download location for UWP applications when the `DownloadStarting` event handler was attached. This has been fixed; the correct `ResultFilePath` is now shown. +* In the `DownloadStarting` event, the `ResultFilePath` previously wasn't showing the correct download location for UWP applications when the `DownloadStarting` event handler was attached. This has been fixed; the correct `ResultFilePath` is now shown. -* Fixed a bug where `System.ArgumentException` was thrown when a call to the `HostObject` method returns a non-generic task. ([Issue #2787](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2787)) +* Fixed a bug where `System.ArgumentException` was thrown when a call to the `HostObject` method returns a non-generic task. ([Issue #2787](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2787)) -* Fixed an issue in the `SharedBuffer` API where the stream object didn't work well with `StreamWriter`. (Runtime-only) ([Issue #3108](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3108)) +* Fixed an issue in the `SharedBuffer` API where the stream object didn't work well with `StreamWriter`. (Runtime-only) ([Issue #3108](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3108)) -* DOM speech-synthesis APIs, such as `SpeechSynthesis.getVoices()`, will now work in UWP apps. (Runtime-only) +* DOM speech-synthesis APIs, such as `SpeechSynthesis.getVoices()`, will now work in UWP apps. (Runtime-only) -* Fixed a crash that occurred on frame destruction. (Runtime-only) ([Issue #3062](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3062)) +* Fixed a crash that occurred on frame destruction. (Runtime-only) ([Issue #3062](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3062)) -* Fixed a bug where the app crashes when trying to call `CreateWebResourceResponse` with a `null` `reason` phrase. (Runtime-only) +* Fixed a bug where the app crashes when trying to call `CreateWebResourceResponse` with a `null` `reason` phrase. (Runtime-only) -* The `CoreWebView2.AddHostObjectToScript` option `chrome.webview.hostObjects.options.ignoreMemberNotFoundError` now works in non-English locales. (Runtime-only) +* The `CoreWebView2.AddHostObjectToScript` option `chrome.webview.hostObjects.options.ignoreMemberNotFoundError` now works in non-English locales. (Runtime-only) -* Fully enabled **Open file** dialog support for elevated apps on Windows 7. +* Fully enabled **Open file** dialog support for elevated apps on Windows 7. -* Fixed a bug where owned windows were not appearing for UWP. +* Fixed a bug where owned windows were not appearing for UWP. @@ -6133,7 +6133,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* APIs to manage the value of the controller's script locale: +* APIs to manage the value of the controller's script locale: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6173,7 +6173,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for the Permission management API: +* Added support for the Permission management API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6238,7 +6238,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for API to disable back and forward navigation: +* Added support for API to disable back and forward navigation: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6262,7 +6262,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* The Custom Scheme Registration API: +* The Custom Scheme Registration API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6291,7 +6291,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* The Tracking Prevention API: +* The Tracking Prevention API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6320,21 +6320,21 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes -* Disabled **Open link as Profile** in the WebView2 context menu. +* Disabled **Open link as Profile** in the WebView2 context menu. -* Fixed post data missing in form submit with Ctrl-click. ([Issue #2652](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2652)) +* Fixed post data missing in form submit with Ctrl-click. ([Issue #2652](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2652)) -* Fixed a bug where the user is not able to get the custom context menu on PDF Viewer. ([Issue #2607](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2607)) +* Fixed a bug where the user is not able to get the custom context menu on PDF Viewer. ([Issue #2607](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2607)) -* Fixed a bug where the entire toolbar is blank when simultaneously hiding the **Bookmarks**, **Search**, and **PageSelector** buttons. ([Issue #2866](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2866)) +* Fixed a bug where the entire toolbar is blank when simultaneously hiding the **Bookmarks**, **Search**, and **PageSelector** buttons. ([Issue #2866](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2866)) -* Fixed a bug where the app crashes when trying to move focus to WebView2 when it is disabled. +* Fixed a bug where the app crashes when trying to move focus to WebView2 when it is disabled. -* Fixed drag and drop within the WebView2 for composition-hosted WebViews. +* Fixed drag and drop within the WebView2 for composition-hosted WebViews. -* Removed read-aloud icon in Address bar in a WebView2 popup window. +* Removed read-aloud icon in Address bar in a WebView2 popup window. -* Fixed unexpected items in the context menu of popup windows in WebView2. +* Fixed unexpected items in the context menu of popup windows in WebView2. @@ -6356,7 +6356,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* Additional options used to create a WebView2 Environment to manage custom scheme registration: +* Additional options used to create a WebView2 Environment to manage custom scheme registration: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6405,7 +6405,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for the Locale Region API: +* Added support for the Locale Region API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6424,7 +6424,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for the tracking prevention API: +* Added support for the tracking prevention API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6438,7 +6438,7 @@ The following Experimental APIs have been added in this Prerelease SDK. ##### [Win32/C++](#tab/win32cpp) -* [ICoreWebView2ExperimentalEnvironmentOptions2](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions2?view=webview2-1.0.1549-prerelease&preserve-view=true) +* [ICoreWebView2ExperimentalEnvironmentOptions2](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions2?view=webview2-1.0.1549-prerelease&preserve-view=true) * [ICoreWebView2ExperimentalEnvironmentOptions2::EnableTrackingPrevention property (get](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions2?view=webview2-1.0.1549-prerelease&preserve-view=true#get_enabletrackingprevention), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions2?view=webview2-1.0.1549-prerelease&preserve-view=true#put_enabletrackingprevention) * [ICoreWebView2ExperimentalProfile5](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile5?view=webview2-1.0.1549-prerelease&preserve-view=true) * [ICoreWebView2ExperimentalProfile5::PreferredTrackingPreventionLevel property (get](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile5?view=webview2-1.0.1549-prerelease&preserve-view=true#get_preferredtrackingpreventionlevel), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile5?view=webview2-1.0.1549-prerelease&preserve-view=true#put_preferredtrackingpreventionlevel) @@ -6453,7 +6453,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, -* Added support for the Print API: +* Added support for the Print API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6505,7 +6505,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, --- -* Added support for Custom Crash Reporting API: +* Added support for Custom Crash Reporting API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6528,23 +6528,23 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes -* Fixed some nullptr issues where now some public APIs which take nullptr as input parameters do not crash the WebView2. +* Fixed some nullptr issues where now some public APIs which take nullptr as input parameters do not crash the WebView2. -* Disabled "Open link as Profile" in the WebView2 context menu. +* Disabled "Open link as Profile" in the WebView2 context menu. -* Fixed bug where the whole tool bar will be blank when hiding Bookmarks, Search, and PageSelector buttons simultaneously. ([Issue #2866](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2866)) +* Fixed bug where the whole tool bar will be blank when hiding Bookmarks, Search, and PageSelector buttons simultaneously. ([Issue #2866](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2866)) -* Fix post data missing in form submit with control click. ([Issue #2652](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2652)) +* Fix post data missing in form submit with control click. ([Issue #2652](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2652)) -* Fixed a bug where the user is not able to get the custom context menu on PDF Viewer. ([Issue #2607](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2607)) +* Fixed a bug where the user is not able to get the custom context menu on PDF Viewer. ([Issue #2607](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2607)) -* Fix drag/drop within the WebView2 for composition hosted WebViews. +* Fix drag/drop within the WebView2 for composition hosted WebViews. -* Fixed a bug where the app crashes when trying to move focus to WebView2 when it is disabled. +* Fixed a bug where the app crashes when trying to move focus to WebView2 when it is disabled. -* Remove read aloud icon in Address bar in a WebView2 popup window. +* Remove read aloud icon in Address bar in a WebView2 popup window. -* Fixed an issue where context menu shows unexpected items in WebView2 popup window. +* Fixed an issue where context menu shows unexpected items in WebView2 popup window. @@ -6566,7 +6566,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* The Print API: +* The Print API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6620,7 +6620,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* The Custom Crash Reporting API: +* The Custom Crash Reporting API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6690,7 +6690,7 @@ The following Experimental APIs have been added in this Prerelease SDK. --- -* Added support for accessing a shared buffer object from the script of the main frame or `iframe`: +* Added support for accessing a shared buffer object from the script of the main frame or `iframe`: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6709,7 +6709,7 @@ The following Experimental APIs have been added in this Prerelease SDK. --- -* Added support for running JavaScript code from the `JavaScript` parameter in the current top-level document: +* Added support for running JavaScript code from the `JavaScript` parameter in the current top-level document: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6745,17 +6745,17 @@ The following Experimental APIs have been added in this Prerelease SDK. #### Bug fixes for 1.0.1466-prerelease -* Fixed a bug in which the custom header title in print settings could be wrong. ([Issue #2093](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2093)) +* Fixed a bug in which the custom header title in print settings could be wrong. ([Issue #2093](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2093)) -* Display `AllowedCertificateAuthorities` in `add_ClientCertificateRequested` event as a `Base64` string. (Runtime-only) ([Issue #2346](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2346)) +* Display `AllowedCertificateAuthorities` in `add_ClientCertificateRequested` event as a `Base64` string. (Runtime-only) ([Issue #2346](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2346)) -* Fixed a bug in which the default footer URI in print settings is missing. ([Issue #2851](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2851)) +* Fixed a bug in which the default footer URI in print settings is missing. ([Issue #2851](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2851)) -* Fixed a bug that produces a null pointer exception that's related to print settings. (Runtime-only) ([Issue #2858](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2858)) +* Fixed a bug that produces a null pointer exception that's related to print settings. (Runtime-only) ([Issue #2858](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2858)) -* Fixed a bug that reports navigation failure when redirecting to a server that has been configured with Client Certificate Authentication and when the `WebResourceRequested` event is subscribed to. (Runtime-only) +* Fixed a bug that reports navigation failure when redirecting to a server that has been configured with Client Certificate Authentication and when the `WebResourceRequested` event is subscribed to. (Runtime-only) -* Fixed an `AddHostObjectToScript` bug in which, when JavaScript calls an async method and then a synchronous method, the async method call might fail. +* Fixed an `AddHostObjectToScript` bug in which, when JavaScript calls an async method and then a synchronous method, the async method call might fail. @@ -6813,7 +6813,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for the Print API: +* Added support for the Print API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6864,7 +6864,7 @@ The following Experimental APIs have been added in this Prerelease SDK. --- -* Added support for SmartScreen API: +* Added support for SmartScreen API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6880,7 +6880,7 @@ The following Experimental APIs have been added in this Prerelease SDK. --- -* Added support for Custom Crash Reporting API: +* Added support for Custom Crash Reporting API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6906,13 +6906,13 @@ The following Experimental APIs have been added in this Prerelease SDK. #### Bug fixes for 1.0.1414-prerelease -* Removed three-dot menu with a broken link from the downloads page. (Runtime-only) ([Issue #2753](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2753)) +* Removed three-dot menu with a broken link from the downloads page. (Runtime-only) ([Issue #2753](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2753)) -* Fixed a bug in the WebView2 WinRT JS Projection tool (wv2winrt) where C++20 projects failed to compile. ([Issue #2768](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2768)) +* Fixed a bug in the WebView2 WinRT JS Projection tool (wv2winrt) where C++20 projects failed to compile. ([Issue #2768](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2768)) -* Fixed a crash which could occur with the WebView2 WinRT API while closing down WebView2 if you subscribed to any events, especially the `CoreWebView2.GetDevToolsEventReceiver` event. (SDK-only) +* Fixed a crash which could occur with the WebView2 WinRT API while closing down WebView2 if you subscribed to any events, especially the `CoreWebView2.GetDevToolsEventReceiver` event. (SDK-only) -* Fixed a bug where it wasn't possible to dismiss the download popup after minimizing the window. (Runtime-only) +* Fixed a bug where it wasn't possible to dismiss the download popup after minimizing the window. (Runtime-only) @@ -6934,7 +6934,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha -* The drag and drop API: +* The drag and drop API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -6976,7 +6976,7 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* The drag and drop API: +* The drag and drop API: ##### [.NET/C#](#tab/dotnetcsharp) @@ -7004,15 +7004,15 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes for 1.0.1369-prerelease -* Fixed a bug where WPF apps would crash when windows with WebView2 were closed. ([Issue #640](https://github.com/MicrosoftEdge/WebView2Feedback/issues/640)) +* Fixed a bug where WPF apps would crash when windows with WebView2 were closed. ([Issue #640](https://github.com/MicrosoftEdge/WebView2Feedback/issues/640)) -* Fixed a bug that produced simultaneous WebView creation failure. (Runtime-only) ([Issue #2703](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2703)) +* Fixed a bug that produced simultaneous WebView creation failure. (Runtime-only) ([Issue #2703](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2703)) -* Fixed print settings paper size to support dimensions as small as 0.01 inches. (Runtime-only) +* Fixed print settings paper size to support dimensions as small as 0.01 inches. (Runtime-only) -* Fixed a bug where the WebView2 print dialog reset the **Scale** setting to **Fit to printable area** every time. ([Issue #2523](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2523)) +* Fixed a bug where the WebView2 print dialog reset the **Scale** setting to **Fit to printable area** every time. ([Issue #2523](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2523)) -* Fixed a bug in the **wv2winrt** tool where a WinMD file wasn't referenced in some projects. +* Fixed a bug in the **wv2winrt** tool where a WinMD file wasn't referenced in some projects. @@ -7052,7 +7052,7 @@ The following Experimental APIs have been added in this Prerelease SDK. -* Added support for `WebResourceRequested` for workers which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different origin iframes. +* Added support for `WebResourceRequested` for workers which allows setting filters in order to receive `WebResourceRequested` events for service workers, shared workers, and different origin iframes. ##### [.NET/C#](#tab/dotnetcsharp) @@ -7074,7 +7074,7 @@ The following Experimental APIs have been added in this Prerelease SDK. --- -* Added support for custom scheme registration which allows WebView2 apps to be able to handle `WebResourceRequested` event for requests with the specified scheme and be able to navigate the WebView2 control to the custom scheme. +* Added support for custom scheme registration which allows WebView2 apps to be able to handle `WebResourceRequested` event for requests with the specified scheme and be able to navigate the WebView2 control to the custom scheme. ##### [.NET/C#](#tab/dotnetcsharp) @@ -7097,27 +7097,27 @@ The following Experimental APIs have been added in this Prerelease SDK. #### Bug fixes -* Added the ability for developers to explicitly specify the path from which to load the WebView2Loader.dll. ([Issue #767](https://github.com/MicrosoftEdge/WebView2Feedback/issues/767)) +* Added the ability for developers to explicitly specify the path from which to load the WebView2Loader.dll. ([Issue #767](https://github.com/MicrosoftEdge/WebView2Feedback/issues/767)) -* Added useful error messages when using `CallDevToolsProtocolMethod`. ([Issue #1609](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1609)) +* Added useful error messages when using `CallDevToolsProtocolMethod`. ([Issue #1609](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1609)) -* Fixed a bug in finding and loading the `WebView2Loader.dll` in some .NET apps. ([Issue #2372](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2372)) +* Fixed a bug in finding and loading the `WebView2Loader.dll` in some .NET apps. ([Issue #2372](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2372)) -* Fixed a bug where `DownloadStarting` event was not fired when retrying a download. ([Issue #2489](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2489)) +* Fixed a bug where `DownloadStarting` event was not fired when retrying a download. ([Issue #2489](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2489)) -* Fixed an issue in service worker caching if the path was too long. ([Issue #1900](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1900)) +* Fixed an issue in service worker caching if the path was too long. ([Issue #1900](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1900)) -* Improved performance for **wv2winrt** `IMap` and `IMapView` projections into JavaScript. +* Improved performance for **wv2winrt** `IMap` and `IMapView` projections into JavaScript. -* Adding support for HWND_MESSAGE to be used as WebView2 parent window to support headless scenarios. ([Issue #202](https://github.com/MicrosoftEdge/WebView2Feedback/issues/202)) +* Adding support for HWND_MESSAGE to be used as WebView2 parent window to support headless scenarios. ([Issue #202](https://github.com/MicrosoftEdge/WebView2Feedback/issues/202)) -* Improved handling of running as admin user apps. +* Improved handling of running as admin user apps. -* Fixed online/offline status and notifications when using WebView2 in UWP apps. +* Fixed online/offline status and notifications when using WebView2 in UWP apps. -* GDI scaling can now be enabled for WebView2. WebView2 will respect the GDI scaling setting of the hosting application without additional work needed from the app. ([Issue #1700](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1700)) +* GDI scaling can now be enabled for WebView2. WebView2 will respect the GDI scaling setting of the hosting application without additional work needed from the app. ([Issue #1700](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1700)) -* Fixed a bug where focus is not returned to the application after closing the find bar for windowed mode. ([Issue #1225](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1225)) +* Fixed a bug where focus is not returned to the application after closing the find bar for windowed mode. ([Issue #1225](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1225)) @@ -7161,7 +7161,7 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes -* Fixed an issue where `PrintToPdfAsync` may hang for long time. ([Issue #1974](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1974)) +* Fixed an issue where `PrintToPdfAsync` may hang for long time. ([Issue #1974](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1974)) ##### [.NET/C#](#tab/dotnetcsharp) @@ -7236,7 +7236,7 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* Added `ContextMenuRequested`API to enable host app to create or modify their own context menu. +* Added `ContextMenuRequested`API to enable host app to create or modify their own context menu. ##### [.NET/C#](#tab/dotnetcsharp) @@ -7321,28 +7321,28 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha * The [Server Certificate API](/microsoft-edge/webview2/reference/win32/icorewebview2_14?view=webview2-1.0.1245.22&preserve-view=true) which provides an option to trust the server's TLS certificate at the application level. It renders the page without prompting the user about TLS or providing the ability to cancel the web request. -* The [ClearBrowsingData API](/microsoft-edge/webview2/reference/win32/icorewebview2profile2?view=webview2-1.0.1245.22&preserve-view=true) which allows developers to programmatically clear specific data types for a duration: +* The [ClearBrowsingData API](/microsoft-edge/webview2/reference/win32/icorewebview2profile2?view=webview2-1.0.1245.22&preserve-view=true) which allows developers to programmatically clear specific data types for a duration: * `ClearBrowsingData` * `ClearBrowsingDataAll` * `ClearBrowsingDataInTimeRange` -* The [HttpStatusCode API](/microsoft-edge/webview2/reference/win32/icorewebview2navigationcompletedeventargs2?view=webview2-1.0.1245.22&preserve-view=true) which provides the HTTP status code for navigation requests in `NavigationCompleted` events. +* The [HttpStatusCode API](/microsoft-edge/webview2/reference/win32/icorewebview2navigationcompletedeventargs2?view=webview2-1.0.1245.22&preserve-view=true) which provides the HTTP status code for navigation requests in `NavigationCompleted` events. #### Bug fixes -* Fixed an issue with the on-screen keyboard in which the keyboard doesn't reappear after it's closed by clicking the **X** button. Also fixed an issue in which the keyboard gets dismissed when users switch from one edit control to another within WebView2. ([Issue #460](https://github.com/MicrosoftEdge/WebView2Feedback/issues/460)) +* Fixed an issue with the on-screen keyboard in which the keyboard doesn't reappear after it's closed by clicking the **X** button. Also fixed an issue in which the keyboard gets dismissed when users switch from one edit control to another within WebView2. ([Issue #460](https://github.com/MicrosoftEdge/WebView2Feedback/issues/460)) -* Fixed an issue when using a proxy from `AddHostObjectToScript` in script. If you call `setHostProperty` and it failed, you could have received an internal error message structure rather than a JavaScript Error object. +* Fixed an issue when using a proxy from `AddHostObjectToScript` in script. If you call `setHostProperty` and it failed, you could have received an internal error message structure rather than a JavaScript Error object. -* Fixed regression where WebView2 would steal focus from the app when the WebView2 was made visible. ([Issue #862](https://github.com/MicrosoftEdge/WebView2Feedback/issues/862)) +* Fixed regression where WebView2 would steal focus from the app when the WebView2 was made visible. ([Issue #862](https://github.com/MicrosoftEdge/WebView2Feedback/issues/862)) -* Fixed a bug that caused increased memory usage with `WebResourceRequested` events using large data. ([Issue #2171](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2171)) +* Fixed a bug that caused increased memory usage with `WebResourceRequested` events using large data. ([Issue #2171](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2171)) -* Fixed `StatusBarTextChanged` regression. The [StatusBarText API](/microsoft-edge/webview2/reference/win32/icorewebview2_12?view=webview2-1.0.1245.22&preserve-view=true) was made compatible with previous versions again. ([Issue #2414](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2414)) +* Fixed `StatusBarTextChanged` regression. The [StatusBarText API](/microsoft-edge/webview2/reference/win32/icorewebview2_12?view=webview2-1.0.1245.22&preserve-view=true) was made compatible with previous versions again. ([Issue #2414](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2414)) -* Better support for apps running as admin. ([Issue #2356](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2356)) +* Better support for apps running as admin. ([Issue #2356](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2356)) @@ -7475,7 +7475,7 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added [ContextMenuRequested API](/microsoft-edge/webview2/reference/win32/icorewebview2_11?view=webview2-1.0.1189-prerelease&preserve-view=true) to enable host app to create or modify their own context menu. +* Added [ContextMenuRequested API](/microsoft-edge/webview2/reference/win32/icorewebview2_11?view=webview2-1.0.1189-prerelease&preserve-view=true) to enable host app to create or modify their own context menu. @@ -7483,26 +7483,26 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* The [CallDevToolsProtocolMethodForSession API](/microsoft-edge/webview2/reference/win32/icorewebview2_11?view=webview2-1.0.1189-prerelease&preserve-view=true#calldevtoolsprotocolmethodforsession) that supports sessionId for CDP method calls. -* The [StatusBarText API](/microsoft-edge/webview2/reference/win32/icorewebview2_12?view=webview2-1.0.1189-prerelease&preserve-view=true): - * `add_StatusBarTextChanged` - * `get_StatusBarText` - * `remove_StatusBarTextChanged` -* The [AllowExternalDrop API](/microsoft-edge/webview2/reference/win32/icorewebview2controller4?view=webview2-1.0.1189-prerelease&preserve-view=true) that supports enable/disable external drop. -* The [HiddenPdfToolbarItems API](/microsoft-edge/webview2/reference/win32/icorewebview2settings7?view=webview2-1.0.1189-prerelease&preserve-view=true) is available to customize the PDF toolbar items. -* The [ExclusiveUserDataFolderAccess API](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions2?view=webview2-1.0.1189-prerelease&preserve-view=true) allows control of whether or not other processes can create WebView2 using the same user data folder. +* The [CallDevToolsProtocolMethodForSession API](/microsoft-edge/webview2/reference/win32/icorewebview2_11?view=webview2-1.0.1189-prerelease&preserve-view=true#calldevtoolsprotocolmethodforsession) that supports sessionId for CDP method calls. +* The [StatusBarText API](/microsoft-edge/webview2/reference/win32/icorewebview2_12?view=webview2-1.0.1189-prerelease&preserve-view=true): + * `add_StatusBarTextChanged` + * `get_StatusBarText` + * `remove_StatusBarTextChanged` +* The [AllowExternalDrop API](/microsoft-edge/webview2/reference/win32/icorewebview2controller4?view=webview2-1.0.1189-prerelease&preserve-view=true) that supports enable/disable external drop. +* The [HiddenPdfToolbarItems API](/microsoft-edge/webview2/reference/win32/icorewebview2settings7?view=webview2-1.0.1189-prerelease&preserve-view=true) is available to customize the PDF toolbar items. +* The [ExclusiveUserDataFolderAccess API](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions2?view=webview2-1.0.1189-prerelease&preserve-view=true) allows control of whether or not other processes can create WebView2 using the same user data folder. #### Bug fixes -* Fixed a bug where WebView2 app gets stuck occasionally with UWP. +* Fixed a bug where WebView2 app gets stuck occasionally with UWP. -* Fixed a bug where focus is not returned to the application after closing the **Find** bar for windowed mode. +* Fixed a bug where focus is not returned to the application after closing the **Find** bar for windowed mode. -* Fixed bug in which the `DocumentTitleChanged` event was not being raised for backward/forward navigation in single-page apps. +* Fixed bug in which the `DocumentTitleChanged` event was not being raised for backward/forward navigation in single-page apps. -* Fixed bug in which the `HistoryChanged` event was not being raised for Iframe navigation. +* Fixed bug in which the `HistoryChanged` event was not being raised for Iframe navigation. @@ -7531,9 +7531,9 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha * The [CallDevToolsProtocolMethodForSession API](/microsoft-edge/webview2/reference/win32/icorewebview2_11?view=webview2-1.0.1185.39&preserve-view=true#calldevtoolsprotocolmethodforsession) that supports `sessionId` for CDP method calls. * The [StatusBarText API](/microsoft-edge/webview2/reference/win32/icorewebview2_12?view=webview2-1.0.1185.39&preserve-view=true): - * `add_StatusBarTextChanged` - * `get_StatusBarText` - * `remove_StatusBarTextChanged` + * `add_StatusBarTextChanged` + * `get_StatusBarText` + * `remove_StatusBarTextChanged` * The [AllowExternalDrop API](/microsoft-edge/webview2/reference/win32/icorewebview2controller4?view=webview2-1.0.1185.39&preserve-view=true) that supports enable/disable for external drop operations. @@ -7563,9 +7563,9 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added [Status bar API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental13?view=webview2-1.0.1158-prerelease&preserve-view=true) to provide info when webiew is showing status message, URL, or empty string. +* Added [Status bar API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental13?view=webview2-1.0.1158-prerelease&preserve-view=true) to provide info when webiew is showing status message, URL, or empty string. -* Added [CDP API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental14?view=webview2-1.0.1158-prerelease&preserve-view=true) to provide possibility for developers have multiple `DevToolsProtocol` targets in WebView2. +* Added [CDP API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental14?view=webview2-1.0.1158-prerelease&preserve-view=true) to provide possibility for developers have multiple `DevToolsProtocol` targets in WebView2. @@ -7573,22 +7573,22 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* Rename ICoreWebView2ClientCertificate to [ICoreWebView2Certificate](/microsoft-edge/webview2/reference/win32/icorewebview2certificate?view=webview2-1.0.1158-prerelease&preserve-view=true). -* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2frame3?view=webview2-1.0.1158-prerelease&preserve-view=true): - * `add_PermissionRequested` - * `remove_PermissionRequested` +* Rename ICoreWebView2ClientCertificate to [ICoreWebView2Certificate](/microsoft-edge/webview2/reference/win32/icorewebview2certificate?view=webview2-1.0.1158-prerelease&preserve-view=true). +* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2frame3?view=webview2-1.0.1158-prerelease&preserve-view=true): + * `add_PermissionRequested` + * `remove_PermissionRequested` #### Bug fixes -* Fixed an issue causing erroneous warnings in the Visual Studio Error List window. ([Issue #1722](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1722)) +* Fixed an issue causing erroneous warnings in the Visual Studio Error List window. ([Issue #1722](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1722)) -* Fixed a bug where NewWindowRequested was not getting raised when opening PDF downloads. +* Fixed a bug where NewWindowRequested was not getting raised when opening PDF downloads. -* Resolved a bug in WinUI 3 where select dropdowns would not show up. ([Issue #1693](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1693)) +* Resolved a bug in WinUI 3 where select dropdowns would not show up. ([Issue #1693](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1693)) -* Added the ability to toggle WebView2 mute state, even when there is no audio playing. +* Added the ability to toggle WebView2 mute state, even when there is no audio playing. @@ -7608,7 +7608,7 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* The [BasicAuthentication API](/microsoft-edge/webview2/reference/win32/icorewebview2_10?view=webview2-1.0.1150.38&preserve-view=true) that enables developers to handle Basic HTTP Authentication request and response. +* The [BasicAuthentication API](/microsoft-edge/webview2/reference/win32/icorewebview2_10?view=webview2-1.0.1150.38&preserve-view=true) that enables developers to handle Basic HTTP Authentication request and response. @@ -7628,13 +7628,13 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added support for [theming](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile2?view=webview2-1.0.1133-prerelease&preserve-view=true) (overall color scheme - light, dark, system) of WebView2. +* Added support for [theming](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile2?view=webview2-1.0.1133-prerelease&preserve-view=true) (overall color scheme - light, dark, system) of WebView2. -* Added a way to set [default download path](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile3?view=webview2-1.0.1133-prerelease&preserve-view=true). +* Added a way to set [default download path](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile3?view=webview2-1.0.1133-prerelease&preserve-view=true). -* Added support for [clearing browser data](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4?view=webview2-1.0.1133-prerelease&preserve-view=true). +* Added support for [clearing browser data](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4?view=webview2-1.0.1133-prerelease&preserve-view=true). -* Added [permission requested](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe3?view=webview2-1.0.1133-prerelease&preserve-view=true) support for iframes. +* Added [permission requested](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe3?view=webview2-1.0.1133-prerelease&preserve-view=true) support for iframes. @@ -7642,35 +7642,35 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe2?view=webview2-1.0.1133-prerelease&preserve-view=true): - * `PostWebMessageAsJson` - * `PostWebMessageAsString` - * `add_WebMessageReceived` - * `remove_WebMessageReceived` -* The ProcessInfo APIs provides more information about WebView2 [processes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfo?view=webview2-1.0.1133-prerelease&preserve-view=true) and [process collections](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfocollection?view=webview2-1.0.1133-prerelease&preserve-view=true). -* The [HTTP Authentication API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental10?view=webview2-1.0.1133-prerelease&preserve-view=true). +* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe2?view=webview2-1.0.1133-prerelease&preserve-view=true): + * `PostWebMessageAsJson` + * `PostWebMessageAsString` + * `add_WebMessageReceived` + * `remove_WebMessageReceived` +* The ProcessInfo APIs provides more information about WebView2 [processes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfo?view=webview2-1.0.1133-prerelease&preserve-view=true) and [process collections](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfocollection?view=webview2-1.0.1133-prerelease&preserve-view=true). +* The [HTTP Authentication API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental10?view=webview2-1.0.1133-prerelease&preserve-view=true). #### Bug fixes -* Fixed a bug that prevented `Set-Cookies` header from showing up in the `WebResourceResponseReceived` event. +* Fixed a bug that prevented `Set-Cookies` header from showing up in the `WebResourceResponseReceived` event. -* Resolved a bug where pop-ups and owned windows would jump to a different position before closing instead of closing +* Resolved a bug where pop-ups and owned windows would jump to a different position before closing instead of closing along with the app window. This bug was only active for a very short window of time. -* Fixed focus issue after closing file picker dialog. +* Fixed focus issue after closing file picker dialog. -* Fixed bug where Find on Page UI visibility did not change with WebView2 visibility. +* Fixed bug where Find on Page UI visibility did not change with WebView2 visibility. -* Fixed bug where `GetAvailableBrowserVersionString()` fails to locate/load `WebView2Loader.dll`. ([Issue #1236](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1236)) +* Fixed bug where `GetAvailableBrowserVersionString()` fails to locate/load `WebView2Loader.dll`. ([Issue #1236](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1236)) -* Fixed size and position of the new window created with `window.open` when `NewWindowRequested` event was not +* Fixed size and position of the new window created with `window.open` when `NewWindowRequested` event was not handled. ([Issue #1343](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1343)) -* Fixed bug where mini menu was still displaying on selected text when context menus were disabled. This change is Runtime-specific. ([Issue #1345](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1345)) +* Fixed bug where mini menu was still displaying on selected text when context menus were disabled. This change is Runtime-specific. ([Issue #1345](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1345)) -* Fixed bug where focus returns to wrong location after switching apps in WinForms. +* Fixed bug where focus returns to wrong location after switching apps in WinForms. @@ -7690,24 +7690,24 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* The [AdditionalAllowedFrameAncestors API](/microsoft-edge/webview2/reference/win32/icorewebview2navigationstartingeventargs2?view=webview2-1.0.1108.44&preserve-view=true) that enable developers to provide additional allowed frame ancestors. - -* The [ProcessInfo APIs](/microsoft-edge/webview2/reference/win32/icorewebview2processinfo?view=webview2-1.0.1108.44&preserve-view=true) provide more information about WebView2 processes and process collections. - -* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2frame2?view=webview2-1.0.1108.44&preserve-view=true): - * `add_NavigationStarting` - * `remove_NavigationStarting` - * `add_ContentLoading` - * `remove_ContentLoading` - * `add_NavigationCompleted` - * `remove_NavigationCompleted` - * `add_DOMContentLoaded` - * `remove_DOMContentLoaded` - * `ExecuteScript` - * `PostWebMessageAsJson` - * `PostWebMessageAsString` - * `add_WebMessageReceived` - * `remove_WebMessageReceived` +* The [AdditionalAllowedFrameAncestors API](/microsoft-edge/webview2/reference/win32/icorewebview2navigationstartingeventargs2?view=webview2-1.0.1108.44&preserve-view=true) that enable developers to provide additional allowed frame ancestors. + +* The [ProcessInfo APIs](/microsoft-edge/webview2/reference/win32/icorewebview2processinfo?view=webview2-1.0.1108.44&preserve-view=true) provide more information about WebView2 processes and process collections. + +* New [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2frame2?view=webview2-1.0.1108.44&preserve-view=true): + * `add_NavigationStarting` + * `remove_NavigationStarting` + * `add_ContentLoading` + * `remove_ContentLoading` + * `add_NavigationCompleted` + * `remove_NavigationCompleted` + * `add_DOMContentLoaded` + * `remove_DOMContentLoaded` + * `ExecuteScript` + * `PostWebMessageAsJson` + * `PostWebMessageAsString` + * `add_WebMessageReceived` + * `remove_WebMessageReceived` @@ -7728,10 +7728,10 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. * Added the following [APIs for iframes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe2?view=webview2-1.0.1083-prerelease&preserve-view=true) in WebView2: - * `PostWebMessageAsJson` - * `PostWebMessageAsString` - * `add_WebMessageReceived` - * `remove_WebMessageReceived` + * `PostWebMessageAsJson` + * `PostWebMessageAsString` + * `add_WebMessageReceived` + * `remove_WebMessageReceived` * Added ProcessInfo APIs to provide more information about WebView2 [processes](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfo?view=webview2-1.0.1083-prerelease&preserve-view=true) and [process collections](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprocessinfocollection?view=webview2-1.0.1083-prerelease&preserve-view=true). @@ -7741,27 +7741,27 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* The [Media API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental9?view=webview2-1.0.1083-prerelease&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. -* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental11?view=webview2-1.0.1083-prerelease&preserve-view=true). This API enables: - * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. - * Programmatically opening and closing the default download dialog. - * Making changes in response to the dialog opening and closing. +* The [Media API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental9?view=webview2-1.0.1083-prerelease&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. +* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental11?view=webview2-1.0.1083-prerelease&preserve-view=true). This API enables: + * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. + * Programmatically opening and closing the default download dialog. + * Making changes in response to the dialog opening and closing. #### Bug fixes -* Fixed a focus issue after closing the file picker dialog. +* Fixed a focus issue after closing the file picker dialog. -* Fixed a bug where WebView2 doesn't receive spatial input on initial launch. +* Fixed a bug where WebView2 doesn't receive spatial input on initial launch. -* Fixed an issue that prevented single sign-on in WebView2. +* Fixed an issue that prevented single sign-on in WebView2. -* Resolved a bug where the download dialog was not moving with the window on WPF and WinForms. +* Resolved a bug where the download dialog was not moving with the window on WPF and WinForms. -* Updated compatible command line check to prevent needing a version check for optional switches. +* Updated compatible command line check to prevent needing a version check for optional switches. -* Fixed an error that was causing "Microsoft Edge" branding to appear in the accessibility tree. +* Fixed an error that was causing "Microsoft Edge" branding to appear in the accessibility tree. @@ -7781,12 +7781,12 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* The [Media API](/microsoft-edge/webview2/reference/win32/icorewebview2_8?view=webview2-1.0.1072.54&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. +* The [Media API](/microsoft-edge/webview2/reference/win32/icorewebview2_8?view=webview2-1.0.1072.54&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. -* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2_9?view=webview2-1.0.1072.54&preserve-view=true) enables: - * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. - * Programmatically open and close the default download dialog. - * Making changes in response to the dialog opening and closing. +* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2_9?view=webview2-1.0.1072.54&preserve-view=true) enables: + * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. + * Programmatically open and close the default download dialog. + * Making changes in response to the dialog opening and closing. @@ -7808,28 +7808,28 @@ The following Experimental APIs have been added in this Prerelease SDK. -* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental11?view=webview2-1.0.1056-prerelease&preserve-view=true). This API enables: - * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. - * Programmatically opening and closing the default download dialog. - * Making changes in response to the dialog opening and closing. +* The [Download Positioning and Anchoring API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental11?view=webview2-1.0.1056-prerelease&preserve-view=true). This API enables: + * Changing the position of the download dialog, relative to the WebView2 bounds. You can anchor the download dialog to the **Download** button, instead of the default position, which is the top-right corner. + * Programmatically opening and closing the default download dialog. + * Making changes in response to the dialog opening and closing. -* The [HTTP Authentication API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental10?view=webview2-1.0.1056-prerelease&preserve-view=true). +* The [HTTP Authentication API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental10?view=webview2-1.0.1056-prerelease&preserve-view=true). #### Bug fixes -* General reliability improvements. +* General reliability improvements. -* The real process exit code is now provided as `ExitCode` in `ICoreWebView2ProcessFailedEventArgs2` for `COREWEBVIEW2_PROCESS_FAILED_KIND_BROWSER_PROCESS_EXITED` process failure. +* The real process exit code is now provided as `ExitCode` in `ICoreWebView2ProcessFailedEventArgs2` for `COREWEBVIEW2_PROCESS_FAILED_KIND_BROWSER_PROCESS_EXITED` process failure. -* The `--js-flags` switch is now honored in the `AdditionalBrowserArguments` that are provided in `CoreWebView2EnvironmentOptions`. +* The `--js-flags` switch is now honored in the `AdditionalBrowserArguments` that are provided in `CoreWebView2EnvironmentOptions`. -* Fixed access to the `name` property for host objects in JavaScript. ([Issue #641](https://github.com/MicrosoftEdge/WebView2Feedback/issues/641)) +* Fixed access to the `name` property for host objects in JavaScript. ([Issue #641](https://github.com/MicrosoftEdge/WebView2Feedback/issues/641)) -* Fixed an `InvalidCastException` in the WPF control when it's implicitly initialized prior to the event loop starting. ([Issue #1577](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1577)) +* Fixed an `InvalidCastException` in the WPF control when it's implicitly initialized prior to the event loop starting. ([Issue #1577](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1577)) @@ -7847,15 +7847,15 @@ For full API compatibility, this Release version of the WebView2 SDK requires We #### Bug fixes -* General reliability fixes. +* General reliability fixes. -* Turned off the Control-flow Enforcement Technology (CET) Shadow Stack feature for v96 WebView2 Runtime. +* Turned off the Control-flow Enforcement Technology (CET) Shadow Stack feature for v96 WebView2 Runtime. -* Fixed an issue that was causing slow startup times when launching in a .NET single-file application. ([Issue #1909](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1909)) +* Fixed an issue that was causing slow startup times when launching in a .NET single-file application. ([Issue #1909](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1909)) -* Fixed a crash caused by Microsoft Edge browser policies getting incorrectly applied to WebView2 as well. ([Issue #1860](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1860)) +* Fixed a crash caused by Microsoft Edge browser policies getting incorrectly applied to WebView2 as well. ([Issue #1860](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1860)) -* Fixed a crash that occurred when a pop-up window with a download dialog was closed. ([Issue #1765](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1765)) & ([Issue #1723](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1723)) +* Fixed a crash that occurred when a pop-up window with a download dialog was closed. ([Issue #1765](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1765)) & ([Issue #1723](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1723)) @@ -7875,15 +7875,15 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* [PrintToPdf API](/microsoft-edge/webview2/reference/win32/icorewebview2_7?view=webview2-1.0.1020.30&preserve-view=true#printtopdf). +* [PrintToPdf API](/microsoft-edge/webview2/reference/win32/icorewebview2_7?view=webview2-1.0.1020.30&preserve-view=true#printtopdf). #### Bug fixes -* Updated `EnsureCoreWebView2Async` to not throw exceptions when the WPF source property is set. ([Issue #1781](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1781)) +* Updated `EnsureCoreWebView2Async` to not throw exceptions when the WPF source property is set. ([Issue #1781](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1781)) -* Fixed a bug where WebView2 crashes after interacting with multiple windows that show a download UI. ([Issue #1723](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1723)) +* Fixed a bug where WebView2 crashes after interacting with multiple windows that show a download UI. ([Issue #1723](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1723)) @@ -7903,19 +7903,19 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added a [media API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental9?view=webview2-1.0.1018-prerelease&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. +* Added a [media API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental9?view=webview2-1.0.1018-prerelease&preserve-view=true#summary) that enables developers to mute/unmute media within WebView2. -* Added support for [multiple user profiles](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment8?view=webview2-1.0.1018-prerelease&preserve-view=true) with WebView2. +* Added support for [multiple user profiles](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment8?view=webview2-1.0.1018-prerelease&preserve-view=true) with WebView2. #### Bug fixes -* Fixed a bug where WebView2 stops rendering when the app is spanning monitors and the monitor scale changes. +* Fixed a bug where WebView2 stops rendering when the app is spanning monitors and the monitor scale changes. -* Fixed a bug where closing the download UI crashes WebView2 when multiple download windows are open. ([Issue #1723](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1723)) +* Fixed a bug where closing the download UI crashes WebView2 when multiple download windows are open. ([Issue #1723](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1723)) -* Fixed a build/initialization error when PlatformTarget isn't set in the user's .NET project. ([Issue #730](https://github.com/MicrosoftEdge/WebViewFeedback/issues/730) and [Issue #1548](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1548)) +* Fixed a build/initialization error when PlatformTarget isn't set in the user's .NET project. ([Issue #730](https://github.com/MicrosoftEdge/WebViewFeedback/issues/730) and [Issue #1548](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1548)) @@ -7933,9 +7933,9 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires #### General features -* WebView2 performance improvements. -* Reliability fixes. ([Issue #1605](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1605) and [Issue #1678](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1678)) -* Added performance improvements during startup and when the host app is in the foreground. +* WebView2 performance improvements. +* Reliability fixes. ([Issue #1605](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1605) and [Issue #1678](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1678)) +* Added performance improvements during startup and when the host app is in the foreground. @@ -7943,25 +7943,25 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Removed silent failures by using `EnsureCoreWebView2Async`, which throws an `ArgumentException` when called multiple times with incompatible parameters. +* Removed silent failures by using `EnsureCoreWebView2Async`, which throws an `ArgumentException` when called multiple times with incompatible parameters. -* Changed default handling of the [UserDataFolder](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment5?view=webview2-1.0.1010-prerelease&preserve-view=true#get_userdatafolder) property in the environment object. +* Changed default handling of the [UserDataFolder](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment5?view=webview2-1.0.1010-prerelease&preserve-view=true#get_userdatafolder) property in the environment object. > [!CAUTION] > **Breaking Change**: The default handling for the user data folder, if the developer doesn't specify where to put it, will be changing. See [Announcement: User directory folder default handling updates](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1410). -* Added [navigation & script APIs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe?view=webview2-1.0.1010-prerelease&preserve-view=true) for iframes. +* Added [navigation & script APIs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe?view=webview2-1.0.1010-prerelease&preserve-view=true) for iframes. -* Added [MemoryUsageTargetLevel](/microsoft-edge/webview2/reference/win32/icorewebview2experimental5?view=webview2-1.0.1010-prerelease&preserve-view=true) which allows developers to specify memory consumption levels, such as low, or normal. +* Added [MemoryUsageTargetLevel](/microsoft-edge/webview2/reference/win32/icorewebview2experimental5?view=webview2-1.0.1010-prerelease&preserve-view=true) which allows developers to specify memory consumption levels, such as low, or normal. -* Added [ExclusiveUserDataFolderAccess](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions?view=webview2-1.0.1010-prerelease&preserve-view=true) to environment options. +* Added [ExclusiveUserDataFolderAccess](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions?view=webview2-1.0.1010-prerelease&preserve-view=true) to environment options. -* Added [HiddenPdfToolbarItems](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings6?view=webview2-1.0.1010-prerelease&preserve-view=true) to customize PDF toolbar items. +* Added [HiddenPdfToolbarItems](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings6?view=webview2-1.0.1010-prerelease&preserve-view=true) to customize PDF toolbar items. -* Added [PrintToPdf](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprinttopdfcompletedhandler?view=webview2-1.0.1010-prerelease&preserve-view=true), which allows printing the current page to PDF. Also, you can use optional custom settings with this new API. -* Added [AllowExternalDrop](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller3?view=webview2-1.0.1010-prerelease&preserve-view=true) property to allow the dragging and dropping of objects from outside a WebView2 control into it. +* Added [PrintToPdf](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprinttopdfcompletedhandler?view=webview2-1.0.1010-prerelease&preserve-view=true), which allows printing the current page to PDF. Also, you can use optional custom settings with this new API. +* Added [AllowExternalDrop](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller3?view=webview2-1.0.1010-prerelease&preserve-view=true) property to allow the dragging and dropping of objects from outside a WebView2 control into it. -* Added [ContextMenu APIs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontextmenuitem?view=webview2-1.0.1010-prerelease&preserve-view=true) which allow customization of the WebView2 context menu. +* Added [ContextMenu APIs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontextmenuitem?view=webview2-1.0.1010-prerelease&preserve-view=true) which allow customization of the WebView2 context menu. @@ -7969,31 +7969,31 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* `IsSwipeNavigationEnabled` -* `BrowserProcessExited` -* `OpenBrowserTaskManager` +* `IsSwipeNavigationEnabled` +* `BrowserProcessExited` +* `OpenBrowserTaskManager` #### Bug fixes -* Improved how host objects exceptions are caught in your JavaScript code. +* Improved how host objects exceptions are caught in your JavaScript code. -* Replaced WebView2 icon with a generic icon in DevTools windows. +* Replaced WebView2 icon with a generic icon in DevTools windows. -* Turn on the Tab screen sharing option when `MediaDevices.getDisplayMedia()` is used. ([Issue #1566](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1566)) +* Turn on the Tab screen sharing option when `MediaDevices.getDisplayMedia()` is used. ([Issue #1566](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1566)) -* Fixed a bug in the Client Certificate API, when the correct certificate was not selected. This is a Runtime change. ([Issue #1666](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1666)) +* Fixed a bug in the Client Certificate API, when the correct certificate was not selected. This is a Runtime change. ([Issue #1666](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1666)) -* Fixed bug where `window.chrome.webview` was unavailable in new windows in the same parent domain. This change is Runtime-specific. ([Issue #1144](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1144)) +* Fixed bug where `window.chrome.webview` was unavailable in new windows in the same parent domain. This change is Runtime-specific. ([Issue #1144](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1144)) -* Fixed a bug where dropdown menus or lists were displayed behind the window that has focus. ([Issue #411](https://github.com/MicrosoftEdge/WebViewFeedback/issues/411)) +* Fixed a bug where dropdown menus or lists were displayed behind the window that has focus. ([Issue #411](https://github.com/MicrosoftEdge/WebViewFeedback/issues/411)) -* Fixed focus issues when using `put_IsVisible(false)`. ([Issue #238](https://github.com/MicrosoftEdge/WebViewFeedback/issues/238)) +* Fixed focus issues when using `put_IsVisible(false)`. ([Issue #238](https://github.com/MicrosoftEdge/WebViewFeedback/issues/238)) -* Fixed a bug to apply `SetVirtualHostNameToFolderMapping` to pop-up windows. +* Fixed a bug to apply `SetVirtualHostNameToFolderMapping` to pop-up windows. -* Fixed bugs where an `IDispatch` objects were returned as `IUnknown`. +* Fixed bugs where an `IDispatch` objects were returned as `IUnknown`. @@ -8013,16 +8013,16 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* [OpenTaskManagerWindow API](/microsoft-edge/webview2/reference/win32/icorewebview2_6?view=webview2-1.0.992.28&preserve-view=true#summary). -* [isSwipeNavigationEnabled property](/microsoft-edge/webview2/reference/win32/icorewebview2settings6?view=webview2-1.0.992.28&preserve-view=true#summary). -* [BrowserProcessExited API](/microsoft-edge/webview2/reference/win32/icorewebview2browserprocessexitedeventargs?view=webview2-1.0.992.28&preserve-view=true#summary). -* [get_Name property](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs2?view=webview2-1.0.992.28#get_name&preserve-view=true#summary) on `ICoreWebView2NewWindowRequestedEventArgs2` interface. +* [OpenTaskManagerWindow API](/microsoft-edge/webview2/reference/win32/icorewebview2_6?view=webview2-1.0.992.28&preserve-view=true#summary). +* [isSwipeNavigationEnabled property](/microsoft-edge/webview2/reference/win32/icorewebview2settings6?view=webview2-1.0.992.28&preserve-view=true#summary). +* [BrowserProcessExited API](/microsoft-edge/webview2/reference/win32/icorewebview2browserprocessexitedeventargs?view=webview2-1.0.992.28&preserve-view=true#summary). +* [get_Name property](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs2?view=webview2-1.0.992.28#get_name&preserve-view=true#summary) on `ICoreWebView2NewWindowRequestedEventArgs2` interface. #### Bug fixes -* Fixed missing WebView2 DLLs (which led to initialization failure) when `PlatformTarget` isn't set in the user's .NET project. ([Issue #1061](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1061)) +* Fixed missing WebView2 DLLs (which led to initialization failure) when `PlatformTarget` isn't set in the user's .NET project. ([Issue #1061](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1061)) @@ -8042,23 +8042,23 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* [Client Certificate API](/microsoft-edge/webview2/reference/win32/icorewebview2_5?view=webview2-1.0.961.33&preserve-view=true#add_clientcertificaterequested). +* [Client Certificate API](/microsoft-edge/webview2/reference/win32/icorewebview2_5?view=webview2-1.0.961.33&preserve-view=true#add_clientcertificaterequested). #### Bug fixes -* Fixed a bug that caused `ERR_SSL_CLIENT_AUTH_CERT_NEEDED` errors. This is a Runtime change. +* Fixed a bug that caused `ERR_SSL_CLIENT_AUTH_CERT_NEEDED` errors. This is a Runtime change. -* Fixed a bug that special browser keys like **Refresh**, **Home**, **Back**, and so on can't be turned off using `AreBrowserAcceleratorKeysEnabled`. This change is Runtime-specific. +* Fixed a bug that special browser keys like **Refresh**, **Home**, **Back**, and so on can't be turned off using `AreBrowserAcceleratorKeysEnabled`. This change is Runtime-specific. -* Fixed a bug where the transparent background color isn't rendered. +* Fixed a bug where the transparent background color isn't rendered. -* Fixed a bug that caused a white flicker when loading WebView2. +* Fixed a bug that caused a white flicker when loading WebView2. -* Fixed a bug in WebView2 .NET controls where WebView2 windows were blank when created in the background. ([Issue #1077](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1077)) +* Fixed a bug in WebView2 .NET controls where WebView2 windows were blank when created in the background. ([Issue #1077](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1077)) -* Fixed a bug where settings were not updated when the user navigated to or a new window displayed `about:blank` pages. This is a Runtime change. +* Fixed a bug where settings were not updated when the user navigated to or a new window displayed `about:blank` pages. This is a Runtime change. @@ -8076,22 +8076,22 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires #### General features -* WebView2 performance improvements. -* Added partial Event Tracing for Windows (ETW) support. -* Removed Microsoft branding from `edge://history`. -* New default Download UI. +* WebView2 performance improvements. +* Added partial Event Tracing for Windows (ETW) support. +* Removed Microsoft branding from `edge://history`. +* New default Download UI. #### Experimental APIs (Phase 1: Experimental in Prerelease) -* Added [OpenTaskManagerWindow](/microsoft-edge/webview2/reference/win32/icorewebview2experimental4?view=webview2-1.0.955-prerelease&preserve-view=true#opentaskmanagerwindow) to launch a WebView2 browser task manager. +* Added [OpenTaskManagerWindow](/microsoft-edge/webview2/reference/win32/icorewebview2experimental4?view=webview2-1.0.955-prerelease&preserve-view=true#opentaskmanagerwindow) to launch a WebView2 browser task manager. -* Added [NewWindowRequestedEventArgs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalnewwindowrequestedeventargs?view=webview2-1.0.955-prerelease&preserve-view=true#get_name). +* Added [NewWindowRequestedEventArgs](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalnewwindowrequestedeventargs?view=webview2-1.0.955-prerelease&preserve-view=true#get_name). -* Added support for virtual host name mapping to work with service workers. +* Added support for virtual host name mapping to work with service workers. -* Added [HiddenPdfToolbarItems](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings6?view=webview2-1.0.955-prerelease&preserve-view=true#get_hiddenpdftoolbaritems) to customize the PDF toolbar items. +* Added [HiddenPdfToolbarItems](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings6?view=webview2-1.0.955-prerelease&preserve-view=true#get_hiddenpdftoolbaritems) to customize the PDF toolbar items. @@ -8099,31 +8099,31 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* [add_ClientCertificateRequested](/microsoft-edge/webview2/reference/win32/icorewebview2_5?view=webview2-1.0.955-prerelease&preserve-view=true#add_clientcertificaterequested) +* [add_ClientCertificateRequested](/microsoft-edge/webview2/reference/win32/icorewebview2_5?view=webview2-1.0.955-prerelease&preserve-view=true#add_clientcertificaterequested) #### Bug fixes -* Fixed bug that broke the `edge://downloads` and `edge://history` pages. This change is Runtime-specific. +* Fixed bug that broke the `edge://downloads` and `edge://history` pages. This change is Runtime-specific. -* Fixed bugs to improve reliability in the WebView2Loader.dll. +* Fixed bugs to improve reliability in the WebView2Loader.dll. -* Fixed bug in which `NewWindowRequested` event handler launched two windows when handling links that use `target=_blank`. +* Fixed bug in which `NewWindowRequested` event handler launched two windows when handling links that use `target=_blank`. -* Fixed a bug in WebView2 visual hosting that flickered before startup. +* Fixed a bug in WebView2 visual hosting that flickered before startup. -* Fixed bug when `add_WebResourceRequested` didn't work on WebView2 controls created using `add_NewWindowRequested`. ([Issue #616](https://github.com/MicrosoftEdge/WebViewFeedback/issues/616)) +* Fixed bug when `add_WebResourceRequested` didn't work on WebView2 controls created using `add_NewWindowRequested`. ([Issue #616](https://github.com/MicrosoftEdge/WebViewFeedback/issues/616)) -* Allow the host app to set foreground on a different application in response to events including `NavigationStarting`, `AddHostObjectToScript` methods, `WebMessageReceived`, and `NewWindowRequested`. ([Issue #1092](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1092)) +* Allow the host app to set foreground on a different application in response to events including `NavigationStarting`, `AddHostObjectToScript` methods, `WebMessageReceived`, and `NewWindowRequested`. ([Issue #1092](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1092)) -* Fix bug to trigger the `PermissionRequested` event for the microphone. This change is Runtime-specific.([Issue #1462](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1462)) +* Fix bug to trigger the `PermissionRequested` event for the microphone. This change is Runtime-specific.([Issue #1462](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1462)) -* Fixed bug when `ExecuteScriptAsync` blocked after several successful runs. This change is Runtime-specific. ([Issue #1348](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1348)) +* Fixed bug when `ExecuteScriptAsync` blocked after several successful runs. This change is Runtime-specific. ([Issue #1348](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1348)) -* Fixed bug preventing non-ASCII file names from being used in `ResultFilePath` in `DownloadStartingEventArgs`. ([Issue #1428](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1428)) +* Fixed bug preventing non-ASCII file names from being used in `ResultFilePath` in `DownloadStartingEventArgs`. ([Issue #1428](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1428)) -* Fixed bug where the title bar on the default pop-up wasn't displayed completely. This change is Runtime-specific. ([Issue #1016](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1016)) +* Fixed bug where the title bar on the default pop-up wasn't displayed completely. This change is Runtime-specific. ([Issue #1016](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1016)) @@ -8133,11 +8133,11 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, ###### Bug fixes -* Fixed an issue in WebView2 .NET API reference documentation that caused only the first exception to be displayed. +* Fixed an issue in WebView2 .NET API reference documentation that caused only the first exception to be displayed. -* .NET core libraries are now built in release mode. To debug, ensure you clear the **Just my code** checkbox. +* .NET core libraries are now built in release mode. To debug, ensure you clear the **Just my code** checkbox. -* Fixed a bug that crashed WebView2 on forms with child forms. The child form, with the find in page bar open, caused WebView2 to crash when the child form was closed. ([Issue #1097](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1097)) +* Fixed a bug that crashed WebView2 on forms with child forms. The child form, with the find in page bar open, caused WebView2 to crash when the child form was closed. ([Issue #1097](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1097)) @@ -8157,25 +8157,25 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* [add_FrameCreated](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902.49&preserve-view=true#add_framecreated). -* [get_IsGeneralAutofillEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings4?view=webview2-1.0.902.49&preserve-view=true#get_isgeneralautofillenabled). -* [get_IsPinchZoomEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings5?view=webview2-1.0.902.49&preserve-view=true#get_ispinchzoomenabled). -* [The Download APIs](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_downloadstarting). -* [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2frame?view=webview2-1.0.902-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins) API with iframe element support. +* [add_FrameCreated](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902.49&preserve-view=true#add_framecreated). +* [get_IsGeneralAutofillEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings4?view=webview2-1.0.902.49&preserve-view=true#get_isgeneralautofillenabled). +* [get_IsPinchZoomEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings5?view=webview2-1.0.902.49&preserve-view=true#get_ispinchzoomenabled). +* [The Download APIs](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_downloadstarting). +* [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2frame?view=webview2-1.0.902-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins) API with iframe element support. #### Bug fixes -* Fix bug that broke the `IsBuiltInErrorPageEnabled` property, which turned off the error page that's displayed when there's a navigation failure or render process failure. This change is Runtime-specific. ([Issue #634](https://github.com/MicrosoftEdge/WebViewFeedback/issues/634)) +* Fix bug that broke the `IsBuiltInErrorPageEnabled` property, which turned off the error page that's displayed when there's a navigation failure or render process failure. This change is Runtime-specific. ([Issue #634](https://github.com/MicrosoftEdge/WebViewFeedback/issues/634)) -* Fixed an issue where WebView2 controls took focus away from the user's focus. +* Fixed an issue where WebView2 controls took focus away from the user's focus. -* Fixed bug when `AddScriptToExecuteOnDocumentCreated` didn't work on child windows. ([Issue #935](https://github.com/MicrosoftEdge/WebViewFeedback/issues/935)) +* Fixed bug when `AddScriptToExecuteOnDocumentCreated` didn't work on child windows. ([Issue #935](https://github.com/MicrosoftEdge/WebViewFeedback/issues/935)) -* Fixed a bug that caused inactive tabs to be automatically discarded. ([Issue #637](https://github.com/MicrosoftEdge/WebViewFeedback/issues/637)) +* Fixed a bug that caused inactive tabs to be automatically discarded. ([Issue #637](https://github.com/MicrosoftEdge/WebViewFeedback/issues/637)) -* Fixed a bug when a navigation event was interrupted by another navigation event resulting in the Navigation ID of `NavigationCompleted` events to be incorrect. ([Issue #1142](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1142)) +* Fixed a bug when a navigation event was interrupted by another navigation event resulting in the Navigation ID of `NavigationCompleted` events to be incorrect. ([Issue #1142](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1142)) @@ -8193,7 +8193,7 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires #### General features -* Improved WebView2 startup performance and disk footprint. +* Improved WebView2 startup performance and disk footprint. @@ -8201,11 +8201,11 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added [IsSwipeNavigationEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings5?view=webview2-1.0.902-prerelease&preserve-view=true#get_isswipenavigationenabled) property to enable or disable the ability of the end user to use swiping gesture on touch input-enabled devices to navigate in WebView2. +* Added [IsSwipeNavigationEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings5?view=webview2-1.0.902-prerelease&preserve-view=true#get_isswipenavigationenabled) property to enable or disable the ability of the end user to use swiping gesture on touch input-enabled devices to navigate in WebView2. -* Added [BrowserProcessExited](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment4?view=webview2-1.0.902-prerelease&preserve-view=true#add_browserprocessexited) event. +* Added [BrowserProcessExited](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment4?view=webview2-1.0.902-prerelease&preserve-view=true#add_browserprocessexited) event. -* Added [add_ClientCertificateRequested API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental3?view=webview2-1.0.902-prerelease&preserve-view=true#add_clientcertificaterequested). It allows showing a client certificate dialog prompt if desired and enables access to required metadata to replace default client certificate dialog prompt. +* Added [add_ClientCertificateRequested API](/microsoft-edge/webview2/reference/win32/icorewebview2experimental3?view=webview2-1.0.902-prerelease&preserve-view=true#add_clientcertificaterequested). It allows showing a client certificate dialog prompt if desired and enables access to required metadata to replace default client certificate dialog prompt. @@ -8213,11 +8213,11 @@ The following Experimental APIs have been added in this Prerelease SDK. The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* [Download API](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_downloadstarting). -* [PinchZoom API](/microsoft-edge/webview2/reference/win32/icorewebview2settings5?view=webview2-1.0.902-prerelease&preserve-view=true#get_ispinchzoomenabled). -* [AddFrameCreated](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_framecreated). -* [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2frame?view=webview2-1.0.902-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins) API promoted to Stable with iframe element support. -* [Autofill API](/microsoft-edge/webview2/reference/win32/icorewebview2settings4?view=webview2-1.0.902-prerelease&preserve-view=true#get_isgeneralautofillenabled). +* [Download API](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_downloadstarting). +* [PinchZoom API](/microsoft-edge/webview2/reference/win32/icorewebview2settings5?view=webview2-1.0.902-prerelease&preserve-view=true#get_ispinchzoomenabled). +* [AddFrameCreated](/microsoft-edge/webview2/reference/win32/icorewebview2_4?view=webview2-1.0.902-prerelease&preserve-view=true#add_framecreated). +* [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2frame?view=webview2-1.0.902-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins) API promoted to Stable with iframe element support. +* [Autofill API](/microsoft-edge/webview2/reference/win32/icorewebview2settings4?view=webview2-1.0.902-prerelease&preserve-view=true#get_isgeneralautofillenabled). > [!NOTE] > There is no current API to delete the locally stored general autofill and password autosave information. Please provide a control to delete the data, which will involve deleting the entire user data folder. @@ -8225,31 +8225,31 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, #### Bug fixes -* Fix a bug where mouse left click doesn't dismiss context menu. This change is Runtime-specific. +* Fix a bug where mouse left click doesn't dismiss context menu. This change is Runtime-specific. -* Fixed a bug where WebView2 creation fails when exe files for apps sharing the same user data folder have inconsistent version info. +* Fixed a bug where WebView2 creation fails when exe files for apps sharing the same user data folder have inconsistent version info. -* Fixed a bug where special browser keys such as `Refresh`, `Home`, and `Back` can't be disabled by `AreBrowserAcceleratorKeysEnabled`. This change is Runtime-specific. +* Fixed a bug where special browser keys such as `Refresh`, `Home`, and `Back` can't be disabled by `AreBrowserAcceleratorKeysEnabled`. This change is Runtime-specific. -* Fixed a bug in WebView2 .NET controls, where WebView2 windows are blank when created in the background. ([Issue #1077](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1077)) +* Fixed a bug in WebView2 .NET controls, where WebView2 windows are blank when created in the background. ([Issue #1077](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1077)) -* Dismissing a file picker dialog by pressing **Enter** or **Esc** no longer crashes WPF applications using WebView2 control. ([Issue #1099](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1099)) +* Dismissing a file picker dialog by pressing **Enter** or **Esc** no longer crashes WPF applications using WebView2 control. ([Issue #1099](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1099)) -* Fixed a bug that [AllowSingleSignOnUsingOSPrimaryAccount](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions#get_allowsinglesignonusingosprimaryaccount) doesn't work properly with WebView2 when a `WebResourceRequested` event handler is attached. This change is Runtime-specific. ([Issue #1183](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1183)) +* Fixed a bug that [AllowSingleSignOnUsingOSPrimaryAccount](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions#get_allowsinglesignonusingosprimaryaccount) doesn't work properly with WebView2 when a `WebResourceRequested` event handler is attached. This change is Runtime-specific. ([Issue #1183](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1183)) -* Downloading a file no longer breaks WebView2 `DefaultBackgroundColor` transparency. This change is Runtime-specific. ([Issue #1108](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1108)) +* Downloading a file no longer breaks WebView2 `DefaultBackgroundColor` transparency. This change is Runtime-specific. ([Issue #1108](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1108)) -* Removed screen sharing media picker message that contains Microsoft branding. ([Issue #940](https://github.com/MicrosoftEdge/WebViewFeedback/issues/940)) +* Removed screen sharing media picker message that contains Microsoft branding. ([Issue #940](https://github.com/MicrosoftEdge/WebViewFeedback/issues/940)) -* Fixed a bug in WebView2 WinForm control where hiding the parent form doesn't hide the WebView2 control. ([Issue #828](https://github.com/MicrosoftEdge/WebViewFeedback/issues/828) and [Issue #1079](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1079)) +* Fixed a bug in WebView2 WinForm control where hiding the parent form doesn't hide the WebView2 control. ([Issue #828](https://github.com/MicrosoftEdge/WebViewFeedback/issues/828) and [Issue #1079](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1079)) -* Added static WS_CLIPCHILDREN style to WebView2's WPF windows. ([Issue #1013](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1013)). +* Added static WS_CLIPCHILDREN style to WebView2's WPF windows. ([Issue #1013](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1013)). -* Fixed a bug where right-clicking a link crashes the WebView2 host app. This change is Runtime-specific. +* Fixed a bug where right-clicking a link crashes the WebView2 host app. This change is Runtime-specific. -* Fixed a reliability bug that could crash the host app process when moving to a newer Edge WebView2 Runtime version. +* Fixed a reliability bug that could crash the host app process when moving to a newer Edge WebView2 Runtime version. -* **DEPRECATION**: Officially deprecated the `DefaultBackgroundColor` API for Windows 7. +* **DEPRECATION**: Officially deprecated the `DefaultBackgroundColor` API for Windows 7. @@ -8259,9 +8259,9 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, ###### Bug fixes -* Fixed a bug in WebView2 WinForm control where WebView2 window visibility isn't updated properly after parent window is disposed. ([Issue #1282](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1282) and [Issue #828](https://github.com/MicrosoftEdge/WebViewFeedback/issues/828)) +* Fixed a bug in WebView2 WinForm control where WebView2 window visibility isn't updated properly after parent window is disposed. ([Issue #1282](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1282) and [Issue #828](https://github.com/MicrosoftEdge/WebViewFeedback/issues/828)) -* Fixed a bug in WebView2 WPF control that Source property binding in WPF OneWay binding mode isn't working properly. ([Issue #619](https://github.com/MicrosoftEdge/WebViewFeedback/issues/619) and [Issue #608](https://github.com/MicrosoftEdge/WebViewFeedback/issues/608)) +* Fixed a bug in WebView2 WPF control that Source property binding in WPF OneWay binding mode isn't working properly. ([Issue #619](https://github.com/MicrosoftEdge/WebViewFeedback/issues/619) and [Issue #608](https://github.com/MicrosoftEdge/WebViewFeedback/issues/608)) @@ -8281,31 +8281,31 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following Experimental APIs have been added in this Prerelease SDK. -* Added [IsPinchZoomEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings4?view=webview2-1.0.865-prerelease&preserve-view=true#ispinchzoomenabled) setting. It allows you to turn on or off page scale zoom control in a setting. +* Added [IsPinchZoomEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings4?view=webview2-1.0.865-prerelease&preserve-view=true#ispinchzoomenabled) setting. It allows you to turn on or off page scale zoom control in a setting. -* Added Custom [add_DownloadStarting](/microsoft-edge/webview2/reference/win32/icorewebview2experimental2?view=webview2-1.0.865-prerelease&preserve-view=true#add_downloadstarting) API. It allows you to block downloads, save to a different path, and access the required metadata to build custom download UI. +* Added Custom [add_DownloadStarting](/microsoft-edge/webview2/reference/win32/icorewebview2experimental2?view=webview2-1.0.865-prerelease&preserve-view=true#add_downloadstarting) API. It allows you to block downloads, save to a different path, and access the required metadata to build custom download UI. -* Added `iframe` element support from [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe?view=webview2-1.0.865-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins). +* Added `iframe` element support from [AddHostObjectToScriptWithOrigins](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalframe?view=webview2-1.0.865-prerelease&preserve-view=true#addhostobjecttoscriptwithorigins). -* Added sample code for [WPF sample app](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) to use the API to turn off browser function keys. +* Added sample code for [WPF sample app](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) to use the API to turn off browser function keys. -* Added the [UpdateRuntime](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment3?view=webview2-1.0.865-prerelease&preserve-view=true#updateruntime) API, to easily update the WebView2 Runtime. +* Added the [UpdateRuntime](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironment3?view=webview2-1.0.865-prerelease&preserve-view=true#updateruntime) API, to easily update the WebView2 Runtime. #### Bug fixes -* Fixed handler for a `Chromium DevTools Protocol` message with `POST` binary data in WebView2. +* Fixed handler for a `Chromium DevTools Protocol` message with `POST` binary data in WebView2. -* Turned off the `OpenSaveAsAwareness` download UI, because it included links to `edge://settings`. ([Issue #1120](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1120)). +* Turned off the `OpenSaveAsAwareness` download UI, because it included links to `edge://settings`. ([Issue #1120](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1120)). -* Removed branding from screen share dialog. ([Issue #940](https://github.com/MicrosoftEdge/WebViewFeedback/issues/940)). +* Removed branding from screen share dialog. ([Issue #940](https://github.com/MicrosoftEdge/WebViewFeedback/issues/940)). -* Fixed bug where the [SetWindowDisplayAffinity](/windows/win32/api/winuser/nf-winuser-setwindowdisplayaffinity) function broke WebView2 when it stopped screen capture in an WebView2 app. ([Issue #841](https://github.com/MicrosoftEdge/WebViewFeedback/issues/841)). +* Fixed bug where the [SetWindowDisplayAffinity](/windows/win32/api/winuser/nf-winuser-setwindowdisplayaffinity) function broke WebView2 when it stopped screen capture in an WebView2 app. ([Issue #841](https://github.com/MicrosoftEdge/WebViewFeedback/issues/841)). -* Fixed bug for composition hosting where mouse input stopped working if any pen input was sent to WebView2. +* Fixed bug for composition hosting where mouse input stopped working if any pen input was sent to WebView2. -* Fixed bug that broke mouse input after any pen input. This change is Runtime-specific. +* Fixed bug that broke mouse input after any pen input. This change is Runtime-specific. @@ -8317,25 +8317,25 @@ The following Experimental APIs have been added in this Prerelease SDK. The following Experimental APIs for .NET have been added in this Prerelease SDK. -* Added WebView2 designer tool to WPF Toolbox. ([Issue #210](https://github.com/MicrosoftEdge/WebViewFeedback/issues/210)). +* Added WebView2 designer tool to WPF Toolbox. ([Issue #210](https://github.com/MicrosoftEdge/WebViewFeedback/issues/210)). -* Added WebView2 UI element in .NET Designer Mode. +* Added WebView2 UI element in .NET Designer Mode. ###### Bug fixes -* Improved COM Exception descriptions by wrapping each in a more detailed .NET exception. ([Issue #338](https://github.com/MicrosoftEdge/WebViewFeedback/issues/338)). This change is Runtime-specific. +* Improved COM Exception descriptions by wrapping each in a more detailed .NET exception. ([Issue #338](https://github.com/MicrosoftEdge/WebViewFeedback/issues/338)). This change is Runtime-specific. -* Fixed bug caused when you select **Tab** to shift focus caused WebView2 control to crash in Microsoft Visual Studio Tools for Office. ([Issue #589](https://github.com/MicrosoftEdge/WebViewFeedback/issues/589) and [Issue #933](https://github.com/MicrosoftEdge/WebViewFeedback/issues/933)). This change is Runtime-specific. +* Fixed bug caused when you select **Tab** to shift focus caused WebView2 control to crash in Microsoft Visual Studio Tools for Office. ([Issue #589](https://github.com/MicrosoftEdge/WebViewFeedback/issues/589) and [Issue #933](https://github.com/MicrosoftEdge/WebViewFeedback/issues/933)). This change is Runtime-specific. -* Improved .NET framework loader down level to be more robust. ([Issue #946](https://github.com/MicrosoftEdge/WebViewFeedback/issues/946)) +* Improved .NET framework loader down level to be more robust. ([Issue #946](https://github.com/MicrosoftEdge/WebViewFeedback/issues/946)) -* Fixed bug that caused crash when you try to refresh before first navigation completed. ([Issue #1011](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1011)) +* Fixed bug that caused crash when you try to refresh before first navigation completed. ([Issue #1011](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1011)) -* Fixed initialization so navigation occurs during `CoreWebView2InitializationCompleted`. ([Issue #1050](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1050)) +* Fixed initialization so navigation occurs during `CoreWebView2InitializationCompleted`. ([Issue #1050](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1050)) -* Improved .NET browser process crash error handling. You can now recreate controls after you handle a `ProcessFailed` event, without a crash. ([Issue #996](https://github.com/MicrosoftEdge/WebViewFeedback/issues/996)) +* Improved .NET browser process crash error handling. You can now recreate controls after you handle a `ProcessFailed` event, without a crash. ([Issue #996](https://github.com/MicrosoftEdge/WebViewFeedback/issues/996)) @@ -8353,15 +8353,15 @@ For full API compatibility, this Release version of the WebView2 SDK requires We #### Bug fixes -* Fixed a reliability bug that could crash the host app process when moving to a newer Edge WebView2 Runtime version. +* Fixed a reliability bug that could crash the host app process when moving to a newer Edge WebView2 Runtime version. -* Fixed a bug that prevented memory purge in some situations. This change is Runtime-specific. +* Fixed a bug that prevented memory purge in some situations. This change is Runtime-specific. -* Fixed error in 818 SDK release package where project couldn't find the `WebView2.h` file. ([Issue #1209](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1209)). +* Fixed error in 818 SDK release package where project couldn't find the `WebView2.h` file. ([Issue #1209](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1209)). -* Fixed a bug which caused WebResourceRequested event to be dropped for some requests with binary bodies. +* Fixed a bug which caused WebResourceRequested event to be dropped for some requests with binary bodies. -* Improve `NewWindowRequested` documentation. ([Issue #448](https://github.com/MicrosoftEdge/WebViewFeedback/issues/448)). +* Improve `NewWindowRequested` documentation. ([Issue #448](https://github.com/MicrosoftEdge/WebViewFeedback/issues/448)). @@ -8369,8 +8369,8 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. -* [UserAgent API](/microsoft-edge/webview2/reference/win32/icorewebview2settings2?view=webview2-1.0.864.35&preserve-view=true#get_useragent) -* [AreBrowserkeysenabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings3?view=webview2-1.0.864.35&preserve-view=true#get_arebrowseracceleratorkeysenabled) +* [UserAgent API](/microsoft-edge/webview2/reference/win32/icorewebview2settings2?view=webview2-1.0.864.35&preserve-view=true#get_useragent) +* [AreBrowserkeysenabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings3?view=webview2-1.0.864.35&preserve-view=true#get_arebrowseracceleratorkeysenabled) @@ -8380,7 +8380,7 @@ The following APIs have been promoted from Phase 2: Stable in Prerelease, to Pha ###### Bug fixes -* Fixed a bug in WebView2 .NET controls that first header is missing when iterating `CoreWebView2WebResourceRequest` headers collection. ([Issue #1123](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1123)). +* Fixed a bug in WebView2 .NET controls that first header is missing when iterating `CoreWebView2WebResourceRequest` headers collection. ([Issue #1123](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1123)). @@ -8398,9 +8398,9 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires #### Features -* Extended the `ProcessFailed` event. It now raises for non-renderer child processes and frame renderers. -* Added experimental [AreBrowserAcceleratorKeysEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings2?view=webview2-1.0.824&preserve-view=true#get_arebrowseracceleratorkeysenabled) setting. You can prevent the browser from responding to keyboard shortcuts related to navigation, printing, saving, and other browser-specific functions. -* Added `iframe` element support for `AddScriptToExecuteOnDocumentCreated`. +* Extended the `ProcessFailed` event. It now raises for non-renderer child processes and frame renderers. +* Added experimental [AreBrowserAcceleratorKeysEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings2?view=webview2-1.0.824&preserve-view=true#get_arebrowseracceleratorkeysenabled) setting. You can prevent the browser from responding to keyboard shortcuts related to navigation, printing, saving, and other browser-specific functions. +* Added `iframe` element support for `AddScriptToExecuteOnDocumentCreated`. @@ -8408,27 +8408,27 @@ For full API compatibility, this Prerelease version of the WebView2 SDK requires The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* [UserAgent](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived). +* [UserAgent](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived). -* Rasterization Scale APIs: - * [RasterizationScale property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_rasterizationscale) - * [RasterizationScaleChanged event](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#add_rasterizationscalechanged) - * [BoundsMode property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_boundsmode) - * [ShouldDetectMonitorScaleChanges property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_shoulddetectmonitorscalechanges) +* Rasterization Scale APIs: + * [RasterizationScale property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_rasterizationscale) + * [RasterizationScaleChanged event](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#add_rasterizationscalechanged) + * [BoundsMode property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_boundsmode) + * [ShouldDetectMonitorScaleChanges property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_shoulddetectmonitorscalechanges) #### Bug fixes -* Expanded supported C++ and .NET project types such as MFC and ATL. ([Issue #506](https://github.com/MicrosoftEdge/WebViewFeedback/issues/506), [Issue #669](https://github.com/MicrosoftEdge/WebViewFeedback/issues/669), and [Issue #851](https://github.com/MicrosoftEdge/WebViewFeedback/issues/851)). +* Expanded supported C++ and .NET project types such as MFC and ATL. ([Issue #506](https://github.com/MicrosoftEdge/WebViewFeedback/issues/506), [Issue #669](https://github.com/MicrosoftEdge/WebViewFeedback/issues/669), and [Issue #851](https://github.com/MicrosoftEdge/WebViewFeedback/issues/851)). -* Fixed a bug that Evergreen WebView2 Runtime leaks Inbound firewall entry. +* Fixed a bug that Evergreen WebView2 Runtime leaks Inbound firewall entry. -* Fixed setting Response during `WebResourceRequested` event. ([Issue #568](https://github.com/MicrosoftEdge/WebViewFeedback/issues/568)). +* Fixed setting Response during `WebResourceRequested` event. ([Issue #568](https://github.com/MicrosoftEdge/WebViewFeedback/issues/568)). -* Fixed a bug that navigating to `edge://` causes browser process to exit. ([Issue #604](https://github.com/MicrosoftEdge/WebViewFeedback/issues/604)). +* Fixed a bug that navigating to `edge://` causes browser process to exit. ([Issue #604](https://github.com/MicrosoftEdge/WebViewFeedback/issues/604)). -* Fixed a bug that limited WebView2 bounds to size of screen in Visual Hosting mode. +* Fixed a bug that limited WebView2 bounds to size of screen in Visual Hosting mode. @@ -8446,10 +8446,10 @@ For full API compatibility, this Release version of the WebView2 SDK requires We #### Features -* Extended the `ProcessFailed` event. It now raises for non-renderer child processes and frame renderers. -* Added `iframe` element support for `AddScriptToExecuteOnDocumentCreated`. -* Improved WebView2 code to be more resilient to `.exe` application files with malformatted version information. ([Issue #850](https://github.com/MicrosoftEdge/WebViewFeedback/issues/850)). -* Removed `--winhttp-proxy-resolver` from WebView2 browser process command-line, turned on other proxy command-line options for WebView2. +* Extended the `ProcessFailed` event. It now raises for non-renderer child processes and frame renderers. +* Added `iframe` element support for `AddScriptToExecuteOnDocumentCreated`. +* Improved WebView2 code to be more resilient to `.exe` application files with malformatted version information. ([Issue #850](https://github.com/MicrosoftEdge/WebViewFeedback/issues/850)). +* Removed `--winhttp-proxy-resolver` from WebView2 browser process command-line, turned on other proxy command-line options for WebView2. @@ -8483,12 +8483,12 @@ WebView2 prerelease package 0.9.430 is deprecated, and is removed with the next #### Features -* Added [TrySuspend and Resume](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#trysuspend) method to suspend and resume WebViews. -* Added [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#setvirtualhostnametofoldermapping) method that maps a virtual host name to a directory path. ([Issue #37](https://github.com/MicrosoftEdge/WebViewFeedback/issues/37), [Issue #161](https://github.com/MicrosoftEdge/WebViewFeedback/issues/161), and [Issue #212](https://github.com/MicrosoftEdge/WebViewFeedback/issues/212)). -* Added the [DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2?view=webview2-1.0.790-prerelease&preserve-view=true#get_defaultbackgroundcolor) property to set the color and alpha-channel of the background. ([Issue #414](https://github.com/MicrosoftEdge/WebViewFeedback/issues/414)). -* Added the [UserAgent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings?view=webview2-1.0.790-prerelease&preserve-view=true#get_useragent) property to get or set the User Agent. ([Issue #122](https://github.com/MicrosoftEdge/WebViewFeedback/issues/122)). -* Replaced the `CreateCookieWithCookie` method with the `CopyCookie` method. -* Added visual hosting support using the [ICoreWebView2CompositionController](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller?view=webview2-1.0.790-prerelease&preserve-view=true) interface, which is created using the new `CreateCoreWebView2CompositionController` method from `ICoreWebView2Environment3`. +* Added [TrySuspend and Resume](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#trysuspend) method to suspend and resume WebViews. +* Added [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#setvirtualhostnametofoldermapping) method that maps a virtual host name to a directory path. ([Issue #37](https://github.com/MicrosoftEdge/WebViewFeedback/issues/37), [Issue #161](https://github.com/MicrosoftEdge/WebViewFeedback/issues/161), and [Issue #212](https://github.com/MicrosoftEdge/WebViewFeedback/issues/212)). +* Added the [DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2?view=webview2-1.0.790-prerelease&preserve-view=true#get_defaultbackgroundcolor) property to set the color and alpha-channel of the background. ([Issue #414](https://github.com/MicrosoftEdge/WebViewFeedback/issues/414)). +* Added the [UserAgent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalsettings?view=webview2-1.0.790-prerelease&preserve-view=true#get_useragent) property to get or set the User Agent. ([Issue #122](https://github.com/MicrosoftEdge/WebViewFeedback/issues/122)). +* Replaced the `CreateCookieWithCookie` method with the `CopyCookie` method. +* Added visual hosting support using the [ICoreWebView2CompositionController](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller?view=webview2-1.0.790-prerelease&preserve-view=true) interface, which is created using the new `CreateCoreWebView2CompositionController` method from `ICoreWebView2Environment3`. @@ -8496,36 +8496,36 @@ WebView2 prerelease package 0.9.430 is deprecated, and is removed with the next The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* Visual Hosting APIs -* [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#setvirtualhostnametofoldermapping) +* Visual Hosting APIs +* [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.790-prerelease&preserve-view=true#setvirtualhostnametofoldermapping) #### Bug fixes -* Turned off the Microsoft Edge Shopping feature in WebView2. +* Turned off the Microsoft Edge Shopping feature in WebView2. -* Turned off the context menu in the PDF viewer when `AreDefaultContextMenusEnabled` is `false`. ([Issue #605](https://github.com/MicrosoftEdge/WebViewFeedback/issues/605)). +* Turned off the context menu in the PDF viewer when `AreDefaultContextMenusEnabled` is `false`. ([Issue #605](https://github.com/MicrosoftEdge/WebViewFeedback/issues/605)). -* Fixed a bug that returned `E_NOINTERFACE` when querying `ICoreWebView2` for `ICoreWebView2Experimental`. ([Issue #691](https://github.com/MicrosoftEdge/WebViewFeedback/issues/691)). +* Fixed a bug that returned `E_NOINTERFACE` when querying `ICoreWebView2` for `ICoreWebView2Experimental`. ([Issue #691](https://github.com/MicrosoftEdge/WebViewFeedback/issues/691)). -* Fixed a bug that allowed navigation with malformed URIs when `CoreWebView2NavigationStartingEventArgs.Cancel` is set to `false`. ([Issue #400](https://github.com/MicrosoftEdge/WebViewFeedback/issues/400)). +* Fixed a bug that allowed navigation with malformed URIs when `CoreWebView2NavigationStartingEventArgs.Cancel` is set to `false`. ([Issue #400](https://github.com/MicrosoftEdge/WebViewFeedback/issues/400)). -* Fixed a bug that blocked `window.print()` on pop-up windows with event handlers attached to `NewWindowRequested` events. ([Issue #409](https://github.com/MicrosoftEdge/WebViewFeedback/issues/409)). +* Fixed a bug that blocked `window.print()` on pop-up windows with event handlers attached to `NewWindowRequested` events. ([Issue #409](https://github.com/MicrosoftEdge/WebViewFeedback/issues/409)). -* Fixed Dynamic DPI issue when moving apps between different monitors. ([Issue #58](https://github.com/MicrosoftEdge/WebViewFeedback/issues/58)) +* Fixed Dynamic DPI issue when moving apps between different monitors. ([Issue #58](https://github.com/MicrosoftEdge/WebViewFeedback/issues/58)) -* Improved the `HRESULT` instances passed by [ICoreWebView2WebResourceResponseViewGetContentCompletedHandler::Invoke](/microsoft-edge/webview2/reference/win32/icorewebview2webresourceresponseviewgetcontentcompletedhandler?view=webview2-1.0.790-prerelease&preserve-view=true#invoke). +* Improved the `HRESULT` instances passed by [ICoreWebView2WebResourceResponseViewGetContentCompletedHandler::Invoke](/microsoft-edge/webview2/reference/win32/icorewebview2webresourceresponseviewgetcontentcompletedhandler?view=webview2-1.0.790-prerelease&preserve-view=true#invoke). -* Turned off autofill manage button. ([Issue #585](https://github.com/MicrosoftEdge/WebViewFeedback/issues/585)). +* Turned off autofill manage button. ([Issue #585](https://github.com/MicrosoftEdge/WebViewFeedback/issues/585)). -* Fixed Visual Studio crashes while you run `WebView2.Dispose` when hosted in multiple windows. ([Issue #816](https://github.com/MicrosoftEdge/WebViewFeedback/issues/816)) and [Issue #442](https://github.com/MicrosoftEdge/WebViewFeedback/issues/442)). +* Fixed Visual Studio crashes while you run `WebView2.Dispose` when hosted in multiple windows. ([Issue #816](https://github.com/MicrosoftEdge/WebViewFeedback/issues/816)) and [Issue #442](https://github.com/MicrosoftEdge/WebViewFeedback/issues/442)). -* Fixed bug to display WebView2 control in Visual Studio Toolbox. ([Issue #210](https://github.com/MicrosoftEdge/WebViewFeedback/issues/210)). +* Fixed bug to display WebView2 control in Visual Studio Toolbox. ([Issue #210](https://github.com/MicrosoftEdge/WebViewFeedback/issues/210)). -* Reduced high CPU usage issues. ([Issue #878](https://github.com/MicrosoftEdge/WebViewFeedback/issues/878)). +* Reduced high CPU usage issues. ([Issue #878](https://github.com/MicrosoftEdge/WebViewFeedback/issues/878)). -* Fixed issues with deprecated 1.0.781-prerelease package. ([Issue #875](https://github.com/MicrosoftEdge/WebViewFeedback/issues/875) and [Issue #878](https://github.com/MicrosoftEdge/WebViewFeedback/issues/878)). +* Fixed issues with deprecated 1.0.781-prerelease package. ([Issue #875](https://github.com/MicrosoftEdge/WebViewFeedback/issues/875) and [Issue #878](https://github.com/MicrosoftEdge/WebViewFeedback/issues/878)). @@ -8535,9 +8535,9 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, ###### Bug fixes -* Fixed bug that crashed WebView2 apps that use the WPF SDK. The crash occurred when pressing **F4** to close a window. ([Issue #399](https://github.com/MicrosoftEdge/WebViewFeedback/issues/399)). +* Fixed bug that crashed WebView2 apps that use the WPF SDK. The crash occurred when pressing **F4** to close a window. ([Issue #399](https://github.com/MicrosoftEdge/WebViewFeedback/issues/399)). -* The WebView2 initialization screen is now transparent, instead of gray. ([Issue #196](https://github.com/MicrosoftEdge/WebViewFeedback/issues/196)). +* The WebView2 initialization screen is now transparent, instead of gray. ([Issue #196](https://github.com/MicrosoftEdge/WebViewFeedback/issues/196)). @@ -8555,8 +8555,8 @@ For full API compatibility, this Release version of the WebView2 SDK requires We #### Features -* Turned off various Microsoft Edge browser services in WebView2. -* Visual Hosting APIs are now Generally Available. +* Turned off various Microsoft Edge browser services in WebView2. +* Visual Hosting APIs are now Generally Available. @@ -8564,17 +8564,17 @@ For full API compatibility, this Release version of the WebView2 SDK requires We The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. - * [DPI support](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.774.44&preserve-view=true#add_webresourceresponsereceived) related APIs - * Visual hosting APIs - * [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.774.44&preserve-view=true#setvirtualhostnametofoldermapping) - * [TrySuspend and Resume](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.774.44&preserve-view=true#trysuspend) - * [DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2?view=webview2-1.0.774.44&preserve-view=true#get_defaultbackgroundcolor) + * [DPI support](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.774.44&preserve-view=true#add_webresourceresponsereceived) related APIs + * Visual hosting APIs + * [SetVirtualHostNameToFolderMapping](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.774.44&preserve-view=true#setvirtualhostnametofoldermapping) + * [TrySuspend and Resume](/microsoft-edge/webview2/reference/win32/icorewebview2_3?view=webview2-1.0.774.44&preserve-view=true#trysuspend) + * [DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2?view=webview2-1.0.774.44&preserve-view=true#get_defaultbackgroundcolor) #### Bug fixes -* Fixed a bug that limited WebView2 bounds to size of screen in Visual Hosting mode. +* Fixed a bug that limited WebView2 bounds to size of screen in Visual Hosting mode. @@ -8599,20 +8599,20 @@ This Prerelease version of the WebView2 SDK requires Microsoft Edge version 86.0 #### Features -* Added [WebView2 Group Policies](/deployedge/microsoft-edge-webview-policies). For best practices, see [group policies for WebView2](../concepts/enterprise.md#group-policies-for-webview2). -* > [!IMPORTANT] +* Added [WebView2 Group Policies](/deployedge/microsoft-edge-webview-policies). For best practices, see [group policies for WebView2](../concepts/enterprise.md#group-policies-for-webview2). +* > [!IMPORTANT] > **Breaking Change**: Deprecated the old registry location. > > ```text > {Root}\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\{AppId} > ``` -* Added support for [Drag and Drop](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller3?view=webview2-1.0.721-prerelease&preserve-view=true) in WebView2. -* Added APIs to handle DPI support. - * Added [RasterizationScale](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_rasterizationscale) property to change the DPI scale for WebView2 content and UI pop-ups, and associated [RasterizationScaleChanged](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#add_rasterizationscalechanged) event. - * Added [ShouldDetectMonitorScaleChanges](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_shoulddetectmonitorscalechanges) property to automatically update `RasterizationScale` property if needed. - * Added [BoundsMode property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_boundsmode) to specify that the bounds are logic pixels and allow WebView2 to use `RasterizationScale` for WebView2 pixel display, and WebView2 use the `RasterizationScale` with the `Bounds` to get the physical size. -* Updated `NewWindowRequested` event to handle **Ctrl+click** and **Shift+click**. ([Issue #168](https://github.com/MicrosoftEdge/WebViewFeedback/issues/168) and [Issue #371](https://github.com/MicrosoftEdge/WebViewFeedback/issues/371)). +* Added support for [Drag and Drop](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller3?view=webview2-1.0.721-prerelease&preserve-view=true) in WebView2. +* Added APIs to handle DPI support. + * Added [RasterizationScale](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_rasterizationscale) property to change the DPI scale for WebView2 content and UI pop-ups, and associated [RasterizationScaleChanged](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#add_rasterizationscalechanged) event. + * Added [ShouldDetectMonitorScaleChanges](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_shoulddetectmonitorscalechanges) property to automatically update `RasterizationScale` property if needed. + * Added [BoundsMode property](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcontroller?view=webview2-1.0.721-prerelease&preserve-view=true#get_boundsmode) to specify that the bounds are logic pixels and allow WebView2 to use `RasterizationScale` for WebView2 pixel display, and WebView2 use the `RasterizationScale` with the `Bounds` to get the physical size. +* Updated `NewWindowRequested` event to handle **Ctrl+click** and **Shift+click**. ([Issue #168](https://github.com/MicrosoftEdge/WebViewFeedback/issues/168) and [Issue #371](https://github.com/MicrosoftEdge/WebViewFeedback/issues/371)). @@ -8620,11 +8620,11 @@ This Prerelease version of the WebView2 SDK requires Microsoft Edge version 86.0 The following APIs have been promoted from Phase 1: Experimental in Prerelease, to Phase 2: Stable in Prerelease, and are included in this Prerelease SDK. -* [WebResourceResponseReceived API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived) -* [NavigateWithWebResourceRequest API](/microsoft-edge/webview2/reference/win32/icorewebview2environment2?view=webview2-1.0.721-prerelease&preserve-view=true#createwebresourcerequest) -* [Cookie management API](/microsoft-edge/webview2/reference/win32/icorewebview2cookiemanager?view=webview2-1.0.721-prerelease&preserve-view=true) -* [DOMContentLoaded API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_domcontentloaded) -* [Environment property](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#get_environment) +* [WebResourceResponseReceived API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived) +* [NavigateWithWebResourceRequest API](/microsoft-edge/webview2/reference/win32/icorewebview2environment2?view=webview2-1.0.721-prerelease&preserve-view=true#createwebresourcerequest) +* [Cookie management API](/microsoft-edge/webview2/reference/win32/icorewebview2cookiemanager?view=webview2-1.0.721-prerelease&preserve-view=true) +* [DOMContentLoaded API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_domcontentloaded) +* [Environment property](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#get_environment) @@ -8634,19 +8634,19 @@ The following APIs have been promoted from Phase 1: Experimental in Prerelease, ###### Features -* Turned on WinForms designer in .NET Core 3.1+ and .NET 5. -* Improved .NET cookie management. ([Issue #611](https://github.com/MicrosoftEdge/WebViewFeedback/issues/611)). -* Replaced `CoreWebView2Ready` with [CoreWebView2InitializationCompleted](/dotnet/api/microsoft.web.webview2.core.corewebview2initializationcompletedeventargs). +* Turned on WinForms designer in .NET Core 3.1+ and .NET 5. +* Improved .NET cookie management. ([Issue #611](https://github.com/MicrosoftEdge/WebViewFeedback/issues/611)). +* Replaced `CoreWebView2Ready` with [CoreWebView2InitializationCompleted](/dotnet/api/microsoft.web.webview2.core.corewebview2initializationcompletedeventargs). ###### Bug fixes -* Added [AcceleratorKeyPressed](/dotnet/api/microsoft.web.webview2.wpf.webview2.acceleratorkeypressed) event to support `AcceleratorKey` select in WebView2. ([Issue #288](https://github.com/MicrosoftEdge/WebViewFeedback/issues/288)). +* Added [AcceleratorKeyPressed](/dotnet/api/microsoft.web.webview2.wpf.webview2.acceleratorkeypressed) event to support `AcceleratorKey` select in WebView2. ([Issue #288](https://github.com/MicrosoftEdge/WebViewFeedback/issues/288)). -* Removed unnecessary files from being output to WebView2 folders. ([Issue #461](https://github.com/MicrosoftEdge/WebViewFeedback/issues/461)). +* Removed unnecessary files from being output to WebView2 folders. ([Issue #461](https://github.com/MicrosoftEdge/WebViewFeedback/issues/461)). -* Improved host object API. ([Issue #335](https://github.com/MicrosoftEdge/WebViewFeedback/issues/335) and [Issue #525](https://github.com/MicrosoftEdge/WebViewFeedback/issues/525)). +* Improved host object API. ([Issue #335](https://github.com/MicrosoftEdge/WebViewFeedback/issues/335) and [Issue #525](https://github.com/MicrosoftEdge/WebViewFeedback/issues/525)). @@ -8666,11 +8666,11 @@ This Release version of the WebView2 SDK requires WebView2 Runtime version 86.0. The following APIs have been promoted from Phase 2: Stable in Prerelease, to Phase 3: Stable in Release, and are now included in this Release SDK. - * [WebResourceResponseReceived API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived) - * [NavigateWithWebResourceRequest API](/microsoft-edge/webview2/reference/win32/icorewebview2environment2?view=webview2-1.0.721-prerelease&preserve-view=true#createwebresourcerequest) - * [Cookie management API](/microsoft-edge/webview2/reference/win32/icorewebview2cookiemanager?view=webview2-1.0.721-prerelease&preserve-view=true) - * [DOMContentLoaded API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_domcontentloaded) - * [Environment property](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#get_environment) + * [WebResourceResponseReceived API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_webresourceresponsereceived) + * [NavigateWithWebResourceRequest API](/microsoft-edge/webview2/reference/win32/icorewebview2environment2?view=webview2-1.0.721-prerelease&preserve-view=true#createwebresourcerequest) + * [Cookie management API](/microsoft-edge/webview2/reference/win32/icorewebview2cookiemanager?view=webview2-1.0.721-prerelease&preserve-view=true) + * [DOMContentLoaded API](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#add_domcontentloaded) + * [Environment property](/microsoft-edge/webview2/reference/win32/icorewebview2_2?view=webview2-1.0.721-prerelease&preserve-view=true#get_environment) @@ -8688,29 +8688,29 @@ This Prerelease version of the WebView2 SDK requires WebView2 Runtime version 86 #### General features -* Added [NavigateWithWebResourceRequest](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#navigatewithwebresourcerequest) method to provide post data or other request headers during navigation. -* Added [DOMContentLoaded](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#add_domcontentloaded) event that runs when the initial HTML document is loaded and parsed. -* Added the [Environment](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#get_environment) property on WebView2. This property exposes the WebView2 environment where an instance of WebView2 was created. -* Added [cookie management](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#get_cookiemanager) APIs that allow developers to authenticate the WebView2 session, or retrieve cookies from WebView2 to authenticate other tools. The WebView2 team plans to make language or framework-specific improvements. See [API Review: Cookie Management](https://github.com/MicrosoftEdge/WebView2Announcement/issues/2). -* Updated the [WebResourceResponseReceived](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#add_webresourceresponsereceived) event, and added immutable [WebResourceResponseView](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponseview?view=webview2-1.0.674-prerelease&preserve-view=true) and [WebResourceResponseReceivedEventArgs::PopulateResponseContent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponsereceivedeventargs?view=webview2-0.9.628-prerelease&preserve-view=true#populateresponsecontent) to [WebResourceResponseView::GetContent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponseview?view=webview2-1.0.674-prerelease&preserve-view=true#getcontent). -* Turned off [Microsoft Defender Application Guard (WDAG)](/windows/security/threat-protection/microsoft-defender-application-guard/md-app-guard-overview) in WebView2. -* Added [SystemCursorId](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller2?view=webview2-1.0.674-prerelease&preserve-view=true#get_systemcursorid) for Visual Hosting. -* Added bug fixed for Input Method in Visual Hosting. -* Removed include requirement for `version.lib` when using WebView2 static library. +* Added [NavigateWithWebResourceRequest](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#navigatewithwebresourcerequest) method to provide post data or other request headers during navigation. +* Added [DOMContentLoaded](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#add_domcontentloaded) event that runs when the initial HTML document is loaded and parsed. +* Added the [Environment](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#get_environment) property on WebView2. This property exposes the WebView2 environment where an instance of WebView2 was created. +* Added [cookie management](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#get_cookiemanager) APIs that allow developers to authenticate the WebView2 session, or retrieve cookies from WebView2 to authenticate other tools. The WebView2 team plans to make language or framework-specific improvements. See [API Review: Cookie Management](https://github.com/MicrosoftEdge/WebView2Announcement/issues/2). +* Updated the [WebResourceResponseReceived](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-1.0.674-prerelease&preserve-view=true#add_webresourceresponsereceived) event, and added immutable [WebResourceResponseView](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponseview?view=webview2-1.0.674-prerelease&preserve-view=true) and [WebResourceResponseReceivedEventArgs::PopulateResponseContent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponsereceivedeventargs?view=webview2-0.9.628-prerelease&preserve-view=true#populateresponsecontent) to [WebResourceResponseView::GetContent](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwebresourceresponseview?view=webview2-1.0.674-prerelease&preserve-view=true#getcontent). +* Turned off [Microsoft Defender Application Guard (WDAG)](/windows/security/threat-protection/microsoft-defender-application-guard/md-app-guard-overview) in WebView2. +* Added [SystemCursorId](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller2?view=webview2-1.0.674-prerelease&preserve-view=true#get_systemcursorid) for Visual Hosting. +* Added bug fixed for Input Method in Visual Hosting. +* Removed include requirement for `version.lib` when using WebView2 static library. #### .NET -* Updated [CoreWebView2](/dotnet/api/microsoft.web.webview2.core.corewebview2) class to expose the `CoreWebView2Environment` variable. -* Changed implementations of custom EventArgs classes in `Microsoft.Web.WebView2.Core` namespace to subclasses of [System.EventArgs](/dotnet/api/system.eventargs) or [System.ComponentModel.CancelEventArgs](/dotnet/api/system.componentmodel.canceleventargs). ([Issue #250](https://github.com/MicrosoftEdge/WebViewFeedback/issues/250)) -* Added support for [CoreWebView2CreationProperties](/dotnet/api/microsoft.web.webview2.winforms) in WinForms. ([Issue #204](https://github.com/MicrosoftEdge/WebViewFeedback/issues/204)). -* Added [WebResourceRequested](/dotnet/api/microsoft.web.webview2.core.corewebview2.webresourcerequested) .NET APIs. ([Issue #219](https://github.com/MicrosoftEdge/WebViewFeedback/issues/219)). -* Updated WinForms Designer [Source](/dotnet/api/microsoft.web.webview2.winforms.webview2.source) property to default or reset to null. ([Issue #177](https://github.com/MicrosoftEdge/WebViewFeedback/issues/177)). -* Updated WebView2 bounds in WebView2.Init() to support DPI modes that are less than 100%. ([Issue #432](https://github.com/MicrosoftEdge/WebViewFeedback/issues/432)). -* Updated [BuildWindowCore](/dotnet/api/microsoft.web.webview2.wpf.webview2.buildwindowcore) and [DestroyWindowCore](/dotnet/api/microsoft.web.webview2.wpf.webview2.destroywindowcore) to increase robustness. ([Issue #382](https://github.com/MicrosoftEdge/WebViewFeedback/issues/382)). -* Updated .NET Loader base to load on process bit instead of operating system architecture. ([Issue #431](https://github.com/MicrosoftEdge/WebViewFeedback/issues/431)). -* Renamed `EdgeNotFoundException` to [WebView2RuntimeNotFoundException](/dotnet/api/microsoft.web.webview2.core.webview2runtimenotfoundexception). +* Updated [CoreWebView2](/dotnet/api/microsoft.web.webview2.core.corewebview2) class to expose the `CoreWebView2Environment` variable. +* Changed implementations of custom EventArgs classes in `Microsoft.Web.WebView2.Core` namespace to subclasses of [System.EventArgs](/dotnet/api/system.eventargs) or [System.ComponentModel.CancelEventArgs](/dotnet/api/system.componentmodel.canceleventargs). ([Issue #250](https://github.com/MicrosoftEdge/WebViewFeedback/issues/250)) +* Added support for [CoreWebView2CreationProperties](/dotnet/api/microsoft.web.webview2.winforms) in WinForms. ([Issue #204](https://github.com/MicrosoftEdge/WebViewFeedback/issues/204)). +* Added [WebResourceRequested](/dotnet/api/microsoft.web.webview2.core.corewebview2.webresourcerequested) .NET APIs. ([Issue #219](https://github.com/MicrosoftEdge/WebViewFeedback/issues/219)). +* Updated WinForms Designer [Source](/dotnet/api/microsoft.web.webview2.winforms.webview2.source) property to default or reset to null. ([Issue #177](https://github.com/MicrosoftEdge/WebViewFeedback/issues/177)). +* Updated WebView2 bounds in WebView2.Init() to support DPI modes that are less than 100%. ([Issue #432](https://github.com/MicrosoftEdge/WebViewFeedback/issues/432)). +* Updated [BuildWindowCore](/dotnet/api/microsoft.web.webview2.wpf.webview2.buildwindowcore) and [DestroyWindowCore](/dotnet/api/microsoft.web.webview2.wpf.webview2.destroywindowcore) to increase robustness. ([Issue #382](https://github.com/MicrosoftEdge/WebViewFeedback/issues/382)). +* Updated .NET Loader base to load on process bit instead of operating system architecture. ([Issue #431](https://github.com/MicrosoftEdge/WebViewFeedback/issues/431)). +* Renamed `EdgeNotFoundException` to [WebView2RuntimeNotFoundException](/dotnet/api/microsoft.web.webview2.core.webview2runtimenotfoundexception). @@ -8735,8 +8735,8 @@ This Release version of the WebView2 SDK requires WebView2 Runtime version 86.0. #### Features -* .NET WPF/WinForms WebView2 is now Generally Available (GA). -* Fixed Distribution (Bring-your-own) mode reached GA. +* .NET WPF/WinForms WebView2 is now Generally Available (GA). +* Fixed Distribution (Bring-your-own) mode reached GA. @@ -8746,7 +8746,7 @@ This Release version of the WebView2 SDK requires WebView2 Runtime version 86.0. ###### Bug fixes -* `CoreWebView2NewWindowRequestedEventArgs.Handled` prevents new window from being opened. ([Issue #549](https://github.com/MicrosoftEdge/WebViewFeedback/issues/549) and [Issue #560](https://github.com/MicrosoftEdge/WebViewFeedback/issues/560)). +* `CoreWebView2NewWindowRequestedEventArgs.Handled` prevents new window from being opened. ([Issue #549](https://github.com/MicrosoftEdge/WebViewFeedback/issues/549) and [Issue #560](https://github.com/MicrosoftEdge/WebViewFeedback/issues/560)). @@ -8763,7 +8763,7 @@ This Release version of the WebView2 SDK requires WebView2 Runtime version 86.0. > [!IMPORTANT] > **Announcement**: Win32 C/C++ WebView2 is now Generally Available (GA). Starting this release, Release SDKs are forward-compatible. See [GA announcement blog post](https://blogs.windows.com/msedgedev/edge-webview2-general-availability). -* The Evergreen WebView2 Runtime and installer are GA. The bootstrapper, the downlink link for the Bootstrapper, and the Standalone Installer for the Evergreen WebView2 Runtime are available on [Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). Sample code for the installation workflow is also available in the [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples). +* The Evergreen WebView2 Runtime and installer are GA. The bootstrapper, the downlink link for the Bootstrapper, and the Standalone Installer for the Evergreen WebView2 Runtime are available on [Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). Sample code for the installation workflow is also available in the [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples). For more information about the Runtime, Evergreen distribution, and Fixed Version distribution, see [Distribute your app and the WebView2 Runtime](../concepts/distribution.md). @@ -8779,15 +8779,15 @@ Release Date: Sep. 10, 2020 This Release version of the WebView2 SDK requires WebView2 Runtime version 86.0.616.0 or higher. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: This SDK is the Release Candidate for WebView2 Win32 C/C++ GA. The GA version is expected to use the same API interface and functionality. -* Disconnected [browser policies](/deployedge/microsoft-edge-policies). -* Added [AllowSingleSignOnUsingOSPrimaryAccount](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.622&preserve-view=true#get_allowsinglesignonusingosprimaryaccount) property on WebView2 environment options to turn on conditional access for WebView2. -* Updated `ICoreWebView2NewWindowRequestedEventArgs` to include [WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs?view=webview2-0.9.622&preserve-view=true#get_windowfeatures) property, and the associated [ICoreWebView2WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2windowfeatures?view=webview2-0.9.622&preserve-view=true). ([Issue #293](https://github.com/MicrosoftEdge/WebViewFeedback/issues/293)). -* Updated `System.Windows.Rect` to use `System.Drawing.Rectangle` instead of `System.Windows.Rect` ([Issue #235](https://github.com/MicrosoftEdge/WebViewFeedback/issues/235)). -* Updated NewWindowRequested event to handle `window.open()` request without parameters. ([Issue #293](https://github.com/MicrosoftEdge/WebViewFeedback/issues/293)). -* [AdditionalBrowserArguments](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.622&preserve-view=true#put_additionalbrowserarguments) specified with `ICoreWebView2EnvironmentOptions` aren't overridden with environment variables or registry values. See [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.622&preserve-view=true#createcorewebview2environmentwithoptions). +* Disconnected [browser policies](/deployedge/microsoft-edge-policies). +* Added [AllowSingleSignOnUsingOSPrimaryAccount](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.622&preserve-view=true#get_allowsinglesignonusingosprimaryaccount) property on WebView2 environment options to turn on conditional access for WebView2. +* Updated `ICoreWebView2NewWindowRequestedEventArgs` to include [WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs?view=webview2-0.9.622&preserve-view=true#get_windowfeatures) property, and the associated [ICoreWebView2WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2windowfeatures?view=webview2-0.9.622&preserve-view=true). ([Issue #293](https://github.com/MicrosoftEdge/WebViewFeedback/issues/293)). +* Updated `System.Windows.Rect` to use `System.Drawing.Rectangle` instead of `System.Windows.Rect` ([Issue #235](https://github.com/MicrosoftEdge/WebViewFeedback/issues/235)). +* Updated NewWindowRequested event to handle `window.open()` request without parameters. ([Issue #293](https://github.com/MicrosoftEdge/WebViewFeedback/issues/293)). +* [AdditionalBrowserArguments](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.622&preserve-view=true#put_additionalbrowserarguments) specified with `ICoreWebView2EnvironmentOptions` aren't overridden with environment variables or registry values. See [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.622&preserve-view=true#createcorewebview2environmentwithoptions). @@ -8805,33 +8805,33 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 86.0.57 #### All platforms -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: Evergreen WebView2 Runtime and installer is released for preview. See [Distribute your app and the WebView2 Runtime](../concepts/distribution.md). -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: The following WebView2 SDK Versions are no longer supported after the next SDK release: > - > * [Release SDK 0.8.190, for Runtime 77 (Jun. 17, 2019)](#release-sdk-08190-for-runtime-77-jun-17-2019) - > * [Release SDK 0.8.230, for Runtime 77 (Jul. 29, 2019)](#release-sdk-08230-for-runtime-77-jul-29-2019) - > * [Release SDK 0.8.270, for Runtime 78 (Sep. 10, 2019)](#release-sdk-08270-for-runtime-78-sep-10-2019) - > * [Release SDK 0.8.314, for Runtime 80 (Oct. 28, 2019)](#release-sdk-08314-for-runtime-80-oct-28-2019) - > * [Release SDK 0.8.355, for Runtime 80 (Dec. 9, 2019)](#release-sdk-08355-for-runtime-80-dec-9-2019) + > * [Release SDK 0.8.190, for Runtime 77 (Jun. 17, 2019)](#release-sdk-08190-for-runtime-77-jun-17-2019) + > * [Release SDK 0.8.230, for Runtime 77 (Jul. 29, 2019)](#release-sdk-08230-for-runtime-77-jul-29-2019) + > * [Release SDK 0.8.270, for Runtime 78 (Sep. 10, 2019)](#release-sdk-08270-for-runtime-78-sep-10-2019) + > * [Release SDK 0.8.314, for Runtime 80 (Oct. 28, 2019)](#release-sdk-08314-for-runtime-80-oct-28-2019) + > * [Release SDK 0.8.355, for Runtime 80 (Dec. 9, 2019)](#release-sdk-08355-for-runtime-80-dec-9-2019) > > The WebView2 SDK Versions are also marked deprecated on nuget.org. WebView2 recommends staying up to date with the latest version of WebView2. -* Added WebView2 worker thread improvements. ([Issue #318](https://github.com/MicrosoftEdge/WebViewFeedback/issues/318)). -* Turned off the pop-up blocker in WebView2. See the [IsUserInitiated](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs?view=webview2-0.9.538&preserve-view=true#get_isuserinitiated) property in the `NewWindowRequested` event. -* Ensured WebView2 navigation starting event is run for `about:blank`. Now, `NavigationStarting` events are run for all navigation, but cancellations for `about:blank` or `srcdoc` of the `iframe` element aren't supported and ignored. -* Blocked some `edge://` URI schemes in WebView2. -* Added experimental [IsSingleSignOnUsingOSPrimaryAccountEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions?view=webview2-0.9.538-prerelease&preserve-view=true#get_issinglesignonusingosprimaryaccountenabled) property on WebView2 environment options to turn on conditional access for WebView2. -* Added experimental [WebResourceResponseReceived](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-0.9.538-prerelease&preserve-view=true#add_webresourceresponsereceived) event that runs after the WebView2 receives and processes the response from a WebResource request. Authentication headers, if any, are included in the response object. +* Added WebView2 worker thread improvements. ([Issue #318](https://github.com/MicrosoftEdge/WebViewFeedback/issues/318)). +* Turned off the pop-up blocker in WebView2. See the [IsUserInitiated](/microsoft-edge/webview2/reference/win32/icorewebview2newwindowrequestedeventargs?view=webview2-0.9.538&preserve-view=true#get_isuserinitiated) property in the `NewWindowRequested` event. +* Ensured WebView2 navigation starting event is run for `about:blank`. Now, `NavigationStarting` events are run for all navigation, but cancellations for `about:blank` or `srcdoc` of the `iframe` element aren't supported and ignored. +* Blocked some `edge://` URI schemes in WebView2. +* Added experimental [IsSingleSignOnUsingOSPrimaryAccountEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalenvironmentoptions?view=webview2-0.9.538-prerelease&preserve-view=true#get_issinglesignonusingosprimaryaccountenabled) property on WebView2 environment options to turn on conditional access for WebView2. +* Added experimental [WebResourceResponseReceived](/microsoft-edge/webview2/reference/win32/icorewebview2experimental?view=webview2-0.9.538-prerelease&preserve-view=true#add_webresourceresponsereceived) event that runs after the WebView2 receives and processes the response from a WebResource request. Authentication headers, if any, are included in the response object. #### .NET -* Improved WPF focus handling. ([Issue #185](https://github.com/MicrosoftEdge/WebViewFeedback/issues/185)). -* Added `ZoomFactor` property on WPF Webview2 Controller. +* Improved WPF focus handling. ([Issue #185](https://github.com/MicrosoftEdge/WebViewFeedback/issues/185)). +* Added `ZoomFactor` property on WPF Webview2 Controller. @@ -8864,34 +8864,34 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 85.0.53 #### All platforms -* Dropping support for WebView2 [Release SDK 0.8.149, for Runtime 76 (May 6, 2019)](#release-sdk-08149-for-runtime-76-may-6-2019). We recommend staying up to date with the latest version of WebView2. -* Updated group policy to account for when the profile path of the Microsoft Edge browser is modified ([#179](https://github.com/MicrosoftEdge/WebViewFeedback/issues/179)). +* Dropping support for WebView2 [Release SDK 0.8.149, for Runtime 76 (May 6, 2019)](#release-sdk-08149-for-runtime-76-may-6-2019). We recommend staying up to date with the latest version of WebView2. +* Updated group policy to account for when the profile path of the Microsoft Edge browser is modified ([#179](https://github.com/MicrosoftEdge/WebViewFeedback/issues/179)). #### Win32 C/C++ -* Added [ICoreWebView2ExperimentalNewWindowRequestedEventArgs::get_WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalnewwindowrequestedeventargs?view=webview2-0.9.538-prerelease&preserve-view=true#get_windowfeatures), which fires when `window.open()` is run and associated with [ICoreWebView2ExperimentalWindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwindowfeatures?view=webview2-0.9.538-prerelease&preserve-view=true) ([#70](https://github.com/MicrosoftEdge/WebViewFeedback/issues/70)). -* > [!IMPORTANT] +* Added [ICoreWebView2ExperimentalNewWindowRequestedEventArgs::get_WindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalnewwindowrequestedeventargs?view=webview2-0.9.538-prerelease&preserve-view=true#get_windowfeatures), which fires when `window.open()` is run and associated with [ICoreWebView2ExperimentalWindowFeatures](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalwindowfeatures?view=webview2-0.9.538-prerelease&preserve-view=true) ([#70](https://github.com/MicrosoftEdge/WebViewFeedback/issues/70)). +* > [!IMPORTANT] > **Breaking Change**: Deprecated [CreateCoreWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.488&preserve-view=true#createcorewebview2environmentwithdetails) and replaced with [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.538&preserve-view=true#createcorewebview2environmentwithoptions). -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: In order to ensure the WebView2 API aligns with the Windows API naming conventions, the WebView2 team updated the names of the following. > - > * [AreRemoteObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.488&preserve-view=true#get_areremoteobjectsallowed) is now [AreHostObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.538&preserve-view=true#get_arehostobjectsallowed). + > * [AreRemoteObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.488&preserve-view=true#get_areremoteobjectsallowed) is now [AreHostObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.538&preserve-view=true#get_arehostobjectsallowed). -* Updated [AddHostObjectToScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.538&preserve-view=true#addhostobjecttoscript). The original host object serializer markers are now set to the proxy objects. Then host object serializer markers are serialized back as a host object when passed as a parameter in the JavaScript callback ([#148](https://github.com/MicrosoftEdge/WebViewFeedback/issues/148)). +* Updated [AddHostObjectToScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.538&preserve-view=true#addhostobjecttoscript). The original host object serializer markers are now set to the proxy objects. Then host object serializer markers are serialized back as a host object when passed as a parameter in the JavaScript callback ([#148](https://github.com/MicrosoftEdge/WebViewFeedback/issues/148)). #### .NET (0.9.538 prerelease) -* Released WinForms and WPF WebView2API Samples, which are comprehensive guides of the WebView2 SDK. See [Samples Repo](https://github.com/MicrosoftEdge/WebView2Samples). -* Added support for visual hosting and window features, as [experimental APIs](../concepts/versioning.md#experimental-apis). -* > [!IMPORTANT] +* Released WinForms and WPF WebView2API Samples, which are comprehensive guides of the WebView2 SDK. See [Samples Repo](https://github.com/MicrosoftEdge/WebView2Samples). +* Added support for visual hosting and window features, as [experimental APIs](../concepts/versioning.md#experimental-apis). +* > [!IMPORTANT] > **Breaking Change**: The following deferrals now implement `IDisposable`: [ScriptDialogOpening](/dotnet/api/microsoft.web.webview2.core.corewebview2.scriptdialogopening), [NewWindowRequested](/dotnet/api/microsoft.web.webview2.core.corewebview2.newwindowrequested), [WebResourceRequested](/dotnet/api/microsoft.web.webview2.core.corewebview2.webresourcerequested), and [PermissionRequested](/dotnet/api/microsoft.web.webview2.core.corewebview2.permissionrequested). -* Added [GetAvailableBrowserVersionString](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.getavailablebrowserversionstring) and [CompareBrowserVersions](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.comparebrowserversions) as [CoreWebView2Environment](/dotnet/api/microsoft.web.webview2.core.corewebview2environment) statics. +* Added [GetAvailableBrowserVersionString](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.getavailablebrowserversionstring) and [CompareBrowserVersions](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.comparebrowserversions) as [CoreWebView2Environment](/dotnet/api/microsoft.web.webview2.core.corewebview2environment) statics. @@ -8920,17 +8920,17 @@ Release Date: May 14, 2020 This Prerelease version of the WebView2 SDK requires Microsoft Edge version 84.0.515.0 or higher. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: WebView2 now supports Windows Forms and WPF on .NET Framework 4.6.2 or later and .NET Core 3.0 or later in the **prerelease package**. -* For more information about building WPF apps, see [Get started with WebView2 in WPF apps](../get-started/wpf.md) and the WebView2 [WPF Reference](/dotnet/api/microsoft.web.webview2.wpf) for WPF-specific APIs. -* For more information about building Windows Forms apps, see [Get started with WebView2 in WinForms apps](../get-started/winforms.md) and the WebView2 [Windows Forms Reference](/dotnet/api/microsoft.web.webview2.winforms) for Windows Forms specific APIs. -* For more information about the CoreWebView2 APIs, see [.NET Reference](/dotnet/api/microsoft.web.webview2.core). -* > [!CAUTION] +* For more information about building WPF apps, see [Get started with WebView2 in WPF apps](../get-started/wpf.md) and the WebView2 [WPF Reference](/dotnet/api/microsoft.web.webview2.wpf) for WPF-specific APIs. +* For more information about building Windows Forms apps, see [Get started with WebView2 in WinForms apps](../get-started/winforms.md) and the WebView2 [Windows Forms Reference](/dotnet/api/microsoft.web.webview2.winforms) for Windows Forms specific APIs. +* For more information about the CoreWebView2 APIs, see [.NET Reference](/dotnet/api/microsoft.web.webview2.core). +* > [!CAUTION] > **Known Issues**: The WebView2 team is aware of some issues in the prerelease that are being resolved in future releases. > - > * **DPI Awareness**: WebView2 for WPF is currently not DPI aware. When initializing WebView2 on high DPI monitors, there is a known issue where the WebView2 control at first initializes as a fraction of the window until the window is resized. - > * **WPF Designer**: The WPF designer isn't currently supported. Add the WebView2 control in your app by directly modifying the appropriate XAML in a text editor. + > * **DPI Awareness**: WebView2 for WPF is currently not DPI aware. When initializing WebView2 on high DPI monitors, there is a known issue where the WebView2 control at first initializes as a fraction of the window until the window is resized. + > * **WPF Designer**: The WPF designer isn't currently supported. Add the WebView2 control in your app by directly modifying the appropriate XAML in a text editor. @@ -8944,47 +8944,47 @@ Release Date: Apr. 20, 2020 This Release version of the WebView2 SDK requires Microsoft Edge version 84.0.488.0 or higher. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: Starting with the upcoming Microsoft Edge version 83, Evergreen WebView2 no longer targets the Stable browser channel. Instead, it targets another set of binaries, branded Evergreen WebView2 Runtime, that you can chain-install through an installer that the WebView2 team is currently developing. See [Distribute your app and the WebView2 Runtime](../concepts/distribution.md). -* > [!IMPORTANT] +* > [!IMPORTANT] > **Announcement**: Moving forward, the WebView2 team releases two packages: > * A Prerelease SDK package containing Experimental APIs (for you to try out), and also APIs that have been promoted to Stable status. > * A Release SDK package that consists entirely of APIs that have reached Stable status (for your confidence). > > To learn about the differences, see [Prerelease and Release SDKs for WebView2](../concepts/versioning.md). -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: In order to ensure the WebView2 API aligns with the Windows API naming conventions, the WebView2 team updated the names of the following interfaces. > - > * `CORE_WEBVIEW2_*` prefix is now `COREWEBVIEW2_*`. - > * [GetCoreWebView2BrowserVersionInfo](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.430&preserve-view=true#getcorewebview2browserversioninfo) is now [GetAvailableCoreWebView2BrowserVersionString](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.488&preserve-view=true#getavailablecorewebview2browserversionstring). - > * [get_BrowserVersionInfo](/microsoft-edge/webview2/reference/win32/icorewebview2environment?view=webview2-0.9.430&preserve-view=true#get_browserversioninfo) is now [get_BrowserVersionString](/microsoft-edge/webview2/reference/win32/icorewebview2environment?view=webview2-0.9.488&preserve-view=true#get_browserversionstring). - > * [AddRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#addremoteobject) is now [AddHostObjectToScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#addhostobjecttoscript). - > * [RemoveRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#removeremoteobject) is now [RemoveHostObjectFromScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#removehostobjectfromscript). - > * `chrome.webview.remoteObjects` is now `chrome.webview.hostObjects`. - -* > [!IMPORTANT] + > * `CORE_WEBVIEW2_*` prefix is now `COREWEBVIEW2_*`. + > * [GetCoreWebView2BrowserVersionInfo](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.430&preserve-view=true#getcorewebview2browserversioninfo) is now [GetAvailableCoreWebView2BrowserVersionString](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.488&preserve-view=true#getavailablecorewebview2browserversionstring). + > * [get_BrowserVersionInfo](/microsoft-edge/webview2/reference/win32/icorewebview2environment?view=webview2-0.9.430&preserve-view=true#get_browserversioninfo) is now [get_BrowserVersionString](/microsoft-edge/webview2/reference/win32/icorewebview2environment?view=webview2-0.9.488&preserve-view=true#get_browserversionstring). + > * [AddRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#addremoteobject) is now [AddHostObjectToScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#addhostobjecttoscript). + > * [RemoveRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#removeremoteobject) is now [RemoveHostObjectFromScript](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#removehostobjectfromscript). + > * `chrome.webview.remoteObjects` is now `chrome.webview.hostObjects`. + +* > [!IMPORTANT] > **Breaking Change**: The `AddRemoteObject` JS proxy methods are also renamed. > - > * `getLocal` is now `getLocalProperty`. - > * `setLocal` is now `setLocalProperty`. - > * `getRemote` is now `getHostProperty`. - > * `setRemote` is now `setHostProperty`. - > * `applyRemote` is now `applyHostFunction`. + > * `getLocal` is now `getLocalProperty`. + > * `setLocal` is now `setLocalProperty`. + > * `getRemote` is now `getHostProperty`. + > * `setRemote` is now `setHostProperty`. + > * `applyRemote` is now `applyHostFunction`. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: Deprecated [CreateCoreWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.488&preserve-view=true#createcorewebview2environmentwithdetails) and replaced with [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.9.488&preserve-view=true#createcorewebview2environmentwithoptions). -* Added [FrameNavigationCompleted](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#add_framenavigationcompleted) event. Now, when an `iframe` element completes navigation, an event is run and returns the success of the navigation and the navigation ID. -* Added [ICoreWebView2EnvironmentOptions](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.488&preserve-view=true) interface, which can be used to determine the version of the Evergreen WebView2 Runtime targeted by your app. -* Added [IsBuiltInErrorPageEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.488&preserve-view=true#get_isbuiltinerrorpageenabled) setting. Now, you can choose to turn on or off the built-in error webpage for navigation failure and render process failure. -* Updated Remote Object Injection to support .NET `IDispatch` implementations ([#113](https://github.com/MicrosoftEdge/WebViewFeedback/issues/113)). -* Updated [NewWindowRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#add_newwindowrequested) event to handle requests from context menus ([#108](https://github.com/MicrosoftEdge/WebViewFeedback/issues/108)). -* Released the first separate WebView2 prerelease package where you can access visual hosting APIs. The WebView2 team updated [APISample](https://github.com/MicrosoftEdge/WebView2Samples) to include the new experimental APIs. - * Added [ICoreWebView2ExperimentalCompositionController](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller?view=webview2-0.9.488-prerelease&preserve-view=true) interface, to connect to a composition tree and provide input for the WebView2 control. - * Added [ICoreWebView2ExperimentalPointerInfo](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalpointerinfo?view=webview2-0.9.488-prerelease&preserve-view=true), which contains all the information from a `POINTER_INFO`. This object is passed to SendPointerInput to inject pointer input into the WebView2. - * Added [ICoreWebView2ExperimentalCursorChangedEventHandler](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcursorchangedeventhandler?view=webview2-0.9.488-prerelease&preserve-view=true), which tells the app when the mouse cursor over the WebView2 control should be changed. When mouse is over a text box in the WebView2, the cursor changes from the arrow to the selector. The `cursor` property on the `CompositionController` tells the app what the mouse cursor should currently be for the WebView2. +* Added [FrameNavigationCompleted](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#add_framenavigationcompleted) event. Now, when an `iframe` element completes navigation, an event is run and returns the success of the navigation and the navigation ID. +* Added [ICoreWebView2EnvironmentOptions](/microsoft-edge/webview2/reference/win32/icorewebview2environmentoptions?view=webview2-0.9.488&preserve-view=true) interface, which can be used to determine the version of the Evergreen WebView2 Runtime targeted by your app. +* Added [IsBuiltInErrorPageEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.488&preserve-view=true#get_isbuiltinerrorpageenabled) setting. Now, you can choose to turn on or off the built-in error webpage for navigation failure and render process failure. +* Updated Remote Object Injection to support .NET `IDispatch` implementations ([#113](https://github.com/MicrosoftEdge/WebViewFeedback/issues/113)). +* Updated [NewWindowRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.488&preserve-view=true#add_newwindowrequested) event to handle requests from context menus ([#108](https://github.com/MicrosoftEdge/WebViewFeedback/issues/108)). +* Released the first separate WebView2 prerelease package where you can access visual hosting APIs. The WebView2 team updated [APISample](https://github.com/MicrosoftEdge/WebView2Samples) to include the new experimental APIs. + * Added [ICoreWebView2ExperimentalCompositionController](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcompositioncontroller?view=webview2-0.9.488-prerelease&preserve-view=true) interface, to connect to a composition tree and provide input for the WebView2 control. + * Added [ICoreWebView2ExperimentalPointerInfo](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalpointerinfo?view=webview2-0.9.488-prerelease&preserve-view=true), which contains all the information from a `POINTER_INFO`. This object is passed to SendPointerInput to inject pointer input into the WebView2. + * Added [ICoreWebView2ExperimentalCursorChangedEventHandler](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalcursorchangedeventhandler?view=webview2-0.9.488-prerelease&preserve-view=true), which tells the app when the mouse cursor over the WebView2 control should be changed. When mouse is over a text box in the WebView2, the cursor changes from the arrow to the selector. The `cursor` property on the `CompositionController` tells the app what the mouse cursor should currently be for the WebView2. @@ -9018,31 +9018,31 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 82.0.43 The WebView2 SDK is the official Win32 C++ Beta version, which incorporates several feature requests from feedback. The WebView2 team tries to limit the number of releases with breaking changes. As general availability approaches, several major breaking changes are incorporated in the Beta release. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: As the final release approaches the WebView2 team renamed the prefix `IWebView2WebView` to `ICoreWebView2` in order to make sure the WebView2 API aligns with the Windows API naming convention. Additionally, in order to leverage the WebView2 SDK from UI frameworks, the WebView2 team separated `ICoreWebView2` into [ICoreWebView2](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true) and [ICoreWebView2Host](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true). `ICoreWebView2Host` supports resizing, showing-and-hiding, focusing, and other functionality related to windowing and composition. ICoreWebView2 supports all other WebView2 functionality. To learn more about incorporating the changes, see the WebView2 [pull request](https://github.com/MicrosoftEdge/WebView2Samples/pull/17) in the WebView2 [APISample](https://github.com/MicrosoftEdge/WebView2Samples) project. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: Split [DocumentStateChanged](/microsoft-edge/webview2/reference/win32/iwebview2webview?view=webview2-0.8.355&preserve-view=true#add_documentstatechanged) into three components: [SourceChanged](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_sourcechanged), [ContentLoading](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_contentloading), and [HistoryChanged](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_historychanged). Now, when the source URL changes the `SourceChanged` event is run. When the history state is changed the `HistoryChanged` event is run. The `ContentLoading` event is run before the initial script when a new document is being loaded. -* Added support for ARM64 architecture. -* Added Soft Input Panel (SIP) support for touch screen devices. -* Added support for Windows Server 2008 R2, Windows Server 2012, Windows Server 2012 R2, and Windows Server 2016. -* Added [NotifyParentWindowPositionChanged](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#notifyparentwindowpositionchanged) for the status bar to follow the window in windowed mode. Also, implement the change in windowless mode in order for accessibility features to work. -* Added [AreRemoteObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.430&preserve-view=true#get_areremoteobjectsallowed) setting to globally control whether a webpage can be accessed by any remote objects. By default, `AreRemoteObjectsAllowed` is turned on, so remote objects added by [AddRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#addremoteobject) are accessible from the webpage. When `AreRemoteObjectsAllowed` is turned off, the objects aren't accessible from the webpage. Changes are applied on the next navigation event. -* Added [IsZoomControlEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.430&preserve-view=true#get_iszoomcontrolenabled) setting to prevent users from impacting the zoom of the WebView2 control using **Ctrl**+**+** and **Ctrl**+**-** (or **Ctrl**+ mouse wheel). Zoom can still be set using [put_ZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#put_zoomfactor) when the setting is turned off. -* Changed ZoomFactor to only apply to the current WebView2 control. Zoom changes to the current WebView2 control don't affect other WebViews that you navigated to using the same site of origin. See [get_ZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#get_zoomfactor). -* Hid ZoomView UI for WebView2 control ([#95](https://github.com/MicrosoftEdge/WebViewFeedback/issues/95)). -* Added [SetBoundsAndZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#setboundsandzoomfactor). Now, you can set the zoom factor and bounds of a WebView2 control at the same time. -* Added [WindowCloseRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_windowcloserequested) event. See [add_WindowCloseRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_windowcloserequested) ([#119](https://github.com/MicrosoftEdge/WebViewFeedback/issues/119)). -* Added support for the `beforeunload` dialog type for JavaScript dialog events and added [CORE_WEBVIEW2_SCRIPT_DIALOG_KIND_BEFOREUNLOAD](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#core_webview2_script_dialog_kind) enum entry. -* Added [GetHeaders](/microsoft-edge/webview2/reference/win32/icorewebview2httprequestheaders?view=webview2-0.9.430&preserve-view=true#getheaders) to HttpRequestHeaders, [GetHeader](/microsoft-edge/webview2/reference/win32/icorewebview2httpresponseheaders?view=webview2-0.9.430&preserve-view=true#getheader) to HttpResponseHeaders, and [get_HasCurrentHeader](/microsoft-edge/webview2/reference/win32/icorewebview2httpheaderscollectioniterator?view=webview2-0.9.430&preserve-view=true#get_hascurrentheader) property to HttpHeadersCollectionIterator. -* > [!IMPORTANT] +* Added support for ARM64 architecture. +* Added Soft Input Panel (SIP) support for touch screen devices. +* Added support for Windows Server 2008 R2, Windows Server 2012, Windows Server 2012 R2, and Windows Server 2016. +* Added [NotifyParentWindowPositionChanged](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#notifyparentwindowpositionchanged) for the status bar to follow the window in windowed mode. Also, implement the change in windowless mode in order for accessibility features to work. +* Added [AreRemoteObjectsAllowed](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.430&preserve-view=true#get_areremoteobjectsallowed) setting to globally control whether a webpage can be accessed by any remote objects. By default, `AreRemoteObjectsAllowed` is turned on, so remote objects added by [AddRemoteObject](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#addremoteobject) are accessible from the webpage. When `AreRemoteObjectsAllowed` is turned off, the objects aren't accessible from the webpage. Changes are applied on the next navigation event. +* Added [IsZoomControlEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-0.9.430&preserve-view=true#get_iszoomcontrolenabled) setting to prevent users from impacting the zoom of the WebView2 control using **Ctrl**+**+** and **Ctrl**+**-** (or **Ctrl**+ mouse wheel). Zoom can still be set using [put_ZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#put_zoomfactor) when the setting is turned off. +* Changed ZoomFactor to only apply to the current WebView2 control. Zoom changes to the current WebView2 control don't affect other WebViews that you navigated to using the same site of origin. See [get_ZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#get_zoomfactor). +* Hid ZoomView UI for WebView2 control ([#95](https://github.com/MicrosoftEdge/WebViewFeedback/issues/95)). +* Added [SetBoundsAndZoomFactor](/microsoft-edge/webview2/reference/win32/icorewebview2host?view=webview2-0.9.430&preserve-view=true#setboundsandzoomfactor). Now, you can set the zoom factor and bounds of a WebView2 control at the same time. +* Added [WindowCloseRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_windowcloserequested) event. See [add_WindowCloseRequested](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#add_windowcloserequested) ([#119](https://github.com/MicrosoftEdge/WebViewFeedback/issues/119)). +* Added support for the `beforeunload` dialog type for JavaScript dialog events and added [CORE_WEBVIEW2_SCRIPT_DIALOG_KIND_BEFOREUNLOAD](/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-0.9.430&preserve-view=true#core_webview2_script_dialog_kind) enum entry. +* Added [GetHeaders](/microsoft-edge/webview2/reference/win32/icorewebview2httprequestheaders?view=webview2-0.9.430&preserve-view=true#getheaders) to HttpRequestHeaders, [GetHeader](/microsoft-edge/webview2/reference/win32/icorewebview2httpresponseheaders?view=webview2-0.9.430&preserve-view=true#getheader) to HttpResponseHeaders, and [get_HasCurrentHeader](/microsoft-edge/webview2/reference/win32/icorewebview2httpheaderscollectioniterator?view=webview2-0.9.430&preserve-view=true#get_hascurrentheader) property to HttpHeadersCollectionIterator. +* > [!IMPORTANT] > **Breaking Change**: Modified `DevToolsProtocolEventReceived` behavior. Now, you can create a [DevToolsProtocolEventReceiver](/microsoft-edge/webview2/reference/win32/icorewebview2devtoolsprotocoleventreceiver?view=webview2-0.9.430&preserve-view=true) for a particular DevTools Protocol event and subscribe/unsubscribe to such event using [add_DevToolsProtocolEventReceived](/microsoft-edge/webview2/reference/win32/icorewebview2devtoolsprotocoleventreceiver?view=webview2-0.9.430&preserve-view=true#add_devtoolsprotocoleventreceived)/[remove_DevToolsProtocolEventReceived](/microsoft-edge/webview2/reference/win32/icorewebview2devtoolsprotocoleventreceiver?view=webview2-0.9.430&preserve-view=true#remove_devtoolsprotocoleventreceived). -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: Changed `WebMessageReceivedEventArgs` [get_WebMessageAsString](/microsoft-edge/webview2/reference/win32/iwebview2webmessagereceivedeventargs?view=webview2-0.8.355&preserve-view=true#get_webmessageasstring) property to a [TryGetWebMessageAsString](/microsoft-edge/webview2/reference/win32/icorewebview2webmessagereceivedeventargs?view=webview2-0.9.430&preserve-view=true#trygetwebmessageasstring) method. -* > [!IMPORTANT] +* > [!IMPORTANT] > **Breaking Change**: Changed `AcceleratorKeyPressedEventArgs` [Handle](/microsoft-edge/webview2/reference/win32/iwebview2acceleratorkeypressedeventargs?view=webview2-0.8.355&preserve-view=true#handle) method to a [get_Handled](/microsoft-edge/webview2/reference/win32/icorewebview2acceleratorkeypressedeventargs?view=webview2-0.9.430&preserve-view=true#get_handled) property. @@ -9057,10 +9057,10 @@ Release Date: Dec. 9, 2019 This Release version of the WebView2 SDK requires Microsoft Edge version 80.0.355.0 or higher. -* Released WebView2API Sample, a comprehensive guide of the WebView2 SDK. See [API Sample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample). -* Added IME support for all languages besides English ([#30](https://github.com/MicrosoftEdge/WebViewFeedback/issues/30)). -* Updated the API surface of the `WebResourceRequested` event in response to bug reports. Simultaneously specifying a filter and an event on creation is now deprecated. To create a web resource requested event, use [add_WebResourceRequested](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#add_webresourcerequested) to add the event and [AddWebResourceRequestedFilter](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#addwebresourcerequestedfilter) to add a filter. [RemoveWebResourceRequestedFilter](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#removewebresourcerequestedfilter) removes the filter ([#36](https://github.com/MicrosoftEdge/WebViewFeedback/issues/36)) ([#74](https://github.com/MicrosoftEdge/WebViewFeedback/issues/74)). -* > [!IMPORTANT] +* Released WebView2API Sample, a comprehensive guide of the WebView2 SDK. See [API Sample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample). +* Added IME support for all languages besides English ([#30](https://github.com/MicrosoftEdge/WebViewFeedback/issues/30)). +* Updated the API surface of the `WebResourceRequested` event in response to bug reports. Simultaneously specifying a filter and an event on creation is now deprecated. To create a web resource requested event, use [add_WebResourceRequested](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#add_webresourcerequested) to add the event and [AddWebResourceRequestedFilter](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#addwebresourcerequestedfilter) to add a filter. [RemoveWebResourceRequestedFilter](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#removewebresourcerequestedfilter) removes the filter ([#36](https://github.com/MicrosoftEdge/WebViewFeedback/issues/36)) ([#74](https://github.com/MicrosoftEdge/WebViewFeedback/issues/74)). +* > [!IMPORTANT] > **Breaking Change**: Modified fullscreen behavior. Deprecated [IsFullScreenAllowed](/microsoft-edge/webview2/reference/win32/iwebview2settings?view=webview2-0.8.355&preserve-view=true#get_isfullscreenallowed_deprecated). Now, by default, if an element in a WebView2 control (such as a video) is set to full screen, it fills the bounds of the WebView2 control. Use the [ContainsFullScreenElementChanged](/microsoft-edge/webview2/reference/win32/iwebview2containsfullscreenelementchangedeventhandler?view=webview2-0.8.355&preserve-view=true) event and [get_ContainsFullScreenElement](/microsoft-edge/webview2/reference/win32/iwebview2webview5?view=webview2-0.8.355&preserve-view=true#get_containsfullscreenelement) to specify how the app should resize the WebView2 control if an element wants to enter fullscreen mode. @@ -9079,17 +9079,17 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 80.0.31 #### Changes -* Added support for Windows 7, Windows 8, and Windows 8.1. See [Supported Windows versions](../index.md#supported-windows-versions) in _Introduction to Microsoft Edge WebView2_. -* Added Visual Studio and Visual Studio Code debug support for WebView2. Now, debug your script in the WebView2 right from your IDE. See [How to debug when developing with WebView2 controls](../how-to/debug.md). -* Added `Native Object Injection` for the running script in WebView2 to access an IDispatch object from the Win32 component of the app and access the properties of the IDispatch object. See [AddRemoteObject](/microsoft-edge/webview2/reference/win32/iwebview2webview4?view=webview2-0.8.355&preserve-view=true#addremoteobject) ([#17](https://github.com/MicrosoftEdge/WebViewFeedback/issues/17)). -* Added `AcceleratorKeyPressed` event. See [add_AcceleratorKeyPressed](/microsoft-edge/webview2/reference/win32/iwebview2webview4?view=webview2-0.8.355&preserve-view=true#add_acceleratorkeypressed) ([#57](https://github.com/MicrosoftEdge/WebViewFeedback/issues/57)). -* Turned off the `Context Menus`. See [put_AreDefaultContextMenusEnabled](/microsoft-edge/webview2/reference/win32/iwebview2settings2?view=webview2-0.8.355&preserve-view=true#put_aredefaultcontextmenusenabled) ([#57](https://github.com/MicrosoftEdge/WebViewFeedback/issues/57)). -* Updated `DPI Awareness`. Now, the DPI awareness of the WebView2 control is the same as the DPI awareness of the host app. +* Added support for Windows 7, Windows 8, and Windows 8.1. See [Supported Windows versions](../index.md#supported-windows-versions) in _Introduction to Microsoft Edge WebView2_. +* Added Visual Studio and Visual Studio Code debug support for WebView2. Now, debug your script in the WebView2 right from your IDE. See [How to debug when developing with WebView2 controls](../how-to/debug.md). +* Added `Native Object Injection` for the running script in WebView2 to access an IDispatch object from the Win32 component of the app and access the properties of the IDispatch object. See [AddRemoteObject](/microsoft-edge/webview2/reference/win32/iwebview2webview4?view=webview2-0.8.355&preserve-view=true#addremoteobject) ([#17](https://github.com/MicrosoftEdge/WebViewFeedback/issues/17)). +* Added `AcceleratorKeyPressed` event. See [add_AcceleratorKeyPressed](/microsoft-edge/webview2/reference/win32/iwebview2webview4?view=webview2-0.8.355&preserve-view=true#add_acceleratorkeypressed) ([#57](https://github.com/MicrosoftEdge/WebViewFeedback/issues/57)). +* Turned off the `Context Menus`. See [put_AreDefaultContextMenusEnabled](/microsoft-edge/webview2/reference/win32/iwebview2settings2?view=webview2-0.8.355&preserve-view=true#put_aredefaultcontextmenusenabled) ([#57](https://github.com/MicrosoftEdge/WebViewFeedback/issues/57)). +* Updated `DPI Awareness`. Now, the DPI awareness of the WebView2 control is the same as the DPI awareness of the host app. > [!NOTE] > If another hybrid app is launched with a different DPI Awareness than the original WebView2 control instance, the new WebView2 control instance isn't launched if the `user data folder` is the same ([#1](https://github.com/MicrosoftEdge/WebViewFeedback/issues/1)). -* Updated `Notification Change Behavior` so WebView2 automatically rejects notification permission requests prompted by web content hosted in the WebView2 control. +* Updated `Notification Change Behavior` so WebView2 automatically rejects notification permission requests prompted by web content hosted in the WebView2 control. @@ -9107,19 +9107,19 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 78.0.27 #### Changes -* Added `DocumentTitleChanged` event to indicate document title change ([Issue #27](https://github.com/MicrosoftEdge/WebViewFeedback/issues/27)). +* Added `DocumentTitleChanged` event to indicate document title change ([Issue #27](https://github.com/MicrosoftEdge/WebViewFeedback/issues/27)). -* Added `GetWebView2BrowserVersionInfo` API ([Issue #18](https://github.com/MicrosoftEdge/WebViewFeedback/issues/18)). +* Added `GetWebView2BrowserVersionInfo` API ([Issue #18](https://github.com/MicrosoftEdge/WebViewFeedback/issues/18)). -* Added `NewWindowRequested` event. +* Added `NewWindowRequested` event. -* Updated `CreateWebView2EnvironmentWithDetails` function to remove `releaseChannelPreference`. For more information about the `CreateWebView2EnvironmentWithDetails` function, see [CreateWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.8.355&preserve-view=true#createwebview2environmentwithdetails). The registry and environment variable override is still supported. The default channel preference is used unless overridden. +* Updated `CreateWebView2EnvironmentWithDetails` function to remove `releaseChannelPreference`. For more information about the `CreateWebView2EnvironmentWithDetails` function, see [CreateWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.8.355&preserve-view=true#createwebview2environmentwithdetails). The registry and environment variable override is still supported. The default channel preference is used unless overridden. During the channel search, the WebView2 team skips any previous channel version that isn't compatible with the WebView2 SDK. The WebView2 team selects the more stable channel to ensure the most consistent behaviors for the end user. When you test with the latest Canary build, you should create a script to set the `WEBVIEW2_RELEASE_CHANNEL_PREFERENCE` environment variable to `1` before launching the app. See [Test upcoming APIs and features](../how-to/set-preview-channel.md). -* Updated the `CreateWebView2EnvironmentWithDetails` function with logic for selecting `userDataFolder` when not specified. For more information about the `CreateWebView2EnvironmentWithDetails` function, see [CreateWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.8.355&preserve-view=true#createwebview2environmentwithdetails). If you previously used the default `userDataFolder` location, when you switch to the new SDK the default `userDataFolder` is reset (set to a new location in the host code directory) and your state is also reset. If the host process doesn't have permission to write to the specified directory, the `CreateWebView2EnvironmentWithDetails` function might fail. You can copy the data from the old `user data folder` to the new directory. +* Updated the `CreateWebView2EnvironmentWithDetails` function with logic for selecting `userDataFolder` when not specified. For more information about the `CreateWebView2EnvironmentWithDetails` function, see [CreateWebView2EnvironmentWithDetails](/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-0.8.355&preserve-view=true#createwebview2environmentwithdetails). If you previously used the default `userDataFolder` location, when you switch to the new SDK the default `userDataFolder` is reset (set to a new location in the host code directory) and your state is also reset. If the host process doesn't have permission to write to the specified directory, the `CreateWebView2EnvironmentWithDetails` function might fail. You can copy the data from the old `user data folder` to the new directory. @@ -9137,9 +9137,9 @@ This Release version of the WebView2 SDK requires Microsoft Edge version 77.0.23 #### Changes -* Added `Stop` API to stop all navigation and pending resource fetches ([Issue #28](https://github.com/MicrosoftEdge/WebViewFeedback/issues/28)). -* Added `.tlb` file to the NuGet package ([Issue #22](https://github.com/MicrosoftEdge/WebViewFeedback/issues/22)). -* Added .NET projects to the installer list in the NuGet package ([Issue #32](https://github.com/MicrosoftEdge/WebViewFeedback/issues/32)). +* Added `Stop` API to stop all navigation and pending resource fetches ([Issue #28](https://github.com/MicrosoftEdge/WebViewFeedback/issues/28)). +* Added `.tlb` file to the NuGet package ([Issue #22](https://github.com/MicrosoftEdge/WebViewFeedback/issues/22)). +* Added .NET projects to the installer list in the NuGet package ([Issue #32](https://github.com/MicrosoftEdge/WebViewFeedback/issues/32)). @@ -9153,15 +9153,15 @@ Release Date: Jun. 17, 2019 This Release version of the WebView2 SDK requires Microsoft Edge version 77.0.190.0 or higher. -* Added `get_AreDevToolsEnabled`/`put_AreDevToolsEnabled` to control if users can open DevTools ([Issue #16](https://github.com/MicrosoftEdge/WebViewFeedback/issues/16)). -* Added `get_IsStatusBarEnabled`/`put_IsStatusBarEnabled` to control if the status bar is displayed ([Issue #19](https://github.com/MicrosoftEdge/WebViewFeedback/issues/19)). -* Added `get_CanGoBack`/`GoBack`/`get_CanGoForward`/`GoForward` for going back and forward through navigation history. -* Added HTTP header types (`IWebView2HttpHeadersCollectionIterator`/`IWebView2HttpRequestHeaders`/`IWebView2HttpRequestHeaders`) for viewing and modifying HTTP headers in WebView2. -* Added 32-bit WebView2 support on 64-bit machines ([Issue #13](https://github.com/MicrosoftEdge/WebViewFeedback/issues/13)). -* Added WebView2 IDL to the SDK ([Issue #14](https://github.com/MicrosoftEdge/WebViewFeedback/issues/14)). -* Added lib to support `IID\_\*` interface ID objects ([Issue #12](https://github.com/MicrosoftEdge/WebViewFeedback/issues/12)). -* Added include path, linking, and autocopying of DLL files to NuGet `TARGET` file in SDK. -* Turned on requesting `window.open()` in script. +* Added `get_AreDevToolsEnabled`/`put_AreDevToolsEnabled` to control if users can open DevTools ([Issue #16](https://github.com/MicrosoftEdge/WebViewFeedback/issues/16)). +* Added `get_IsStatusBarEnabled`/`put_IsStatusBarEnabled` to control if the status bar is displayed ([Issue #19](https://github.com/MicrosoftEdge/WebViewFeedback/issues/19)). +* Added `get_CanGoBack`/`GoBack`/`get_CanGoForward`/`GoForward` for going back and forward through navigation history. +* Added HTTP header types (`IWebView2HttpHeadersCollectionIterator`/`IWebView2HttpRequestHeaders`/`IWebView2HttpRequestHeaders`) for viewing and modifying HTTP headers in WebView2. +* Added 32-bit WebView2 support on 64-bit machines ([Issue #13](https://github.com/MicrosoftEdge/WebViewFeedback/issues/13)). +* Added WebView2 IDL to the SDK ([Issue #14](https://github.com/MicrosoftEdge/WebViewFeedback/issues/14)). +* Added lib to support `IID\_\*` interface ID objects ([Issue #12](https://github.com/MicrosoftEdge/WebViewFeedback/issues/12)). +* Added include path, linking, and autocopying of DLL files to NuGet `TARGET` file in SDK. +* Turned on requesting `window.open()` in script. diff --git a/microsoft-edge/webview2/samples/webview2-winui3-sample.md b/microsoft-edge/webview2/samples/webview2-winui3-sample.md index ac45d8fff2..f7fbf794d9 100644 --- a/microsoft-edge/webview2/samples/webview2-winui3-sample.md +++ b/microsoft-edge/webview2/samples/webview2-winui3-sample.md @@ -10,9 +10,9 @@ ms.date: 11/05/2024 --- # WinUI 3 (Windows App SDK) sample app -* Sample name: **WebView2_WinUI3_Sample** -* Repo directory: [WebView2_WinUI3_Sample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2_WinUI3_Sample) -* Solution file: `WebView2_WinUI3_Sample.sln` +* Sample name: **WebView2_WinUI3_Sample** +* Repo directory: [WebView2_WinUI3_Sample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2_WinUI3_Sample) +* Solution file: `WebView2_WinUI3_Sample.sln` This sample demonstrates using a WebView2 control in a WinUI 3 (Windows App SDK) Packaged application. diff --git a/microsoft-edge/webview2/samples/webview2_sample_uwp.md b/microsoft-edge/webview2/samples/webview2_sample_uwp.md index 60c05875fd..6a816cf7b4 100644 --- a/microsoft-edge/webview2/samples/webview2_sample_uwp.md +++ b/microsoft-edge/webview2/samples/webview2_sample_uwp.md @@ -12,9 +12,9 @@ ms.date: 07/13/2022 This WebView2 sample demonstrates how to use the WebView2 control and WebView2 APIs to implement a web browser in a WinUI 2 (UWP) app. -* Sample name: **webview2_sample_uwp** -* Repo directory: [webview2_sample_uwp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/webview2_sample_uwp) -* Solution file: `webview2_sample_uwp.sln` +* Sample name: **webview2_sample_uwp** +* Repo directory: [webview2_sample_uwp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/webview2_sample_uwp) +* Solution file: `webview2_sample_uwp.sln` @@ -22,8 +22,8 @@ This WebView2 sample demonstrates how to use the WebView2 control and WebView2 A This sample includes the following NuGet packages: -* **Microsoft.NETCore.UniversalWindowsPlatform** -* **Microsoft.UI.Xaml - Prerelease** - includes Microsoft.Web.WebView2 SDK as a dependency. +* **Microsoft.NETCore.UniversalWindowsPlatform** +* **Microsoft.UI.Xaml - Prerelease** - includes Microsoft.Web.WebView2 SDK as a dependency. To demonstrate the latest features, this sample in the WebView2Samples repo is set up to use a prerelease version of the WinUI 2 SDK (listed as **Microsoft.UI.Xaml** in NuGet Package Manager), rather than a Stable version. The WinUI 2 SDK includes a compatible version of the WebView2 SDK, as a dependency of **Microsoft.UI.Xaml**. @@ -50,11 +50,11 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor 1. On your local drive, open the `.sln` file in Visual Studio, in the directory: - * `/WebView2Samples/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln` + * `/WebView2Samples/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln` or: - * `/WebView2Samples-main/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln` + * `/WebView2Samples-main/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln` @@ -152,8 +152,8 @@ Update the project's NuGet packages: 1. In NuGet Package Manager, click the **Installed** tab, and inspect the updated packages: - * **Microsoft.NETCore.UniversalWindowsPlatform** - * **Microsoft.UI.Xaml - Prerelease** + * **Microsoft.NETCore.UniversalWindowsPlatform** + * **Microsoft.UI.Xaml - Prerelease** ![The updated installed packages](./webview2_sample_uwp-images/webview2_sample_uwp-installed-pkgs.png) diff --git a/microsoft-edge/webview2/samples/webview2apissample.md b/microsoft-edge/webview2/samples/webview2apissample.md index 0f113c43af..dc9f13833b 100644 --- a/microsoft-edge/webview2/samples/webview2apissample.md +++ b/microsoft-edge/webview2/samples/webview2apissample.md @@ -12,10 +12,10 @@ ms.date: 01/20/2025 The **WebView2APISample** app demonstrates how to use the WebView2 control and WebView2 APIs to add features to a Win32 C++ app. This is the main Win32 sample, and has test webpages for the latest features and APIs, and hundreds of menuitems to test various APIs. -* Sample name: **WebView2APISample** -* Repo directory: [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) -* Solution file: `WebView2Samples.sln` (located in the parent directory, `\SampleApps\`) -* Project name in Solution Explorer: **WebView2APISample** +* Sample name: **WebView2APISample** +* Repo directory: [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) +* Solution file: `WebView2Samples.sln` (located in the parent directory, `\SampleApps\`) +* Project name in Solution Explorer: **WebView2APISample** **WebView2APISample** embeds a WebView2 control within a Win32 native application. @@ -395,9 +395,9 @@ The **WebView2APISample** app is an example of a hybrid application, with a Win3 ![Hybrid app](./webview2apissample-images/sample-app-layout-diagram.png) -* The Win32 part can directly access native Windows APIs. The top part of the **WebView2APISample** app is a Win32 component written in C++. This part of the application takes in UI inputs from the user and uses them to control the WebView. +* The Win32 part can directly access native Windows APIs. The top part of the **WebView2APISample** app is a Win32 component written in C++. This part of the application takes in UI inputs from the user and uses them to control the WebView. -* The WebView is a container for standard web technologies (HTML, CSS, and JavaScript). The main part of the **WebView2APISample** app is a WebView that can be repurposed using standard web technologies (HTML/CSS/JavaScript). The WebView can be navigated to websites or local content. +* The WebView is a container for standard web technologies (HTML, CSS, and JavaScript). The main part of the **WebView2APISample** app is a WebView that can be repurposed using standard web technologies (HTML/CSS/JavaScript). The WebView can be navigated to websites or local content. This hybrid approach allows you to create and iterate faster using web technologies, while still being able to take advantage of native functionality. The **WebView2APISample** app demonstrates how the Win32 component and the WebView component can interact with each other. diff --git a/microsoft-edge/webview2/samples/webview2browser.md b/microsoft-edge/webview2/samples/webview2browser.md index 25649a311f..5ffc1bfedf 100644 --- a/microsoft-edge/webview2/samples/webview2browser.md +++ b/microsoft-edge/webview2/samples/webview2browser.md @@ -20,9 +20,9 @@ This sample, **WebView2Browser**, is a web browser built with the [Microsoft Edg This sample has its own dedicated repo. -* Sample name: **WebView2Browser** -* Repo: [WebView2Browser](https://github.com/MicrosoftEdge/WebView2Browser) -* Solution file: `WebViewBrowserApp.sln` +* Sample name: **WebView2Browser** +* Repo: [WebView2Browser](https://github.com/MicrosoftEdge/WebView2Browser) +* Solution file: `WebViewBrowserApp.sln` ![The WebView2Browser sample app](./webview2browser-images/WebView2Browser.png) diff --git a/microsoft-edge/webview2/samples/webview2samplewincomp.md b/microsoft-edge/webview2/samples/webview2samplewincomp.md index 07f139528c..dc54675e3c 100644 --- a/microsoft-edge/webview2/samples/webview2samplewincomp.md +++ b/microsoft-edge/webview2/samples/webview2samplewincomp.md @@ -12,9 +12,9 @@ ms.date: 06/14/2022 This WebView2 sample embeds a WebView2 control within a Win32 native application. -* Sample name: **WebView2SampleWinComp** -* Repo directory: [WebView2SampleWinComp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2SampleWinComp) -* Solution file: `WebView2SampleWinComp.sln` +* Sample name: **WebView2SampleWinComp** +* Repo directory: [WebView2SampleWinComp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2SampleWinComp) +* Solution file: `WebView2SampleWinComp.sln` This sample is built as a Win32 Visual Studio 2019 project. It uses C++ and HTML/CSS/JavaScript in the WebView2 environment. @@ -71,7 +71,7 @@ This sample is built as a Win32 Visual Studio 2019 project. If the solution is already open, you can change the target as follows: -* In **Solution Explorer**, right-click the **WebView2SampleWinComp** project (not solution), and then click **Retarget Projects**. +* In **Solution Explorer**, right-click the **WebView2SampleWinComp** project (not solution), and then click **Retarget Projects**. @@ -84,8 +84,8 @@ To install a Windows 10 SDK: 1. Go to [Windows SDK and emulator archive](https://developer.microsoft.com/windows/downloads/sdk-archive/). 1. On one of the following rows, click the **Install SDK** link: - * Windows 10 SDK version 2104 (10.0.20348.0) (or later) - * Windows 10 SDK, version 1903 (10.0.18362.1) + * Windows 10 SDK version 2104 (10.0.20348.0) (or later) + * Windows 10 SDK, version 1903 (10.0.18362.1) A version-specific copy of `winsdksetup.exe` is downloaded to your `Downloads` directory. @@ -107,7 +107,7 @@ Do the previous step, "Open the Solution and set the Windows SDK target". Or, i ## Step 5 - Install workloads if prompted -* If prompted, install any Visual Studio workloads that are requested. In a separate window or tab, see [Install Visual Studio workloads](../how-to/machine-setup.md#install-visual-studio-workloads) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below. +* If prompted, install any Visual Studio workloads that are requested. In a separate window or tab, see [Install Visual Studio workloads](../how-to/machine-setup.md#install-visual-studio-workloads) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below. @@ -140,8 +140,8 @@ At the top of Visual Studio, set the build target, as follows: ## Step 7 - Update the installed packages This step is optional. The sample has preinstalled: -* A version of the WebView2 prerelease SDK. -* A version of the Windows Implementation Libraries (WIL). +* A version of the WebView2 prerelease SDK. +* A version of the Windows Implementation Libraries (WIL). 1. In **Solution Explorer**, right-click the **WebView2SampleWinComp** project (not the Solution node), and then select **Manage NuGet Packages**. The **NuGet Package Manager** tab opens. diff --git a/microsoft-edge/webview2/samples/webview2windowsformsbrowser.md b/microsoft-edge/webview2/samples/webview2windowsformsbrowser.md index 4efaf51d82..73066e1d4e 100644 --- a/microsoft-edge/webview2/samples/webview2windowsformsbrowser.md +++ b/microsoft-edge/webview2/samples/webview2windowsformsbrowser.md @@ -14,15 +14,15 @@ ms.date: 04/27/2022 This sample, **WebView2WindowsFormsBrowser**, demonstrates how to use the WebView2 control and WebView2 APIs to implement a web browser in a WinForms app. -* Sample name: **WebView2WindowsFormsBrowser** -* Repo directory: [WebView2WindowsFormsBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WindowsFormsBrowser) -* Solution file: `WebView2WindowsFormsBrowser.sln` +* Sample name: **WebView2WindowsFormsBrowser** +* Repo directory: [WebView2WindowsFormsBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WindowsFormsBrowser) +* Solution file: `WebView2WindowsFormsBrowser.sln` ![WebView2WindowsFormsBrowser app window](./webview2windowsformsbrowser-images/webview2windowsformsbrowser-app-window.png) -* The **Control** menu has toggle menuitems for **Accelerator Keys** and **Allow External Drop**. -* The **View** menu has **Zoom** and **Background Color** submenus. -* The **Events** button opens the **EventMonitor** window. +* The **Control** menu has toggle menuitems for **Accelerator Keys** and **Allow External Drop**. +* The **View** menu has **Zoom** and **Background Color** submenus. +* The **Events** button opens the **EventMonitor** window. @@ -44,11 +44,11 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor 1. On your local drive, open the `.sln` file in Visual Studio, in the directory: - * `/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` + * `/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` or: - * `/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` + * `/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` ## Step 4 - Install workloads if prompted @@ -134,11 +134,11 @@ Microsoft .NET Framework 4.6.2 Developer Pack is now installed on your machine. 1. If you just now installed .NET Framework 4.6.2 Developer Pack above, close Visual Studio, and then open the solution file in Visual Studio again, from the directory: - * `/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` + * `/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` or: - * `/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` + * `/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln` At the top of Visual Studio, set the build target, as follows: @@ -156,9 +156,9 @@ At the top of Visual Studio, set the build target, as follows: ![The WebView2WindowsFormsBrowser app window](./webview2windowsformsbrowser-images/webview2windowsformsbrowser-app-window.png) - * The **Control** menu has toggle menuitems for **Accelerator Keys** and **Allow External Drop**. - * The **View** menu has **Zoom** and **Background Color** submenus. - * The **Events** button opens the **EventMonitor** window. + * The **Control** menu has toggle menuitems for **Accelerator Keys** and **Allow External Drop**. + * The **View** menu has **Zoom** and **Background Color** submenus. + * The **Events** button opens the **EventMonitor** window. 1. In Visual Studio, select **Debug** > **Stop Debugging**. Visual Studio closes the app. diff --git a/microsoft-edge/webview2/samples/webview2wpfbrowser.md b/microsoft-edge/webview2/samples/webview2wpfbrowser.md index eca7e43e28..04ef373bc4 100644 --- a/microsoft-edge/webview2/samples/webview2wpfbrowser.md +++ b/microsoft-edge/webview2/samples/webview2wpfbrowser.md @@ -14,9 +14,9 @@ ms.date: 04/27/2022 This sample, **WebView2WpfBrowser**, is a WPF .NET app that demonstrates how to embed the WebView2 control and use WebView2 APIs to implement a web browser. -* Sample name: **WebView2WpfBrowser** -* Repo directory: [WebView2WpfBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) -* Solution file: `WebView2WpfBrowser.sln` +* Sample name: **WebView2WpfBrowser** +* Repo directory: [WebView2WpfBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) +* Solution file: `WebView2WpfBrowser.sln` This sample is built as a WPF Visual Studio 2019 project. It uses C# and HTML/CSS/JavaScript in the WebView2 environment. @@ -25,10 +25,10 @@ This sample showcases a selection of WebView2's event handlers and API methods t ![WebView2WpfBrowser sample app](./webview2wpfbrowser-images/webview2wpfbrowser-sample-app.png) The **WebView2WpfBrowser** sample app has the following menus, containing many useful menuitems: -* **File** -* **View** -* **Settings** -* **Scenario** +* **File** +* **View** +* **Settings** +* **Scenario** If this is your first time using WebView2, we recommend first following the Getting Started tutorial, which goes over how to create a WebView2 and walks through some basic WebView2 functionality. See [Get started with WebView2 in WPF apps](../get-started/wpf.md). @@ -55,11 +55,11 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor 1. On your local drive, open the `.sln` file in Visual Studio, in the directory: - * `/WebView2Samples/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln` + * `/WebView2Samples/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln` or: - * `/WebView2Samples-main/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln` + * `/WebView2Samples-main/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln` @@ -106,10 +106,10 @@ At the top of Visual Studio, set the build target, as follows: ## Step 7 - Explore the menus and inspect the code 1. Explore the **WebView2WpfBrowser** sample app's menus, containing many useful menuitems: - * **File** - * **View** - * **Settings** - * **Scenario** + * **File** + * **View** + * **Settings** + * **Scenario** 1. In the Visual Studio code editor, inspect the code: diff --git a/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md b/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md index a432a8fbff..b91d0ecbc1 100644 --- a/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md +++ b/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md @@ -15,9 +15,9 @@ ms.date: 07/20/2022 This WebView2 sample demonstrates how to use the WebView2 CDP extension to use the Chrome DevTools Protocol (CDP) in a WPF app. -* Sample name: **WV2CDPExtensionWPFSample** -* Repo directory: [WV2CDPExtensionWPFSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2CDPExtensionWPFSample) -* Solution file: `WV2CDPExtensionWPFSample.sln` +* Sample name: **WV2CDPExtensionWPFSample** +* Repo directory: [WV2CDPExtensionWPFSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2CDPExtensionWPFSample) +* Solution file: `WV2CDPExtensionWPFSample.sln` This sample, **WV2CDPExtensionWPFSample**, is built with the WebView2 CDP Extension (the **Microsoft.Web.WebView2.DevToolsProtocolExtension** NuGet package). This sample calls Chrome DevTools Protocol methods on a `DevToolsProtocolHelper` object in WebView2. @@ -57,11 +57,11 @@ Microsoft Visual Studio (with .NET support) is required. Microsoft Visual Studi 1. On your local drive, open the `.sln` file in Visual Studio, in the directory: - * `/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln` + * `/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln` or: - * `/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln` + * `/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln` If you want to use Visual Studio 2017, in Visual Studio, change the project's Platform Toolset in **Project Properties > Configuration properties > General > Platform Toolset**. To use Visual Studio 2017, you might also need to install a recent Windows SDK. diff --git a/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md b/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md index 26eacc8c10..2ede0baaf9 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md @@ -14,9 +14,9 @@ ms.date: 06/17/2022 This sample, **WV2DeploymentVSInstallerSample**, demonstrates how to deploy a WebView2 app by using the Visual Studio installer. -* Sample name: **WV2DeploymentVSInstallerSample** -* Repo directory: [WV2DeploymentVSInstallerSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentVSInstallerSample) -* Solution file: not provided in the repo. You create a solution file in the steps below. +* Sample name: **WV2DeploymentVSInstallerSample** +* Repo directory: [WV2DeploymentVSInstallerSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentVSInstallerSample) +* Solution file: not provided in the repo. You create a solution file in the steps below. To demonstrate how to deploy the Evergreen WebView2 Runtime with your app, this article describes how to use the [Microsoft Visual Studio Installer Project](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) extension for Visual Studio. You create a project of type **Setup Project**, to create an installer for the [Win32 sample app](./webview2apissample.md) (**WebView2APISample**). That installer that you create chain-installs the Evergreen WebView2 Runtime. diff --git a/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md b/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md index f479f871bb..4f6c4beddd 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md @@ -13,17 +13,17 @@ ms.date: 04/27/2022 This sample, **WV2DeploymentWiXBurnBundleSample**, demonstrates how to use a WiX Burn Bundle to deploy the WebView2 Runtime. Do the steps in this article to create a WiX installer that chain-installs the Evergreen WebView2 Runtime through Burn Bundle. -* Sample name: **WV2DeploymentWiXBurnBundleSample** -* Repo directory: [WV2DeploymentWiXBurnBundleSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXBurnBundleSample) -* Project file: `WV2DeploymentWiXBurnBundleSample.wixproj` +* Sample name: **WV2DeploymentWiXBurnBundleSample** +* Repo directory: [WV2DeploymentWiXBurnBundleSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXBurnBundleSample) +* Project file: `WV2DeploymentWiXBurnBundleSample.wixproj` This sample creates a [WiX](https://wixtoolset.org/) installer for the [Win32 sample app](webview2apissample.md). This sample uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime. This sample demonstrates these two different distribution approaches to distribute the WebView2 Runtime for your app: -* Downloading the Evergreen WebView2 Runtime Bootstrapper through a link stored in your app. -* Packaging the Evergreen WebView2 Runtime Bootstrapper with your app. +* Downloading the Evergreen WebView2 Runtime Bootstrapper through a link stored in your app. +* Packaging the Evergreen WebView2 Runtime Bootstrapper with your app. The other approach, not demonstrated in this sample, is packaging the Evergreen WebView2 Runtime Standalone Installer with your app. That approach is very similar to packaging the Evergreen WebView2 Runtime Bootstrapper with your app. @@ -144,10 +144,10 @@ If not done yet, install WiX Toolset Visual Studio 2019 Extension: 1. Open `Bundle.wxs` under the `WV2DeploymentWiXBurnBundleSample` project. Edit `Bundle.wxs` depending on which workflow you want to use: **To package the Evergreen WebView2 Runtime Bootstrapper with your app:** - * Uncomment the `` element below ``, and comment out other `` elements. + * Uncomment the `` element below ``, and comment out other `` elements. **To download the Evergreen WebView2 Runtime Bootstrapper through a link in your app:** - * Uncomment the `` element below ``, and comment out other `` elements. + * Uncomment the `` element below ``, and comment out other `` elements. 1. If you are packaging the Evergreen WebView2 Runtime Bootstrapper with your app, [download](https://developer.microsoft.com/microsoft-edge/webview2/) the Bootstrapper and place it under the enclosing `SampleApps` folder. diff --git a/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md b/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md index 238dbfc08c..7d1f5c1d1c 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md @@ -12,9 +12,9 @@ ms.date: 04/27/2022 This sample, **WV2DeploymentWiXCustomActionSample**, demonstrates how to use a WiX Custom Action to deploy the WebView2 Runtime. -* Sample name: **WV2DeploymentWiXCustomActionSample** -* Repo directory: [WV2DeploymentWiXCustomActionSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXCustomActionSample) -* Project file: `WV2DeploymentWiXCustomActionSample.wixproj` +* Sample name: **WV2DeploymentWiXCustomActionSample** +* Repo directory: [WV2DeploymentWiXCustomActionSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXCustomActionSample) +* Project file: `WV2DeploymentWiXCustomActionSample.wixproj` diff --git a/microsoft-edge/webview2/webview2-api-reference.md b/microsoft-edge/webview2/webview2-api-reference.md index e521d10743..244b2186b7 100644 --- a/microsoft-edge/webview2/webview2-api-reference.md +++ b/microsoft-edge/webview2/webview2-api-reference.md @@ -29,9 +29,9 @@ WebView2 is available for the following frameworks or platforms: * [Microsoft.Web.WebView2.Core](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/index) - Common to all WinRT frameworks. * [COM Interop/C++](/microsoft-edge/webview2/reference/winrt/interop/index) - Common to all WinRT frameworks. -* WinUI 2 (UWP) +* WinUI 2 (UWP) * [Microsoft.UI.Xaml.Controls.WebView2 Class](/windows/winui/api/microsoft.ui.xaml.controls.webview2) -* WinUI 3 (Windows App SDK) +* WinUI 3 (Windows App SDK) * [Microsoft.UI.Xaml.Controls.WebView2 Class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.webview2)