Is WebView2 supported in Excel VSTO Add-in?

[Yuandi-Jin]

I tried sample projects in https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf and https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/winforms, they worked.

Then I created a new Excel VSTO Add-in project in Visual Studio. After addingWebView2 package, I could not use it. So, is WebView2 supported in Excel VSTO Add-in project?

Details:

1. Added a Form (Windows Forms) item - WebView2 is not in the Toolbox (but it is in the Toolbox in a Windows Forms .NET Framework App).
2. Added a User Control (WPF) item - modified it to be similar to the MainWindow in https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf, but the browser is never successfully created.

AB#28795785

[liminzhu]

Hey @Yuandi-Jin we're enlisting help from the VSTO Add-in team to look into this as none of us on the WebView2 team is very similar with that. Will get back to you!

[Yuandi-Jin]

@liminzhu Cool! As I said I was able to use WebView2 in a few other types of projects. Looking forward to the feedback and insights from VSTO Add-in team.

For completeness, here are the versions:
WebView2.0.9.515-prerelease
Microsoft Edge 84.0.516.1 dev 64-bit
.NET framework: 4.8.03752
Visual Studio Enterprise 2019 16.4.3

[John-Hart]

Hi @Yuandi-Jin,

I work on the Office Developer Tools team in Visual Studio and we haven't tested this before you opened this issue so I'm looking into it now. I did find that the WebView2 control does appear in the toolbox when I have a Windows Form open in the designer, in a VSTO Add-in project, when I installed WebView 2.0.9.515-prerelease.

When I tried to run the Add-in however, I ran into the issue described here, MicrosoftDocs/edge-developer#693 where the CoreWebView2 was null.

I would expect that this control should work similar to how it does with Winforms but there are some known issues that may effect this so once issues like (693) are fixed I'll try it again and I'll update this issue.

[Yuandi-Jin]

Hi @John-Hart ,

re: Form (Windows Forms) item
I don't see it in Toolbox. Here's what I did:
a. Create new project. Type: Excel VSTO Add-in. Tags: C#, Windows, Office.
b. Manage NuGet Packages... Installed WebView2.0.9.515-prerelease.
c. Right click on the project, Add, New Item... Choose Form (Windows Forms).
d. Open the form, Search for WebView2 in toolbox, no luck.
Screenshots

re: User Control (WPF) item
When debugging in Visual Studio, I did see that CoreWebView2 was null. Guess I have to wait.

[John-Hart]

@Yuandi-Jin can you check if Tools > Options > Windows Forms Designer > General > "Automatically Populate Toolbox" = True in Visual Studio? Also does it appear after a build? If that doesn't work try adding it manually, right click on toolbox select Choose Items... and Browse to and select the %ProjectName%\packages\Microsoft.Web.WebView2.0.9.515-prerelease\lib\net462\Microsoft.Web.WebView2.WinForms.dll

[John-Hart]

I should also say, if you add the control manually to the toolbox, I would recommend not leaving it in the toolbox since it points to the one in the specific project folder and not a shared location. It should work when the packages is added to the project, this is more of a test to see if it can be added successfully.

[Yuandi-Jin]

@John-Hart
Thanks! About WebView2 not in Toolbox:

1. Tools > Options > Windows Forms Designer > General > "Automatically Populate Toolbox" - yes it's already True in Visual Studio;
2. It did not appear after a build;
3. I added it manually. Then I was able to drag it onto the form.
   However, I'd expect a more "automatic" experience like in a Windows Forms .NET Framework App.

Then I hit a null reference error. Inspired by 182, I fixed it:
I found {user}\source\repos\ExcelAddIn1\ExcelAddIn1\bin\Debug\WebView2Loader.dll to be x86, and replaced it with the x64 one under {user}\source\repos\ExcelAddIn1\packages\Microsoft.Web.WebView2.0.9.515-prerelease\build\x64.
My Excel is x64.

After that, I got this

Fixed it by setting a registry key to change UserDirPolicy, according to 179.

Now I don't see any errors but the browser is blank. CoreWebView2 is null. I guess both paths (WinForms, WPF) are blocked similarly.

[champnic]

@Yuandi-Jin The loader issue should be fixed in newer SDKs. For the UserDataFolder, you can set it using EnsureCoreWebView2Async instead of setting the Source property:

// Set the UserDataFolder to something that the runtime can write to.
var env = await CoreWebView2Environment.CreateAsync(null, "C:\\temp");
await webView21.EnsureCoreWebView2Async(env);
webView21.CoreWebView2.Navigate("https://bing.com");

[champnic]

Please reply or reopen this issue if it's still not working for you.

[Yuandi-Jin]

I tried again with WebVew2 v0.9.579-prerelease and Edge Version 87.0.630.0 (Official build) canary (64-bit).

1. The loader issue still exists (found x86 WebView2Loader.dll in Debug folder).

2. I'm not sure where to use the code that you shared. In my Excel VSTO add-in project, I added a WPF UserControl named MainWindow. I attempted to add your code after InitializeComponent() and got a COM exception.

public partial class MainWindow : Window
{
   public MainWindow ()
   {
      InitializeComponent ();
      InitializeWebView2Async (); // where to put this?
   }

   private async void InitializeWebView2Async ()
   {
      var env = await CoreWebView2Environment.CreateAsync (null, "C:\\temp");
      await webView21.EnsureCoreWebView2Async (env);
      webView21.CoreWebView2.Navigate ("https://bing.com");
   }

   private void ButtonGo_Click (object sender, RoutedEventArgs e)
   {
      if (webView21 != null && webView21.CoreWebView2 != null)
      {
         webView21.CoreWebView2.Navigate (addressBar.Text);
      }
   }
}

Exception:

System.InvalidCastException
  HResult=0x80004002
  Message=Unable to cast COM object of type 'System.__ComObject' to interface type 'Microsoft.Web.WebView2.Core.Raw.ICoreWebView2Controller'. This operation failed because the QueryInterface call on the COM component for the interface with IID '{7CCC5C7F-8351-4572-9077-9C1C80913835}' failed due to the following error: No such interface supported (Exception from HRESULT: 0x80004002 (E_NOINTERFACE)).
  Source=mscorlib
  StackTrace:
   at System.StubHelpers.StubHelpers.GetCOMIPFromRCW(Object objSrc, IntPtr pCPCMD, IntPtr& ppTarget, Boolean& pfNeedsRelease)
   at Microsoft.Web.WebView2.Core.Raw.ICoreWebView2Controller.set_Bounds(tagRECT Bounds)
   at Microsoft.Web.WebView2.Core.CoreWebView2Controller.set_Bounds(Rect value)
   at Microsoft.Web.WebView2.Wpf.WebView2.<>c__DisplayClass25_0.<<EnsureCoreWebView2Async>g__Init|0>d.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
   at ExcelAddIn1.MainWindow.<InitializeWebView2Async>d__1.MoveNext() in C:\Users\yuandjin\source\repos\ExcelAddIn1\MainWindow.xaml.cs:line 20

I cannot reopen the issue. Please reopen it for me. Thanks.

[Yuandi-Jin]

Update: updated SDK to v0.9.628-prerelease. Now I'm not getting any issue from the loader. I guess that's been fixed since I do see x64 and x86 folders under Debug or Release.
But the InvalidCastException remains. It's around this line:
await webView21.EnsureCoreWebView2Async (env);

[champnic]

Thanks @Yuandi-Jin I've changed this item to a bug on our end to track this. We'll take a look.

[champnic]

@Yuandi-Jin Do you think the remaining issue could be related to #431?

[Yuandi-Jin]

@champnic That NRE in #437 looks familiar. I tried both Form Windows Forms and User Control (WPF) in VSTO add-in at first.
However, the remaining issue here is with User Control (WPF) and the exception is clearly different. So please consider them separately unless proven otherwise.

Back to my question, did I use your code (wrapped in InitializeWebView2Async) in the right way? Thanks.

[champnic]

Ah, sorry I missed that you had switched to WPF. Is your XAML code setting "Source"? If so, you need to remove that.

[Yuandi-Jin]

My XAML code was not setting Source.

Inspired by that comment, I was able to go further on the track of Form (Windows Forms). I don't want to add too much distraction but FWIW I saw the Bing page successfully in WebView2 after commenting out a line in MainForm.Designer.cs

private void InitializeComponent ()
{
    this.webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
    this.SuspendLayout();
    // 
    // webView21
    // 
    this.webView21.Location = new System.Drawing.Point(13, 13);
    this.webView21.Name = "webView21";
    this.webView21.Size = new System.Drawing.Size(775, 425);
    //this.webView21.Source = new System.Uri("about:blank", System.UriKind.Absolute); // comment out this line!
    this.webView21.TabIndex = 0;
    this.webView21.Text = "webView21";
    this.webView21.ZoomFactor = 1D;
    //...omitted
}

It's a hack. We all know that modifying the auto-generated designer code is bad. You may want to track that separately.

The MainForm class:

   public partial class MainForm : Form
   {
      public MainForm ()
      {
         InitializeComponent ();
         InitializeWebView2Async ();
      }

      public async void InitializeWebView2Async ()
      {
         var env = await CoreWebView2Environment.CreateAsync (null, "C:\\temp");
         await webView21.EnsureCoreWebView2Async (env);
         webView21.CoreWebView2.Navigate ("https://bing.com");
      }
   }

[Yuandi-Jin]

Now back to the User Control (WPF) track.
I changed ShowDialog() to Show() and I was able to see Bing page in WebView2.

private void ThisAddIn_Startup (object sender, System.EventArgs e)
{
    MainWindow window1 = new MainWindow ();
    // window1.ShowDialog (); // gets System.InvalidCastException, see my earlier comment
    window1.Show (); // System.InvalidOperationException, see below
}

The problem is that after closing Excel (since it's an Excel add-in), I got InvalidOperationException.

System.InvalidOperationException
  HResult=0x80131509
  Message=The calling thread cannot access this object because a different thread owns it.
  Source=Microsoft.Web.WebView2.Wpf
  StackTrace:
   at Microsoft.Web.WebView2.Wpf.WebView2.get_CoreWebView2()
   at Microsoft.Web.WebView2.Wpf.WebView2.Dispose(Boolean disposing)

  This exception was originally thrown at this call stack:
    [External Code]

[champnic]

Re: Winforms - Commenting out Source property is the right way to do it currently. I agree that it's kind of bad though, so we're currently making changes to not require the Designer to specify the Source property unless necessary (because it kicks off the implicit initialization).

Re: WPF - I'm not familiar with WPF for Excel add-in, so if you could share a sample app that would be appreciated. It seems like one of the restrictions they have is to call Show instead of ShowDialog - I don't think WebView2 would be restricting that (you could test by removing WV2 and just using a button or something).

For the InvalidOperationException, Dispose needs to be called on the same thread as the WebView2 control. You probably need to clean it up using .Close() or .Dispose() yourself when the MainWindow is closing. Can you give that a try?

[cgeier]

@Yuandi-Jin For WPF, initializing CoreWebView2 can be done in the window "Loaded" event handler. It needs to use "await" so add "async". private async void Window_Loaded(object sender, RoutedEventArgs e). The code below also shows how to specify the web cache folder:

MainWindow.xaml

<Window x:Class="WebView2WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WebView2WpfTest"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Closing="Window_Closing"
        Loaded="Window_Loaded"
        Title="MainWindow" Height="450" Width="800">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5"/>
        </Grid.RowDefinitions>

        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="35"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="250*"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="5"/>
            </Grid.ColumnDefinitions>
            
            <Button Grid.Row="0" Grid.Column="1" x:Name="btnBack" Click="btnBack_Click"  Content="Back"  HorizontalAlignment="Stretch"/>
            <Button Grid.Row="0" Grid.Column="3" x:Name="btnForward" Click="btnForward_Click"  Content="Forward" HorizontalAlignment="Stretch" />
            <Label Grid.Row="0" Grid.Column="5">URL:</Label>
            <TextBox Grid.Row="0" Grid.Column="7" Name = "textBoxAddressBar" HorizontalAlignment="Stretch" VerticalAlignment="Center" MinWidth="400"  KeyDown="textBoxAddressBar_KeyDown">https://www.microsoft.com</TextBox>
            <Button Grid.Row="0" Grid.Column="9" x:Name="btnGo" Click="btnGo_Click" Content="Go" HorizontalAlignment="Stretch" Width="30"/>
            <Button Grid.Row="0" Grid.Column="11" x:Name="btnStop" Click="btnStop_Click"  Content="Stop" HorizontalAlignment="Stretch" Width="30"/>
        </Grid>


        <wv2:WebView2 Grid.Row="2" 
                      Name="webView21"
                      CoreWebView2Ready="webView21_CoreWebView2Ready" />
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Web.WebView2.Wpf;
using Microsoft.Web.WebView2.Core;
using System.Diagnostics;
using System.Threading;

namespace WebView2WpfTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("Info: before InitializeCoreWebView2Async");

            //initialize CoreWebView2
            //await InitializeCoreWebView2Async();
            await InitializeCoreWebView2Async(webView21, @"C:\Temp");

            Debug.WriteLine("Info: after InitializeCoreWebView2Async");

            //navigate to URL by setting Source property
            webView21.Source = new Uri("https://www.microsoft.com", UriKind.Absolute);
        }

        public async Task InitializeCoreWebView2Async()
        {
            Debug.WriteLine("Info: before EnsureCoreWebView2Async");

            //wait for CoreWebView2 initialization
            await webView21.EnsureCoreWebView2Async();

            Debug.WriteLine("Info: after EnsureCoreWebView2Async");

        }

        public async Task InitializeCoreWebView2Async(WebView2 wv, string webCacheDir = "")
        {
            CoreWebView2EnvironmentOptions options = null;
            string tempWebCacheDir = string.Empty;
            CoreWebView2Environment webView2Environment = null;

            //set value
            tempWebCacheDir = webCacheDir;

            if (String.IsNullOrEmpty(tempWebCacheDir))
            {
                //get fully-qualified path to user's temp folder
                tempWebCacheDir = System.IO.Path.GetTempPath();

                tempWebCacheDir = System.IO.Path.Combine(tempWebCacheDir, System.Guid.NewGuid().ToString("N"));
            }

            //webView2Environment = await CoreWebView2Environment.CreateAsync(@"C:\Program Files (x86)\Microsoft\Edge Dev\Application\85.0.564.8", tempWebCacheDir, options);
            webView2Environment = await CoreWebView2Environment.CreateAsync(null, tempWebCacheDir, options);

            //wait for CoreWebView2 initialization
            await wv.EnsureCoreWebView2Async(webView2Environment);

            System.Diagnostics.Debug.WriteLine("Cache data folder set to: " + tempWebCacheDir);
        }

        private void WebsiteNavigate(WebView2 wv, string dest)
        {
            //set value
            string tempDest = dest;

            if (wv != null && wv.CoreWebView2 != null)
            {
                if (!String.IsNullOrEmpty(dest))
                {
                    if (dest != "about:blank" &&
                        !dest.StartsWith("edge://") &&
                        !dest.StartsWith("file://") &&
                        !dest.StartsWith("http://") &&
                        !dest.StartsWith("https://"))
                    {
                        //URL must start with one of the specified strings
                        //if not, pre-pend with "http://" or "https://"
                        //set value
                        tempDest = "http://" + dest;
                    }

                    //option 1
                    wv.CoreWebView2.Navigate(tempDest);

                    //option 2
                    //wv.Source = new Uri(tempDest, UriKind.Absolute);
                }
            }
        }
        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            if (webView21 != null)
            {
                webView21.GoBack();
            } 
        }

        private void btnForward_Click(object sender, RoutedEventArgs e)
        {
            if (webView21 != null)
            {
                webView21.GoForward();
            }
        }

        private void textBoxAddressBar_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Enter)
            {
                WebsiteNavigate(webView21, textBoxAddressBar.Text);
            }
        }

        private void btnGo_Click(object sender, RoutedEventArgs e)
        {
            WebsiteNavigate(webView21, textBoxAddressBar.Text);
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            if (webView21 != null)
            {
                webView21.Stop();
            }
        }

        private void CoreWebView2_HistoryChanged(object sender, object e)
        {
            btnBack.IsEnabled = webView21.CanGoBack;
            btnForward.IsEnabled = webView21.CanGoForward;
        }

        private void CoreWebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            
        }
        private void webView21_CoreWebView2Ready(object sender, EventArgs e)
        {
            Debug.WriteLine("Info: webView21_CoreWebView2Ready");

            //subscribe to events (add event handlers) - CoreWebView2
            webView21.CoreWebView2.HistoryChanged += CoreWebView2_HistoryChanged;
            webView21.CoreWebView2.NavigationCompleted += CoreWebView2_NavigationCompleted;

            //subscribe to events (add event handlers) - WebView2
            webView21.NavigationCompleted += WebView21_NavigationCompleted;
            webView21.NavigationStarting += WebView21_NavigationStarting;

            Debug.WriteLine("Info: leaving webView21_CoreWebView2Ready");

        }

        private void WebView21_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            
        }

        private void WebView21_NavigationStarting(object sender, CoreWebView2NavigationStartingEventArgs e)
        {
            //set value
            //updates the URL in the address bar,
            //when the Back or Forward button is clicked
            textBoxAddressBar.Text = e.Uri.ToString();

            //set cursor to end of text
            textBoxAddressBar.SelectionStart = textBoxAddressBar.Text.Length;
            textBoxAddressBar.SelectionLength = 0;
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            if (webView21 != null)
            {
                webView21.Dispose();
            }
        }

    }
}

[Yuandi-Jin]

@cgeier Thanks for sharing the code. Now I'm not seeing any exceptions.

[Yuandi-Jin]

@champnic After calling Dispose() properly I can run my test add-in successfully. ShowDialog() works too. Thanks.

[champnic]

That's great news! Glad you've got it all working now. Thanks!

[cgeier]

@Yuandi-Jin You're welcome. I saw one of the earlier posts where @John-Hart talked about the adding the WebView2 control to the ToolBox manually. When the WebView2 NuGet package is installed the following occurs:

If %UserProfile%\.nuget\packages\microsoft.web.webview2\<version> folder doesn't exist, the package files/folders are downloaded and saved to this location.

The necessary files/folders are copied from %UserProfile%\.nuget\packages\microsoft.web.webview2\<version> to <solution folder>\packages\Microsoft.Web.WebView2<version>.

If manually adding the WebView2 control to the ToolBox, it may be better to reference the .dll files in %UserProfile%\.nuget\packages\microsoft.web.webview2\<version>\lib\net462\. Also, if you've manually added WebView2 to the ToolBox, it may not be updated when you update the WebView2 NuGet package in your project/solution. You can right-click in the ToolBox and select "Reset Toolbox" before updating/installing the updated WebView2 NuGet package. If you hover over the WebView2 control in the ToolBox it will show the version.

[cgeier]

The code for WinForms is similar, except the "Load" event handler is private async void FrmMain_Load(object sender, EventArgs e) and the Form closing event handler is private void FrmMain_FormClosing(object sender, FormClosingEventArgs e).

private async void FrmMain_Load(object sender, EventArgs e)
{
   Debug.WriteLine("Info: before InitializeCoreWebView2Async");

    //initialize CoreWebView2
    //await InitializeCoreWebView2Async();
    await InitializeCoreWebView2Async(webView21, @"C:\Temp");

    Debug.WriteLine("Info: after InitializeCoreWebView2Async");

    //navigate to URL by setting Source property
    webView21.Source = new Uri("https://www.microsoft.com", UriKind.Absolute);
 }

private void FrmMain_FormClosing(object sender, FormClosingEventArgs e)
{
    if (webView21 != null && !webView21.IsDisposed)
    {
        webView21.Visible = false; //workaround for issue #442
        webView21.Dispose();
    }
}

Here's the complete WinForms demo project: WebView2Test.zip

[TF523]

This issue doesn't seem to be resolved. I am using vb.net to attempt to place WebView2 control into an excel vsto addin task pane and I am having no luck. I have used the EnsureCoreWebView2Async to attempt to get the core object to populate and there is simply nothing that will work. Converting the following lines to vb:

C#
var env = await CoreWebView2Environment.CreateAsync (null, "C:\temp");
await webView21.EnsureCoreWebView2Async (env);
webView21.CoreWebView2.Navigate ("https://bing.com")

VB.NET
Dim ENV as object
ENV = Await CoreWebView2Environment.CreateAsync(Nothing, "C:\Test")
Await WebView21.EnsureCoreWebView2Async()
WebView21.CoreWebView2.navigate("https://www.bing.com")

Still the core object will not assign.
I have attempted every conceivable combination which included using the CoreWebView2CreationProperties to set the path prior to the core object assignment, and still nothing has worked.

I am working off the Microsoft.Web.WebView2.1.0.674-prerelease.

I thought that it may be the browserexcutablefolder causing it to fail, but that doesn't seem to work when I tried set that either. I am at a loss...