WebView2获取点击元素完整信息的技术难题求助

问题背景 #

我在WinForms应用里使用WebView2，已实现注入JavaScript，用户点击任意元素时能获取元素的id、name或tagname，但现在想拿到点击的完整HTMLElement信息，遇到了几个问题：

• 不是所有元素都有id，没法用getElementById定位具体元素，比如页面里有3个超链接，当前代码只能知道点的是A标签，没法区分是哪个、也拿不到链接地址这类信息
• webview.document.activeElement一直是空的，拿不到有效信息
• 考虑过把HTML加载到HTML Agility Pack里查找点击元素，但元素没ID的话不知道怎么定位

现有代码 #

C#代码 #

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;
} 

Mouse.js代码 #

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);
});

解决方案 #

1. 在JS中直接收集更多元素属性+生成唯一选择器 #

不用依赖元素ID，直接在注入的JS里收集所需属性，同时生成唯一CSS选择器用于后续精准定位。修改Mouse.js如下：

document.addEventListener('contextmenu', function (event) {
    let elem = event.target;

    // 生成元素的唯一CSS选择器
    function generateUniqueSelector(el) {
        if (el.id) return `#${el.id}`;
        let path = [];
        while (el && el.nodeType === Node.ELEMENT_NODE) {
            let selector = el.tagName.toLowerCase();
            // 追加类名
            if (el.className) {
                selector += `.${el.className.split(/\s+/).join('.')}`;
            }
            // 计算同层级同标签的索引
            let sibling = el.previousElementSibling;
            let index = 1;
            while (sibling) {
                if (sibling.tagName.toLowerCase() === selector.split('.')[0]) {
                    index++;
                }
                sibling = sibling.previousElementSibling;
            }
            if (index > 1) {
                selector += `:nth-of-type(${index})`;
            }
            path.unshift(selector);
            el = el.parentElement;
        }
        return path.join(' > ');
    }

    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}`,
        // 新增需要的元素属性
        elemHref: elem.href || "Unknown",
        elemText: elem.textContent.trim() || "Unknown",
        elemClass: elem.className || "Unknown",
        uniqueSelector: generateUniqueSelector(elem)
    };
    window.chrome.webview.postMessage(jsonObject);
});

2. 更新C#实体类与接收逻辑 #

修改BrowserEvent_JSON类，新增对应属性：

public class BrowserEvent_JSON
{
    public string eventName { get; set; }
    public string eventValue { get; set; }
    public string elemName { get; set; }
    public string elemId { get; set; }
    public string elemTagName { get; set; }
    public string elemPixels { get; set; }
    // 新增属性
    public string elemHref { get; set; }
    public string elemText { get; set; }
    public string elemClass { get; set; }
    public string uniqueSelector { get; set; }
}

在WebMessageReceived事件中处理新增属性：

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;
    // 显示新增的元素信息
    tbLocators_Href.Text = obj.elemHref;
    tbLocators_Text.Text = obj.elemText;
}

3. 用唯一选择器在HTML Agility Pack中定位元素 #

如果需要用HTML Agility Pack处理，可通过生成的uniqueSelector精准查询元素（需安装NuGet包HtmlAgilityPack.CssSelectors）：

// 假设已将页面HTML加载到HtmlDocument实例doc中
var targetElement = doc.QuerySelector(obj.uniqueSelector);

内容的提问来源于stack exchange，提问作者Kim Smith