PowerShell Studio Adds Support for WebView2 Control

With the latest service build of PowerShell Studio (5.8.201), we have added a new control—WebView2—to our Toolbox pane along with a new file template. The WebView2 is a modernized, updated control of the WebBrowser control. WebView2 uses Microsoft Edge (Chromium) as a rendering engine, whereas the WebBrowser control uses Internet Explorer. This control enables you to embed web technologies (HTML, CSS, and JavaScript) in your native scripts or applications. For more specific information, here is the introductory article: Introduction to Microsoft Edge WebView2 – Microsoft Edge Development | Microsoft Docs

Setup

Dependencies

The computer that runs the script with the WebView2 control must have the WebView2 runtime installed. The WebView2 runtime is most likely already installed on your machine. Microsoft began installing the Microsoft Edge WebView2 runtime on most devices sometime in early 2021. In Windows 11, by default, the component is installed on the system. The runtime can be found here: WebView2 – Microsoft Edge Developer

The control doesn’t require the Microsoft Edge browser to actually run. So, even if the browser isn’t installed on your PC, let alone running, the Runtime process can and will run.

You will also need to add references to the WebView2 assemblies. To get these assemblies, you can open a PowerShell command shell running as administrator then run the following command to install the WebView2 NuGet package:

Install-Package Microsoft.Web.WebView2

This command is from the PackageManagement module using NuGet as a provider, which may need to be updated on your machine for this command to work.

After the package is installed, locate the following dll files under the PackageManagement folder in Program Files:

  • Microsoft.Web.WebView2.Core.dll
  • Microsoft.Web.WebView2.Winforms.dll
  • WebView2Loader.dll

The first two assemblies are located under the lib folder. For Windows PowerShell, your assemblies will be located in the net45 folder. For PowerShell 7.0, the assemblies will be located in the netcoreapp3.0 folder. At the time of this article release, this control does not work with the latest stable release build of PowerShell (7.2.1). The WebView2Loader.dll is located under the runtimes folder.

These assemblies need to be copied to the same folder or subfolder as your script, but only Microsoft.Web.WebView2.Core.dll and Microsoft.Web.WebView2.Winforms.dll need to be directly referenced from your script.

To add references to these assemblies in your psf file, you can add them manually or add them from the ribbon (Home->Edit):

This dialog has been updated to add references to assemblies with a path relative to the executing script. When adding your assemblies, you will need to select Browse:

Select your assemblies in your script’s folder and then click Open:

When added, it should look like the following:

Important: If your script needs to work on both Windows PowerShell and PowerShell 7, you will need different versions of these dlls—and to switch between them. This is because different versions of PowerShell are built on different versions of .NET that are not compatible with one another. As previously stated, at this time, PowerShell 7.2.1 is not supported. If your script definitely needs to work on both Windows PowerShell and PowerShell 7, I recommend using a Form project rather than a single PSF file and manually changing the assemblies in the Startup.pss file.

At this time, when the WebView2 control is added without the references, a warning is written to the Output pane:

This functionality will most likely change in the future.

Properties

When using the WebView2 control, a data folder (UserDataFolder) should be set. This can be set from the control’s CreationProperties of type Microsoft.Web.WebView2.WinForms.CoreWebView2CreationProperties. It is important to note that this property needs to be initialized before setting the UserDataFolder property. When a WebView2 control is added to a psf file, this property will be instantiated for you. There are instances where the WebView2 control will work when the UserDataFolder is not set, but this behavior is not consistent.

In the template that is mentioned later in this article, the UserDataFolder is set in the Form load event using the code snippet Get-ScriptDirectory to get the executing script’s folder:

$userDataFolder = Get-ScriptDirectory + "\WebData\"
if (!(Test-Path $userDataFolder))
{
New-Item -ItemType Directory -Path $userDataFolder
}
$webview.CreationProperties.UserDataFolder = $userDataFolder

Potential Issues

Any PSF file using a WebView2 control will not be backwards compatible with older builds of PowerShell Studio, because the Designer will not recognize the control. Opening the file will result in an error upon loading and possible data loss of the PSF file.

In a single PSF file, you cannot just manually add the assembly references to the Script tab. When the PSF file is exported to a PS1 file, the references will not be before the initialization of the WebView2 control and will result in an error. The references to the assemblies need to be added by the Assemblies dialog. This is not true for projects if the assembly is added manually in the Startup.pss or Globals.ps1 file. For more information on how a PSF is exported, please refer to the following article: Basics: Working with a PSF file in PowerShell Studio – SAPIEN Blog

There is also a potential issue of discrepancy between versions used to create the form and what is being loaded. When an event handler scriptblock is generated that uses a type of EventArgs defined in Microsoft.Web.WebView2.Core.dll, it looks like the following when using the CoreWebView2InitializationCompleted event:

$webview_CoreWebView2InitializationCompleted =[System.EventHandler`1[[Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs, Microsoft.Web.WebView2.Core, Version=1.0.1072.54, Culture=neutral, PublicKeyToken=2a8ab48044d2601e]]]

It’s not pretty to look at and it references the specific version of the assembly which will cause errors if a different version is loaded. This has been commented out and written like the following to avoid the version dependency:

$webview_CoreWebView2InitializationCompleted={

As a result of changing this line, when using $_, which is of type [Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs], it will lose auto-completion capability in PrimalSense.

It is also worth mentioning that when troubleshooting issues with the WebView2 control, it is a good habit to delete the UserDataFolder to completely remove any potential past errors.

WebView2 File Template

We have included a new file template in this release to help provide proper set up to use the control. This file template may change as functionality is updated or changed for the WebView2 control. The new file template named WebView2 can be found in the file menu (File->New->File):

After the references to the assemblies have been properly added, it should look similar to this when running:

Final Thoughts

If you have any thoughts on how we can improve the ease of use for this control, please let us know. You can submit suggestions or feature requests on the Wish List and Feature Requests forum or the Feature Requests page.