You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/ie-mode/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ If a tab uses IE mode, the tab has the following limitations:
46
46
47
47
If Internet Explorer isn't available on your computer, to debug the content of an IE mode tab, use IEChooser to open Internet Explorer DevTools, as follows:
48
48
49
-
1. In Windows, open the **Run** dialog. For example, press the `Windows logo key` + `R`.
49
+
1. In Windows, open the **Run** dialog. For example, press **Windows logo key + R**.
50
50
51
51
1. Enter `%systemroot%\system32\f12\IEChooser.exe`, and then click **OK**.
| Windows Information Protection |[Protect your enterprise data using Windows Information Protection (WIP)](/windows/security/information-protection/windows-information-protection/protect-enterprise-data-using-wip)|
291
+
| Microsoft Defender Application Guard |[Microsoft Defender Application Guard overview](/windows/security/threat-protection/microsoft-defender-application-guard/md-app-guard-overview)|
292
+
| Microsoft Endpoint Data Loss Prevention (DLP) |[Learn about Endpoint data loss prevention](/microsoft-365/compliance/endpoint-dlp-learn-about)|
293
+
| Microsoft Defender for Cloud Apps (Preview) |[Session policies](/defender-cloud-apps/session-policy-aad)|
294
+
| Microsoft Insider Risk Management |[Insider risk management](/microsoft-365/compliance/insider-risk-management-solution-overview)|
295
+
| Microsoft Edge management service |[Microsoft Edge management service](/deployedge/microsoft-edge-management-service)|
296
+
297
+
<!-- todo (Aug 2023): when the forthcoming anchor link section like https://learn.microsoft.com/defender-cloud-apps/session-policy-aad#integration-with-microsoft-edge-for-business-preview exists in destination page, replace row by:
298
+
| Microsoft Defender for Cloud Apps | [Integration with Microsoft Edge for business preview](/defender-cloud-apps/session-policy-aad#integration-with-microsoft-edge-for-business-preview) in _Session policies_ |
299
+
-->
293
300
294
301
These features become functional only on enterprise-managed devices by acquiring the right license for the feature or by the administrator deploying specific policies on the device.
**Note:** Support for the `widgets` manifest member and associated JavaScript APIs, documented below, is experimental and depends on Microsoft Windows functionality that's not widely available yet.
16
-
17
13
Various operating systems have widgets dashboards that let users read content and perform tasks. Examples of this include Android Home Screen widgets, macOS Dashboard and Today Panel widgets, the Apple Touch Bar, Samsung Daily Cards, Mini App widgets, and smart watch app companions.
18
14
19
15
On Windows 11, widgets appear in the widgets board which you open from the left corner of your taskbar:
@@ -24,39 +20,15 @@ In Windows 11, Progressive Web Apps (PWAs) can define widgets, update them, and
1. In the **Search flags** text box, type **Web App widgets**, and then in the **Web App widgets** dropdown menu, select **Enabled**:
40
-
41
-
23
+
## Install WinAppSDK
42
24
43
-
1. In the **Search flags** text box, this time type **Experimental Web Platform Features**, and then in the **Experimental Web Platform Features** dropdown menu, select **Enabled**:
44
-
45
-
46
-
47
-
1. Click the **Restart** button, which appears in the lower right.
48
-
49
-
#### Enable widgets for your users
50
-
51
-
To enable widget support in Microsoft Edge for users of your production PWA, enroll your site in the [Web App Widgets](https://developer.microsoft.com/microsoft-edge/origin-trials/web-app-widgets/registration/) origin trial.
52
-
53
-
To learn more about origin trials, see [Enroll your site in an origin trial](./origin-trials.md#enroll-your-site-in-an-origin-trial) in _Experimental features and origin trials_.
25
+
To enable developing widgets on your local machine, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
widgets are defined in your PWA manifest file, by using the `widgets` manifest member. This manifest member is an array that can contain multiple widget definitions.
31
+
Widgets are defined in your PWA manifest file, by using the `widgets` manifest member. This manifest member is an array that can contain multiple widget definitions.
60
32
61
33
```json
62
34
{
@@ -413,10 +385,14 @@ async function updateWidget(widget) {
413
385
414
386
PWAmp is a music player PWA demo application that defines a widget. The PWAmp widget lets users visualize the current song and play the previous or next songs.
415
387
416
-
1. Follow the instructions in [enable widgets in Microsoft Edge](#enable-widgets-in-microsoft-edge).
388
+
1. If not done yet, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
389
+
417
390
1. Go to [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) and install the app on Windows 11.
418
-
1. Open the Windows 11 widgets board by pressing **Ctrl+W**.
391
+
392
+
1. Open the Windows 11 widgets board by pressing **Windows logo key + W**.
393
+
419
394
1. Click **Add widgets** to open the **widgets settings** screen, scroll to the **PWAmp mini player** widget and add it.
395
+
420
396
1. Close the **widgets settings** screen. The **PWAmp mini player** is now displayed in the widgets board.
421
397
422
398
The PWAmp widget displays the current song and buttons to play the previous or next song.
description: Learn to develop experiences for the sidebar in Microsoft Edge, by either installing a Progressive Web App, or using the extension sidebar API.
4
+
author: MSEdgeTeam
5
+
ms.author: msedgedevrel
6
+
ms.topic: conceptual
7
+
ms.prod: microsoft-edge
8
+
ms.date: 08/04/2023
9
+
---
10
+
# Develop for the sidebar
11
+
12
+
The sidebar in Microsoft Edge is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs. The content in the sidebar augments the user's primary task by enabling side-by-side browsing and minimizing the need to switch contexts between browser tabs. By using the sidebar in Microsoft Edge, users can access the productivity tools they need while staying in their workflow.
13
+
14
+
15
+
16
+
As a developer, you can leverage the sidebar for your own experiences in two ways:
17
+
18
+
* By adapting your existing Progressive Web App (PWA) to run in the sidebar.
19
+
* By making use of the Sidebar API in your Microsoft Edge extension.
The two different ways in which you can leverage the sidebar are designed to meet different developer needs. The following are the key differences between sidebar apps and sidebar extensions:
26
+
27
+
| Aspect | Sidebar app | Sidebar extension |
28
+
|---|---|---|
29
+
| Term definition | A Progressive Web App (PWA) that runs in the sidebar. | A Microsoft Edge extension that displays content in the sidebar. |
30
+
| Distribution | Like a website, the app is hosted on the app's web server. | The extension is distributed through the [Microsoft Edge Add-ons website](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home). |
31
+
| Capabilities | The app can make use of all web APIs and features, as well as PWA capabilities such as offline support, push, or file system access. | The extension can make use of powerful extension APIs, such as reading or modifying the current page. |
32
+
| Context | The app runs in its own web context, separate from the main tab. | The extension can access the current webpage and modify the webpage via the extension's content script. |
33
+
| Installation | The user installs the app by interacting with the sidebar when visiting the app's website. | The extension is installed by the user from the [Microsoft Edge Add-ons website](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home). |
34
+
| User experience | The app has its own icon in the sidebar. Clicking the icon opens the sidebar if it was closed and displays the app's contents. | The user experience depends on the extension. The extension can open the sidebar depending on the websites the user visits in the browser. |
35
+
| Technologies used | Web development and PWA. See [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps-chromium/index.md). | Extension development. See [Overview of Microsoft Edge extensions](../extensions-chromium/index.md). |
Sidebar apps allow you to adapt your existing Progressive Web App (PWA) to securely run alongside other browser tabs for a side-by-side co-browsing experience. This approach is a great choice for web developers who want to offer companion experiences including social, messaging, or media apps that don't require advanced extensions capabilities.
42
+
43
+
The sidebar app infrastructure helps users discover and install sidebar apps as they browse the web, providing great discoverability for your app just by making a simple change to your web application manifest file. Sidebar apps are a great option if you want to reuse your existing web app for the sidebar in Microsoft Edge and make full use of the web capabilities that are available to PWAs.
44
+
45
+
To learn more about PWAs and how to create them, see [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps-chromium/index.md). And to learn more about adapting your existing PWA to the sidebar in Microsoft Edge, see [Build PWAs for the sidebar in Microsoft Edge](../progressive-web-apps-chromium/how-to/sidebar.md).
Microsoft Edge extensions can optionally use the sidebar API to show a custom UI in the sidebar in Microsoft Edge. This is in addition to the other places extensions also appear in, such as in the Microsoft Edge toolbar, or as popups.
52
+
53
+
If your app's experience relies on powerful extensions APIs, for example to read or modify the current page, then a sidebar extension provides these capabilities. Users can find and install these extensions through the [Microsoft Edge Add-ons website](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home). The Microsoft Edge team continues to evolve these sidebar extensibility models and welcomes your feedback. To leave feedback, [create a new issue](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new/) on the repo, or [search for existing issues](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues) and join existing conversations.
54
+
55
+
To learn more about Microsoft Edge extensions and how to create them, see [Overview of Microsoft Edge extensions](../extensions-chromium/index.md). And to learn more about using the sidebar API in your extension, see [Extensions in the Microsoft Edge sidebar](../extensions-chromium/developer-guide/sidebar.md).
Copy file name to clipboardExpand all lines: microsoft-edge/web-platform/web-platform.md
+21-7Lines changed: 21 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
6
6
ms.topic: conceptual
7
7
ms.prod: microsoft-edge
8
8
ms.technology: devtools
9
-
ms.date: 11/28/2022
9
+
ms.date: 07/24/2023
10
10
---
11
11
# Development tips for Microsoft Edge
12
12
@@ -16,6 +16,7 @@ There are many tips and tricks to be aware of when building websites or web apps
16
16
* Moving users to Microsoft Edge from Internet Explorer.
17
17
* Configuring tracking prevention in Microsoft Edge.
18
18
* Detecting Microsoft Edge from your website.
19
+
* Developing experiences for the sidebar in Microsoft Edge.
19
20
* Detecting Windows 11 by using User-Agent Client Hints.
20
21
* Customizing the **password reveal** button.
21
22
* Viewing formatted JSON responses and files in browser tabs.
@@ -30,7 +31,7 @@ This article lists the schedule of changes for Microsoft Edge and the Chromium p
30
31
31
32
The web platform is a collection of technologies used for building webpages, including HTML, CSS, JavaScript, and many other open standards. The web platform constantly evolves to improve the user experience, security, and privacy. In some cases, changes may affect the functionality of existing webpages.
32
33
33
-
See [Site compatibility-impacting changes coming to Microsoft Edge](site-impacting-changes.md).
34
+
See [Site compatibility-impacting changes coming to Microsoft Edge](./site-impacting-changes.md).
@@ -40,7 +41,7 @@ When an Internet Explorer user visits an incompatible public website, the user m
40
41
41
42
To minimize disruptions, Microsoft Edge supports a new capability that automatically redirects users. When an Internet Explorer user goes to a website that's incompatible with Internet Explorer, Windows can automatically redirect the user to Microsoft Edge. Only websites that are part of the _Need Microsoft Edge_ list are redirected.
42
43
43
-
See [Move users to Microsoft Edge from Internet Explorer](ie-to-microsoft-edge-redirection.md).
44
+
See [Move users to Microsoft Edge from Internet Explorer](./ie-to-microsoft-edge-redirection.md).
@@ -50,7 +51,7 @@ The tracking prevention feature in Microsoft Edge protects users from online tra
50
51
51
52
The tracking prevention feature is built to uphold the Microsoft Edge _browser privacy promise_, while also ensuring that there is no impact by default to website compatibility or the economic viability of the web.
52
53
53
-
See [Tracking prevention in Microsoft Edge](tracking-prevention.md).
54
+
See [Tracking prevention in Microsoft Edge](./tracking-prevention.md).
@@ -64,7 +65,20 @@ Microsoft Edge enables your website to retrieve user agent information. You use
64
65
65
66
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.
66
67
67
-
See [Detect Microsoft Edge from your website](user-agent-guidance.md).
68
+
See [Detect Microsoft Edge from your website](./user-agent-guidance.md).
## Develop experiences for the sidebar in Microsoft Edge
73
+
74
+
The sidebar in Microsoft Edge is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs. The content in the sidebar augments the user's primary task by enabling side-by-side browsing and minimizing the need to switch contexts between browser tabs. With the sidebar in Microsoft Edge, users can access the productivity tools they need, while staying in their workflow.
75
+
76
+
As a developer, you can leverage the sidebar for your own experiences in two ways:
77
+
78
+
* By adapting your existing Progressive Web App (PWA) to run in the sidebar.
79
+
* By making use of the Sidebar API in your Microsoft Edge extension.
The `password` input control in Microsoft Edge includes a **password reveal** button. To make sure that the password is entered correctly, a user can click the **password reveal** button or press **Alt+F8**, to show the characters in the password field. You can remove the **password reveal** control, or customize the control styling.
92
106
93
-
See [Customize the password reveal button](password-reveal.md).
107
+
See [Customize the password reveal button](./password-reveal.md).
Copy file name to clipboardExpand all lines: microsoft-edge/webview2/get-started/winui2.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -343,7 +343,7 @@ Saving files via **Save As** is working and is enabled for WebView2 for UWP apps
343
343
344
344
If the host doesn't change the `ResultFilePath` of the downloaded file, the downloaded files will be downloaded to a subfolder with the app package's name in the `Downloads` folder.
345
345
346
-
If the host changes the `ResultFilePath` of the downloaded file, the file will only be downloaded if the app has access to that file path by default, regardless of the capabilities that are set. The `ResultFilePath` must be set to a location in the application install directory or in the application data locations.
346
+
If the host changes the `ResultFilePath` of the downloaded file, the file will only be downloaded if the app has access to that file path by default. If you want to use a file location that the app doesn't have access to by default, you must set the corresponding capability. See [App capability declarations](/windows/uwp/packaging/app-capability-declarations) in the UWP documentation.
0 commit comments