Call C# function from javaScript using CefSharp in Windows Form App

Question

How to call a C# function from JAVASCRIPT ( which is in HTML code, I am calling through CefSharp ) in Windows Form App

CefSharp Components

public partial class Form1 : Form
{
    public ChromiumWebBrowser chromeBrowser;

    public Form1()
    {
        InitializeComponent();

        // Start the browser after initialize global component
        InitializeChromium();
    }

    public void InitializeChromium()
    {

        CefSettings settings = new CefSettings();

        settings.CefCommandLineArgs.Add("enable-media-stream", "1");

        Cef.Initialize(settings);

        chromeBrowser = new ChromiumWebBrowser("localhost/myproject/index.html");

        this.Controls.Add(chromeBrowser);

        chromeBrowser.Dock = DockStyle.Fill;
    }
}

Function To Be called By JS

public void Test(String message)
{
    MessageBox.Show(message, "Test");
}

HTML Code Where I need to call Test() at onclick event

<span class="mySpan" onclick="<Some>.Test('It is working');"></span>

Code I Tried,

Inside InitializeChromium Function

CefSharpSettings.LegacyJavascriptBindingEnabled = true;

chromeBrowser.RegisterAsyncJsObject("boundAsync", new BoundObject());

BoundObject.cs

public class BoundObject
{
    public void Test(String message)
    {
        MessageBox.Show(message, "Test");
    }
}

HTML CODE

<span class="mySpan" onclick="boundAsync.Test('It is working');"></span>

But It doesn't work for me. Please let me know where am I wrong?

Thanks in advance!

Answer 1

Here is a tutorial http://windowsapptutorials.com/wpf/call-c-sharp-javascript-using-cefsharp-wpf-app/

1. Create a Class with the Method to be Invoked

Create a CallbackObjectForJs class that contains a showMessage function which would be invoked from javascript.

public class CallbackObjectForJs{
    public void showMessage(string msg){//Read Note
        MessageBox.Show(msg);
    }
}

2. Register the JS object

The next step is to register the JS object. This can be done by adding the following code in the MainPage.xaml.cs file.

private CallbackObjectForJs _callBackObjectForJs;
public MainWindow()
{
    InitializeComponent();
    _callBackObjectForJs= new CallbackObjectForJs();
    ChromiumWebBrowser.RegisterAsyncJsObject("callbackObj", _callBackObjectForJs);
}

3. Invoke the C# function from JavaScript

Next, simply invoke the C# function from your javascript code.

<script>
    callbackObj.showMessage("Hello World!");
</script>

Note: The name of the C# function should start with a small letter.

---

Alternative Solution like suggested by @amaitland

Add an event listener to the browser instance:

public MainWindow()
{
    InitializeComponent();
    
    //Initialize ChromiumWebBrowser
    
    //Hook up event
    browser.JavascriptMessageReceived += OnBrowserJavascriptMessageReceived;
}

private void OnBrowserJavascriptMessageReceived(object sender, JavascriptMessageReceivedEventArgs e)
{
    var windowSelection = (string)e.Message;
    //DO SOMETHING WITH THIS MESSAGE
    //This event is called on a CEF Thread, to access your UI thread
    //You can cast sender to ChromiumWebBrowser
    //use Control.BeginInvoke/Dispatcher.BeginInvoke
}

From javascript, invoke the CefSharp.PostMessage method (Which is automatically available within the ChromiumWebBrowser context:

//CefSharp.PostMessage can be used to communicate between the browser
//and .Net, in this case we pass a simple string,
//complex objects are supported, passing a reference to Javascript methods
//is also supported.
CefSharp.PostMessage(window.getSelection().toString());