How to add WebView2 to a VisualStudio.Extensibility tool window?

Question

I want to add a WebView2 in a tool window.

I managed to do it with a vssdk project. i just replaced the ToolWindowPane.Content with WebView2 and it worked.

now i started a VisualStudio.Extensibility and tried to do the same but no luck. what ever i did i could not make WebView2 show in the tool window.

in VisualStudio.Extensibility remote ui it is not possible to use WPF controls, and i could not find any way to do it programatically.

i want to use a VisualStudio.Extensibility extension for the out-of-process advantage instead of vssdk project. but maybe its not possible to embed WebView2 control in VisualStudio.Extensibility tool window?

Answer 1

Hello @Shalom Ben Zvi ,

Welcome to Microsoft Q&A forum.

I don’t see any limits on using WebView2 on VisualStudio.Extensibility tool window.

I try to make a very simple test and looks like the WebView2 control works correctly, see following screenshot:

I just installed the WebView2 NuGet package and modified the .xaml file like following:

<DockPanel>

<wv2:WebView2 Name="webView"

Source="https://www.microsoft.com"

/>

</DockPanel>

Kind Regards,

Tianyu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @Tianyu Sun-MSFT

I did exactly as you did.

I did add the xmlns to the xaml.

I reset the experimental instance to make sure that only my extension is deployed.

the tool window opens correctly but the WebView doesn't appear.

it works fine in a VSSDK extension so i don't think its something in my computer that's missing.

I think its crucial to decide which type of extension to start. We are a company called digma.ai , we're going to start developing an extension for VS , and I'm now trying to decide which type of VS extension to start. if WebView works with VisualStudio.Extensibility Extension i prefer that then VSSDK extension.

So i'll appreciate any help.

I shared my sample here , maybe i am missing something

https://github.com/shalom938/Extension1

Thank you!

Answer 3

Hi @Tianyu Sun-MSFT

I got it working. there was some permission issue that i didn't digg into , but configuring webview2 with UserDataFolder solved it and now the WebView2 component works.

<wv2:WebView2
    Name="webView2"
    
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
    <wv2:WebView2.CreationProperties>
        <wv2:CoreWebView2CreationProperties UserDataFolder="C:\temp\myFolder"/>
    </wv2:WebView2.CreationProperties>
    <wv2:WebView2.Source>https://bing.com</wv2:WebView2.Source>
</wv2:WebView2>

Now I'm struggling how to get a reference to the WebView2 instance. I want to add listeners and I want to be able to send js messages to the web view.

in a VSSDK extension I added the WebView2 control as above to a tool window control xaml , and in the xaml.cs file i had a reference to it.

but in a VisualStudio.Extensibility extension it works differently, there is a RemoteUserControl.

So i need a way to get the reference to WebView2 , or a way to register the listeners in the xaml and bind them to some commands or something like that. maybe you have an idea?