How to programmatically launch WebView2's Find function.

[RajeshAKumar]

We have a HTML page in local WPF app using WebView2, but want to highlight occurrences of a search phrase in the page. WebView2 does a very nice job of showing this when invoked by user. We want to leverage this function programmatically.

Can you please guide?

AB#36194641

[champnic]

Hey @RajeshAKumar - I don't think we currently have a way to do this. Would you like me to add this as a scenario on our backlog?

[Symbai]

want to highlight occurrences of a search phrase in the page.

This can be done via executing a javascript calling window.find() already. For more info see https://developer.mozilla.org/en-US/docs/Web/API/Window/find

[RajeshAKumar]

want to highlight occurrences of a search phrase in the page.

This can be done via executing a javascript calling window.find() already. For more info see https://developer.mozilla.org/en-US/docs/Web/API/Window/find

Want to highlight "all" the words like how Edge/ Edge control does when we use CTRL + F.

[RajeshAKumar]

Hey @RajeshAKumar - I don't think we currently have a way to do this. Would you like me to add this as a scenario on our backlog?

Yes please log this. Also is there any way to make this work by "Sending CTRL + F" to the control? I could not make that work either?

[champnic]

@RajeshAKumar I've added this as a scenario on our backlog - thanks!

[RajeshAKumar]

want to highlight occurrences of a search phrase in the page.

This can be done via executing a javascript calling window.find() already. For more info see https://developer.mozilla.org/en-US/docs/Web/API/Window/find

I tried that and it highlights one time, once we click the page, the highlight goes away. We want to replicate the Edge control CTRL + F behavior or something close where all matches are shown and scrollbar is marked to indicate where they are in page.

[ajtruckle]

Proper support for this would be great please.

[ajtruckle]

@RajeshAKumar you said:

WebView2 does a very nice job of showing this when invoked by user.

How can I do this with WebView2? I know how to invoke Find / Find Next in CHtmlView using an ExecWB call. It displays its own window with Find / Find Next capabilities etc. But WebView2?

[RajeshAKumar]

@RajeshAKumar you said:

WebView2 does a very nice job of showing this when invoked by user. How can I do this with WebView2? I know how to invoke Find / Find Next in CHtmlView using an ExecWB call. It displays its own window with Find / Find Next capabilities etc. But WebView2?

Can you explain this via APIs to understand how to use this? I would want the window to go away with options selected and window with matching text highlighted.

[ajtruckle]

@RajeshAKumar ? My screen shot is of CHtmlView which is unrelated to WebView2.

[RajeshAKumar]

My issue is to solve this via API in WebView2 in WPF.

[ajtruckle]

I guess I miss-read your original text.

[frankdekker]

My issue is to solve this via API in WebView2 in WPF.

I'm also looking for an API to search on the page. The current Microsoft Edge native find dialog steals focus from the main window and when pressing escape doesn't give it back. Kinda breaking the user experience when do quick searches.

The API from CefSharp worked quite well:

// start a find
WebView2.Find(string int identifier, string searchText, bool forward, bool matchCase, bool findNext)
// callback for each time the find reports back
WebView2.FindResultCallback += (int identifier, int count, Rect selectionRect, int activeMatchOrdinal, bool finalUpdate) => {}
// stop the search
WebView2.StopFinding(bool clearSelection)

To be able to build a UI that fits more with the application WebView2 is integrated with:

[ajtruckle]

FYI, I did just try adding this to a custom context menu:

wil::com_ptr<ICoreWebView2ContextMenuItem> itemFind;
CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
	L"Find", nullptr,
	COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemFind));

CHECK_FAILURE(itemFind->add_CustomItemSelected(
	Callback<ICoreWebView2CustomItemSelectedEventHandler>(
		[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
		{
			appWindow->m_pImpl->m_webView->ExecuteScript(L"window.find()", nullptr);

			return S_OK;
		})
	.Get(), nullptr));
CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemFind.get()));
itemsCount++;

It doesn't work. Nothing shows on screen. When I used the CHtmlView control this was a simple task:

m_pHtmlPreview->ExecWB(OLECMDID_FIND, OLECMDEXECOPT_PROMPTUSER, nullptr, nullptr);

Is there any updates on this issue? Thank you.

[ajtruckle]

Hi @champnic !

I have now managed to use SendInput to invoke the Find window via my context menu:

// ===============================================================
wil::com_ptr<ICoreWebView2ContextMenuItem> itemFind;
CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
	L"Find (CTRL + F)", nullptr,
	COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemFind));

CHECK_FAILURE(itemFind->add_CustomItemSelected(
	Callback<ICoreWebView2CustomItemSelectedEventHandler>(
		[](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
		{
			// Create an array of generic keyboard INPUT structures
			std::vector<INPUT> vIP(4);
			for (int n = 0; n < 4; ++n)
			{
				vIP.at(n).type = INPUT_KEYBOARD;
				vIP.at(n).ki.wScan = 0;
				vIP.at(n).ki.time = 0;
				vIP.at(n).ki.dwFlags = 0; // 0 for key press
				vIP.at(n).ki.dwExtraInfo = 0;
			}

			vIP.at(0).ki.wVk = VK_CONTROL;
			vIP.at(1).ki.wVk = 'F';

			vIP.at(2).ki.wVk = 'F';
			vIP.at(2).ki.dwFlags = KEYEVENTF_KEYUP;

			vIP.at(3).ki.wVk = VK_CONTROL;
			vIP.at(3).ki.dwFlags = KEYEVENTF_KEYUP;

			SendInput(4, vIP.data(), sizeof(INPUT));

			return S_OK;
		})
	.Get(), nullptr));

CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemFind.get()));
itemsCount++;
// ===============================================================

This works fine:

My only request is that the Search bar be improved. The CHtmlView counterpart is richer:

[wusyong]

FWIW, electron also has this kind of feature

[michaldivis]

I'd love to have this feature as well.

[CiccioIV]

As a workaround, I did it by using the Winform SendKeys class . You can use it in wpf apps too, by adding <UseWindowsForms>true</UseWindowsForms> in the project properties

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWPF>true</UseWPF>
    <UseWindowsForms>true</UseWindowsForms>
  </PropertyGroup>

then, in my click method, I've first passed the focus to the webview2 (browser) element. Then, called the SendWait method with "{F3}" as parameter

        private void openSearch(object sender, RoutedEventArgs e)
        {
            this.browser.Focus();
            System.Windows.Forms.SendKeys.SendWait("{F3}");
        }

not the most elegant way, perhaps. But it works.

[jebihug]

Can't find a way to close the find UI programmatically.

[champnic]

@jebihug You could probably send an Escape key to dismiss the UI.

[jebihug]

@champnic This is not working. Especially when the browser don't have the focus and when there is many browsers opened and I want to close the find UI of one of them.

[ajtruckle]

@jebihug I think you will find from other comments on this chat that you have to bring the control into focus for the key sequences to work.

[jebihug]

@ajtruckle, this is far fetched: you have to give the focus on a browser you don't want to have it, send your ESC key and then give back the focus to whaterver browser that should have it. A simple API as the one can be found in CEF would be welcome.

[ajtruckle]

These are workarounds. I am a user like you. Until they fix it.

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: jebihug @.> Sent: Wednesday, August 17, 2022 7:41:03 AM To: MicrosoftEdge/WebView2Feedback @.> Cc: ajtruckle @.>; Mention @.> Subject: Re: [MicrosoftEdge/WebView2Feedback] How to programmatically launch WebView2's Find function. (#1737)

@ajtrucklehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fajtruckle&data=05%7C01%7C%7C75a67986fd964019544f08da801b7544%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637963152652758898%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=6AP6wmhaMk3W4Jkj8bIpq9oktRCSjXRO3WVAkBN7Nck%3D&reserved=0, this is far fetched: you have to give the focus on a browser you don't want to have it, send your ESC key and then give back the focus to whaterver browser that should have it. A simple API as the one can be found in CEF would be welcome.

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMicrosoftEdge%2FWebView2Feedback%2Fissues%2F1737%23issuecomment-1217525742&data=05%7C01%7C%7C75a67986fd964019544f08da801b7544%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637963152652758898%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=O1n9xr8vRujbwBREryAp%2FzWazSW10Orn0HmUQIq2FNQ%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAB45RM3FKIK2URNF5WWMRD3VZSCP7ANCNFSM5D643UDQ&data=05%7C01%7C%7C75a67986fd964019544f08da801b7544%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637963152652758898%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=ifnBEv9cbZGm4vLdQbsZpl%2Bt5SwnNGPfYRaH6OpDNMw%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>

[JFMarty]

We are also waiting for this API - for now we have to deploy CefSharp (it has really versatile APIs) just because the find api is missing from WebView2.

[BIBLETEAM]

I am waiting too. It is one of the very necessary features. I look forward to the good news.

[nishitha-burman]

Hi everyone,

I am looking into this feature and have a couple of questions to better understand the requirements:

1. Can you please describe the scenarios where find needs to be invoked programmatically vs. triggered by end users?
2. How do you envision the UI/UX when find is triggered? Do you want the find dialog to appear, be able to build a custom dialog with the matching words, see all matching words to be highlighted, etc.?

Thank you!

[RajeshAKumar]

Scenario: We have a help system that uses web view control to display home help pages. When user searches keyword we should results summary with each line item representing html page and count of matches. If user double clicks the line item we show the corresponding help page. At this point we want all matches highlighted as if user had searched in the page.

Ability for user to click down and up buttons to go previous match and next match. We do not want custom ui, though instead of just contains search ability to do other searches like exact match, starts with or ends with might be useful.

Thanks.

On Thu, Dec 29, 2022, 8:51 PM nishitha-burman @.***> wrote:

Hi everyone,

I am looking into this feature and have a couple of questions to better understand the requirements:

1. Can you please describe the scenarios where find needs to be invoked programmatically vs. triggered by end users?
2. How do you envision the UI/UX when find is triggered? Do you want the find dialog to appear, be able to build a custom dialog with the matching words, see all matching words to be highlighted, etc.?

Thank you!

— Reply to this email directly, view it on GitHub https://github.com/MicrosoftEdge/WebView2Feedback/issues/1737#issuecomment-1367695270, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFPMZZMC4RRRUEHBE6V4T4LWPZE2RANCNFSM5D643UDQ . You are receiving this because you were mentioned.Message ID: @.***>

[ajtruckle]

My dialog has an embedded viewer. I simply want an easier way to invoke find feature.

The find can work like a normal find with all usual features:

Match case Match word Find next Find all

Etc.

At the moment I have to simulate key presses and the browser control needs to have focus.

Sent from Outlook for iOShttps://aka.ms/o0ukef

---

From: nishitha-burman @.> Sent: Friday, December 30, 2022 2:51:20 AM To: MicrosoftEdge/WebView2Feedback @.> Cc: ajtruckle @.>; Mention @.> Subject: Re: [MicrosoftEdge/WebView2Feedback] How to programmatically launch WebView2's Find function. (#1737)

Hi everyone,

I am looking into this feature and have a couple of questions to better understand the requirements:

1. Can you please describe the scenarios where find needs to be invoked programmatically vs. triggered by end users?
2. How do you envision the UI/UX when find is triggered? Do you want the find dialog to appear, be able to build a custom dialog with the matching words, see all matching words to be highlighted, etc.?

Thank you!

— Reply to this email directly, view it on GitHubhttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMicrosoftEdge%2FWebView2Feedback%2Fissues%2F1737%23issuecomment-1367695270&data=05%7C01%7C%7Cd2dc51f7b24e4ea71d1f08daea10bb6f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638079654821102935%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=ROoFFKaEEheIzf4CE%2FOHdHQu9T7G%2F4SvdEBMw5YW%2FN4%3D&reserved=0, or unsubscribehttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAB45RM5CLN6LXW4CDUTWOYDWPZE2RANCNFSM5D643UDQ&data=05%7C01%7C%7Cd2dc51f7b24e4ea71d1f08daea10bb6f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638079654821102935%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=DdbvRHGc9u8hXV9%2FsQ93wnmYrooOGi5t4rCs78WpXBE%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>

[JFMarty]

1. Our use case is a search function for many html documents. We have our program protocol in the form of many (>1000) html pages. The user can navigate through this documents with our own UI, but for searching / highlighting we the need the find function through the api. In case a document doesn't contain the search text, we can programmatically go to the next document.
2. The most important features are "StartSearch / Highlight / MatchAll" and "FindNext/FindPrevious". It wouldn't matter too much wether the browser UI is visible or not, but we would need a feedback whether anything was found.