How to enable extension on WebView2

Question

I've installed a Chrome extension on Microsoft Edge (Chromium) to play HLS video. I've tried on Microsoft Edge (Chromium) and it works fine. The HLS URL is http://localhost/hls/taiguo/playlist.m3u8 and on Microsoft Edge browser and it displays the URL as follows: extension://ekcifneimckhkjdfklkkpdlnckcjhmke/index.html#http://localhost/hls/taiguo/playlist.m3u8.

When I use WebView2 to embed the browser in a Windows application following [Getting Started with WebView2 (developer preview)] (https://learn.microsoft.com/en-us/microsoft-edge/hosting/webview2/gettingstarted) sample code:

` CreateCoreWebView2EnvironmentWithDetails(nullptr, nullptr, nullptr, Callback( [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {

    RETURN_IF_FAILED(result);
    // Create a CoreWebView2Host and get the associated CoreWebView2 whose parent is the main window hWnd
    env->CreateCoreWebView2Host(hWnd, Callback<ICoreWebView2CreateCoreWebView2HostCompletedHandler>(
        [hWnd](HRESULT result, ICoreWebView2Host* host) -> HRESULT {
        if (host != nullptr) {
            webviewHost = host;
            webviewHost->get_CoreWebView2(&webviewWindow);
        }

        // Add a few settings for the webview
        // this is a redundant demo step as they are the default settings values
        ICoreWebView2Settings* Settings;
        webviewWindow->get_Settings(&Settings);
        Settings->put_IsScriptEnabled(TRUE);
        Settings->put_AreDefaultScriptDialogsEnabled(TRUE);
        Settings->put_IsWebMessageEnabled(TRUE);

        // Resize WebView to fit the bounds of the parent window
        RECT bounds;
        GetClientRect(hWnd, &bounds);
        webviewHost->put_Bounds(bounds);

        // Schedule an async task to navigate to Bing
        webviewWindow->Navigate(L"http://localhost/hls/taiguo/playlist.m3u8");`

If I run the above code, the app will just download the playlist.m3u8 file without playing the video. If I change the URL parameter of webviewWindow->Navigate(...) to:

webviewWindow->Navigate(L"extension://ekcifneimckhkjdfklkkpdlnckcjhmke/index.html#http://localhost/hls/taiguo/playlist.m3u8");

Then I get an error message as shown below: App screen capture

I hope someone can tell me how to run extension using WebView2 API.

Answer 1

I work on the WebView2 project. Let me start by saying WebView2 currently does not support Extensions. It's a fairly complicated feature and there are quite a few design choices we'd have to make, so before these are ironed out, we deliberately turn extensions off. We're definitely open to supporting it in the future, and there is an issue on our feedback repo tracking the feature request - https://github.com/MicrosoftEdge/WebViewFeedback/issues/81. It'd be lovely to have you chime in and talk about your use case, so we have more context on what you're looking for. For example, developers enabling arbitrary extensions for their app (e.g. I want to have an ad-blocker watching over my web content), which I think is what you're asking, is very different from giving end users a way to install extensions in webview.

That said, from a technical standpoint, even if WebView2 supports extensions today, user-installed extension from the browser would not show up in WebView2. The browser stores its extensions in its user data folder (see C:\Users\username\AppData\Local\Microsoft\Edge SxS\User Data\Default\Extensions for Canary), which also contains stuff like cookies, caches, etc. WebView2 apps have their own user data folder, and cannot use the browser user data because of the security implications.