WebView2 BlazorWebView Javascript loading Source Maps

23 views Asked by At

I need to get the webview2 in a blazor webview wpf hybrid app to use external js sourcemaps. I cannot just make them internal at build as no control over those JS files.

Now I know from reading https://github.com/MicrosoftEdge/WebView2Feedback/issues/961 that this is a problem and theoretically you can make them inline at runtime using the event WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args).

So I tried this code

private void WebView_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args)
{
    Debug.WriteLine(args.Request.Uri.ToString());
    if (args.Request.Uri.ToString().EndsWith (".js"))
    {
        var root = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "wwwroot");
        var urlname = args.Request.Uri.ToString().Substring(16).Replace("/", @"\");
        var filename = Path.Combine(root, urlname);
        var text = File.ReadAllText(filename);
        const string mapPattern = @"\/\/\#\s*sourceMappingURL\=.*$";
        const string embeddedSourceMappingPrefix = "//# sourceMappingURL=data:application/json;charset:utf-8;base64,";
        var match = System.Text.RegularExpressions.Regex.Match(text, mapPattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase);
        if (match.Success)
        {
            var symFile = match.Value.Substring(match.Value.IndexOf('=') + 1).Trim();
            var symFilename = Path.Combine(Path.GetDirectoryName(filename), symFile);
            if (File.Exists(symFilename))
            {
                var symBytes = File.ReadAllBytes(symFilename);
                var aStringBuilder = new StringBuilder(text);
                aStringBuilder.Remove(match.Index, match.Value.Length);
                aStringBuilder.Insert(match.Index, embeddedSourceMappingPrefix);
                aStringBuilder.Insert(match.Index + embeddedSourceMappingPrefix.Length, System.Convert.ToBase64String(symBytes));
                MemoryStream ms = new MemoryStream(System.Text.Encoding.ASCII.GetBytes(aStringBuilder.ToString()));
                ManagedStream responseStream = new ManagedStream(ms);
                args.Response = (sender as Microsoft.Web.WebView2.Core.CoreWebView2).Environment.CreateWebResourceResponse(responseStream, 200, "OK", "Content-Type: application/javascript");
            }
        }
    }

The code creates an inline source map but it appears not to be honouring the response as in the devtools window I see -

Source map failed to load.  
DevTools cannot show authored sources, but you can debug the deployed code.  
Error loading url https://0.0.0.0/lib/xxx.min.js.map: Connection error: Net::ERR_ADDRESS_INVALID

Can anyone provide more insight on this, why is it not taking the response, or another way to get the webview2 to honour external sourcemaps.

0

There are 0 answers