Cómo agregar nuevos elementos al menú contextual nativo en un control CefSharp en WinForms

Aprende a agregar nuevos elementos a la lista del menú contextual que se muestra en tu control CefSharp en WinForms.

Aunque ya hemos escrito sobre cómo evitar que el menú contextual aparezca en su control CefSharp , porque normalmente puede crear mejor un menú contextual personalizado con JavaScript, es posible que desee seguir utilizando el menú contextual predeterminado del control CefSharp:

Como puedes ver, las opciones predeterminadas no son realmente útiles, por lo tanto, debe saber cómo personalizarlo y agregar nuevas opciones.

1. Cree un controlador de menú personalizado

Lo primero que debe hacer es crear una nueva clase en su proyecto, especificamente MyCustomMenuHandler(puede cambiar el nombre si lo desea) .Esta clase necesita usar el espacio de nombres de su aplicación y extender el IContextMenuHandler, por lo tanto, obviamente debe importar el CefSharp, System y el System.Windows.Forms espacio de nombres en su clase y se verá de la siguiente manera:

using System;
using CefSharp;
using System.Windows.Forms;

public class MyCustomMenuHandler : IContextMenuHandler
{
    public void OnBeforeContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
    {
        
    }

    public bool OnContextMenuCommand(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
    {
        return false;
    }

    public void OnContextMenuDismissed(IWebBrowser browserControl, IBrowser browser, IFrame frame)
    {

    }

    public bool RunContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
    {
        return false;
    }
}

Esto es solo un ejemplo y, por el momento, la clase no hace nada, sin embargo, debe comenzar con esto en su controlador personalizado para comprender cómo agregar o eliminar elementos.

2. Modificar el controlador personalizado

Para agregar un nuevo elemento, use el AddItemmétodo del IMenuModelargumento en la onBeforeContextMenufunción. Este método espera como primer argumento un número entero único (proporcionado por usted) de 26500 a 28500 que se utilizará como ID para activar alguna acción en el onContextMenuCommand. Por lo tanto, debe comenzar con un nuevo artículo con el ID 28501 para evitar la superposición de los rangos de ID de cromo y CEF. Puede ver el archivo Enum completo de los comandos de menú de CefSharp aquí . Como segundo argumento, debe proporcionar una cadena que se utilizará como etiqueta para el nuevo elemento en la lista del menú contextual.

De acuerdo con el ID dado para el elemento, puede verificar en qué elemento de la lista se hizo clic en el comando OnContextMenu usando una declaración if simple y haciendo algo de acuerdo con ella. El siguiente ejemplo muestra cómo agregar 3 elementos al menú contextual actual (para eliminar cualquier elemento anterior use el model.Clearmétodo), respectivamente, mostrarán y cerrarán las herramientas de desarrollo y el último mostrará un mensaje de alerta:

using System;
using CefSharp;
using System.Windows.Forms;

public class MyCustomMenuHandler : IContextMenuHandler
{
    public void OnBeforeContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
    {
        // Elimine cualquier opción existente utilizando el método Clear del modelo
        //
        //model.Clear();

        Console.WriteLine("¡Menú contextual abierto!");

        // You can add a separator in case that there are more items on the list
        if (model.Count > 0)
        {
            model.AddSeparator();
        }


        // Agregue un nuevo elemento a la lista usando el método AddItem del modelo
        model.AddItem((CefMenuCommand)26501, "Show DevTools");
        model.AddItem((CefMenuCommand)26502, "Close DevTools");

        // Agregar un separador
        model.AddSeparator();

        // Agregar otro elemento de ejemplo
        model.AddItem((CefMenuCommand)26503, "Display alert message");
    }

    public bool OnContextMenuCommand(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
    {
        // Reaccionar a la primera ID (mostrar el método de herramientas de desarrollo)
        if (commandId == (CefMenuCommand)26501)
        {
            browser.GetHost().ShowDevTools();
            return true;
        }

        // Reaccionar al segundo ID (mostrar método de herramientas de desarrollo)
        if (commandId == (CefMenuCommand)26502)
        {
            browser.GetHost().CloseDevTools();
            return true;
        }

        // Reaccionar a la tercera identificación (mostrar mensaje de alerta)
        if (commandId == (CefMenuCommand)26503)
        {
            MessageBox.Show("An example alert message ?");
            return true;
        }

        // Cualquier artículo nuevo debe manejarse a través de una nueva declaración if


        // ¡Devolver falso debe ignorar la opción seleccionada del usuario!
        return false;
    }

    public void OnContextMenuDismissed(IWebBrowser browserControl, IBrowser browser, IFrame frame)
    {

    }

    public bool RunContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
    {
        return false;
    }
}

3. Configure su controlador de menú personalizado como predeterminado en el navegador

Una vez que la clase se ha modificado y está disponible en su proyecto, solo necesita establecer el valor de la MenuHandlerpropiedad de su ChromiumWebBrowser como una nueva instancia de su controlador de menú personalizado. Esto se puede lograr durante la creación del navegador en su código actual, por ejemplo:

CefSettings settings = new CefSettings();
// Algunas configuraciones si las tiene, aquí
// Inicializar cef con la configuración proporcionada
Cef.Initialize(settings);

// Crea un componente de navegador
ChromiumWebBrowser chromeBrowser = new ChromiumWebBrowser("www.somewebsite or file.com");
// Registre su controlador de menú personalizado como predeterminado
chromeBrowser.MenuHandler = new MyCustomMenuHandler();

// ...
// Resto de tu código
// ...

Entonces nuestro menú contextual se verá así: