I am using Webview2 in my winforms application. I am able to inject javascript and when the user clicks on any element I can access the id, name or tagname of the clicked element.
private async void webBrowser_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
{
string script = File.ReadAllText("Mouse.js");
await webBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
}
private async void webBrowser_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
BrowserEvent_JSON obj = JsonConvert.DeserializeObject<BrowserEvent_JSON>(e.WebMessageAsJson);
tbCtrlName.Text = (obj.eventName + " - " + obj.eventValue);
tbLocators_Id.Text = obj.elemId;
tbLocators_Name.Text = obj.elemName;
tbLocators_Value.Text = obj.eventValue;
tbLocators_Index.Text = obj.elemTagName;
tbLocators_Pixels.Text = obj.elemPixels;
}
I am interested in getting the entire HTMLElement that the user has clicked on. The challenge I am facing is that not all of the webpage elements may have id, so trying to retreive the element using injected Javascript and getElementById will not work.
To clarify more - say there are 3 hyperlinks in the web page. My code now tells me what type of element has been clicked - tag name returned is A. But there are no more details for me to access as to which link element was clicked, what was the source etc. Same goes for other controls.
The webview.document.activeElement stores no value for me to access and is always null. I am thinking of loading the html in a HTML Agility element, and try seeking the clicked element there, but there too I am stuck as how to get the locator info on which I need to search as ID may not always be specified for every element.
Sharing the contents of the Mouse.js file.
document.addEventListener('contextmenu', function (event) {
let elem = event.target;
let jsonObject =
{
eventName: 'right-click',
eventValue: elem.value || "Unknown",
elemName: elem.name || "Unknown",
elemId: elem.id || "Unknown",
elemTagName: elem.tagName || "Unknown",
elemPixels: event.clientX + "," + event.clientY
};
window.chrome.webview.postMessage(jsonObject);
});