How do you override the ContextMenu that appears when right clicking on WebView2 Control?

Question

How do you override the ContextMenu that appears when right clicking on WebView2 Control?

When you right click on WebView2 control, the standard context menu with options such as "Refresh", "Save as", etc. appears.

How do I make my own ContextMenuStrip appear instead that can appear during Right mouse button click ?

Answer 1

Update (now the code shows your context menu on right click and hides it when you click anywhere):

You can inject the following javascript into your webpage (it subscribes to the 'contextmenu' event and the 'mousedown' event):

document.addEventListener('contextmenu', function (event)
{
    let jsonObject =
    {
        Key: 'contextmenu',
        Value:
        {
            X: event.screenX,
            Y: event.screenY
        }
    };
    window.chrome.webview.postMessage(jsonObject);
});

document.addEventListener('mousedown', function (event)
{
    let jsonObject =
    {
        Key: 'mousedown',
        Value:
        {
            X: event.screenX,
            Y: event.screenY
        }
    };
    window.chrome.webview.postMessage(jsonObject);
});

It's easiest to save it in a file (I call it 'Javascript1.js').

To work with the 'CoreWebView2' instance, the WebView2 control must be initialized, subscribing to 'CoreWebView2InitializationCompleted' solves that.

To inject your javascript, you can load it from the file and use AddScriptToExecuteOnDocumentCreatedAsync to inject it.

You need to disable default context menu. This is done by setting AreDefaultContextMenusEnabled property to false.

Then you need to subscribe to the WebMessageReceived event and handle the two events. To do that, create a structure with a 'Key' and a 'Value' to deserialize the JSON string sent from javascript code.

C# code that shows the whole form with events:

using Newtonsoft.Json;
using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        struct JsonObject
        {
            public string Key {get; set;}
            public PointF Value{get; set;}

        private async void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            webView21.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
            string script = File.ReadAllText(Path.Combine(Environment.CurrentDirectory, @"Javascript1.js"));
            await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
        }

        private void WebView21_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
        {
            JsonObject jsonObject = JsonDeserializer.Deserialize<JsonObject>(e.WebMessageAsJson);
            switch (jsonObject.Key)
            {
                case "contextmenu":
                    contextMenuStrip1.Show(Point.Truncate(jsonObject.Value));
                    break;
                case "mousedown":
                    contextMenuStrip1.Hide();
                    break;
            }
        }
    }
}

The advanced version of this can be found here: Overriding Webview2 context menu along with default one

Answer 2

We don't yet have full support for customizing the context menu, however we have a feature request tracking it. In the interim you may be able to work around this using the work around described in that feature request issue.

Essentially the work around is to use the document.body's contextmenu event to intercept the usual context menu handling and implement your own. You can either use window.chrome.webview.postMessage to send the context menu event up to your native code to create a native context menu, or you could implement the context menu in HTML/JS.

Apologies its not a simple solution. If you like you can add your own comments to the feature request to let us know about your scenario and so on for using context menus in WebView2. Thanks!