WebView2

thqby · Post by **thqby** » 02 May 2023, 03:37

The format of DefaultBackgroundColor is BGRA.
But any alpha value other than 255 will cause an error.
I will change to BGR format in the next version.

AHK_user · Post by **AHK_user** » 13 Aug 2023, 04:52

Does anybody has a method to detect mousemovement on the WebView object?
OnMessage(0x0200, WM_MOUSEMOVE) does not seem to respond.

thqby · Post by **thqby** » 13 Aug 2023, 22:37

AHK_user wrote: ↑
13 Aug 2023, 04:52
Does anybody has a method to detect mousemovement on the WebView object?

Code: Select all

#Include <WebView2\WebView2>

main := Gui('+Resize')
main.OnEvent('Close', (*) => (wvc := wv := 0))
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))

wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://autohotkey.com')
wv.AddHostObjectToScript('ahkfn', fn)
wv.AddScriptToExecuteOnDocumentCreated('window.document.addEventListener("mousemove", (event)=>window.chrome.webview.hostObjects.ahkfn(event.x,event.y))', 0)

fn(x,y) {
	ToolTip x ' ' y
}

AHK_user · Post by **AHK_user** » 15 Aug 2023, 02:59

thqby wrote: ↑

13 Aug 2023, 22:37

AHK_user wrote: ↑
13 Aug 2023, 04:52
Does anybody has a method to detect mousemovement on the WebView object?

Code: Select all

#Include <WebView2\WebView2>

main := Gui('+Resize')
main.OnEvent('Close', (*) => (wvc := wv := 0))
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))

wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://autohotkey.com')
wv.AddHostObjectToScript('ahkfn', fn)
wv.AddScriptToExecuteOnDocumentCreated('window.document.addEventListener("mousemove", (event)=>window.chrome.webview.hostObjects.ahkfn(event.x,event.y))', 0)

fn(x,y) {
	ToolTip x ' ' y
}

Thanks, this works perfectly, and can also be applied for other events.

20170201225639 · Post by **20170201225639** » 17 Aug 2023, 07:19

thqby wrote: ↑
02 May 2023, 03:37
The format of DefaultBackgroundColor is BGRA.
But any alpha value other than 255 will cause an error.
I will change to BGR format in the next version.

Does that mean currently transcolor won't work for Webview?

My attempts to make red (#FF0000) pixels disappear aren't succeeding. I've tried

Code: Select all


#Include <WebView2\WebView2>
main := Gui("+LastFound -Caption")
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wvc.DefaultBackgroundColor := 0x00FF0000 ; https://github.com/MicrosoftEdge/WebView2Feedback/issues/2899#issuecomment-1426555624
; WinSetTransColor("FF0000", "ahk_id " main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('C:\test.html') ; <body style='background-color: #FF0000'></body>

I've also tried

Code: Select all

EnvSet("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FF0000") ;

(See: https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2controller.defaultbackgroundcolor?view=webview2-dotnet-1.0.1901.177)

Not working either.

Does anyone have a working example?

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 08:35

I did a bit more searching around.

1. It looks like it definitely should be possible. See the second example in :
https://github.com/MicrosoftEdge/WebView2Feedback/issues/1262

2. Moreover, the way to accomplish this is *not* by WinSetTransColor. Unlike the old web browser control, webview2 is not planning on supporting keying out a specified color
https://github.com/MicrosoftEdge/WebView2Feedback/issues/118#issuecomment-801468335
So WinSetTransColor (working via SetLayeredWindowAttributes) is not going to have an effect

I still can't get a working example. This code:

Code: Select all

#Include <WebView2\WebView2>

EnvSet("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0xFFFF00FF") ; 👈
main := Gui("+LastFound -Caption")
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://output.jsbin.com/dopavun')

Makes the background purple, which is as it should be, since the alpha value of the environement variable is set to FF. However, changing FF to 00, which is *supposed* to make the background transparent, is not having the desired effect. This is where I'm stuck.

tqphan wrote: ↑
29 Apr 2023, 17:32
How do I make
Code: Select all
WinSetTransColor "000111", "ahk_id " win.hWnd
work with WebView2? I'm displaying a page with #000111 background and I want the #000111 color to be transparent.

@tqphan any luck on getting transcolor-equivalent to work?

thqby · Post by **thqby** » 18 Aug 2023, 09:02

the BackgroundColor is not what you want.

When you do not navigate to the page, there is a background color and disappears after navigation.

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 09:09

thqby wrote: ↑
18 Aug 2023, 09:02
the BackgroundColor is not what you want.

When you do not navigate to the page, there is a background color and disappears after navigation.

Hi thqby, do you mean on your machine, after page loading there's a genuine transparency effect? (by which I mean, stuff behind the webview window can shows through?)

on mine at least, the above code gives rise to this, whether or not the first two hex digits of the defaultbackground color is set to FF or 00 (and whether or not the default bg color is set via environment variable or the setter of your class (wvc.DefaultBackgroundColor := ...))

: image.png (174.06 KiB) Viewed 2376 times

Edit: this guy mentioned that setting environment var to "0" "works well" for his app. But for some reason on my end there's just no transparency whatsoever.
https://github.com/microsoft/microsoft-ui-xaml/issues/6527#issuecomment-1274932222

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 09:20

Ah haha I've got it to work!

You still need winsettranscolor, basically the steps are the same for v1 and v2. Here's a working example

: image.png (138.04 KiB) Viewed 2366 times

Code: Select all

#Include <WebView2\WebView2>

EnvSet("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0x00FF00FF") ; 👈
main := Gui("+LastFound -Caption")
main.BackColor := "FF00FF"
WinSetTransColor("FF00FF", main)
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://output.jsbin.com/dopavun')

thqby · Post by **thqby** » 18 Aug 2023, 09:24

No support for transparency.

I made a mistake, the background color is related to the open page. The open page I tested before completely covered the background color.

Code: Select all

main := Gui("+LastFound -Caption")
main.BackColor := "FF00FF"
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wvc.DefaultBackgroundColor := 0x00FF00	; BGR
WinSetTransColor("FF00FF", main)	; RGB
wv.Navigate('https://output.jsbin.com/dopavun')

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 09:31

The partial transparency setting on WinSetTransColor *is* working though and it's more than enough for my needs. Here's an example showing the edge logo with 100 transparency

: image.png (575.96 KiB) Viewed 2341 times

Code: Select all

#Include <WebView2\WebView2>

EnvSet("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0x00FF00FF") ; 👈
main := Gui("+LastFound -Caption +AlwaysOnTop +ToolWindow")
main.BackColor := "FF00FF"
WinSetTransColor("FF00FF 100", main)
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://upload.wikimedia.org/wikipedia/commons/f/f6/Edge_Logo_2019.svg')

thqby · Post by **thqby** » 18 Aug 2023, 09:35

No environment variables need to be set

Code: Select all

main := Gui("+LastFound -Caption +AlwaysOnTop +ToolWindow")
main.BackColor := "FFFFFF"
WinSetTransColor("FFFFFF 100", main)
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wvc.DefaultBackgroundColor := 0   ; any value
wv := wvc.CoreWebView2
wv.Navigate('https://upload.wikimedia.org/wikipedia/commons/f/f6/Edge_Logo_2019.svg')

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 09:43

thqby wrote: ↑

18 Aug 2023, 09:35

No environment variables need to be set

Code: Select all

main := Gui("+LastFound -Caption +AlwaysOnTop +ToolWindow")
main.BackColor := "FFFFFF"
WinSetTransColor("FFFFFF 100", main)
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wvc.DefaultBackgroundColor := 0   ; any value
wv := wvc.CoreWebView2
wv.Navigate('https://upload.wikimedia.org/wikipedia/commons/f/f6/Edge_Logo_2019.svg')

Strange, on my machine the above code doesn't quite produce the same effect as setting environment variable.

: image.png (678.24 KiB) Viewed 2347 times

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 09:45

I should also say by the way that the effect in webview2 of transcolor seems much better than the old-fashioned web browser control. The web browser control's keying out of a color doesn't work very well with text anti-aliasing. By contrast, check out this

: image.png (165.47 KiB) Viewed 2341 times

Code: Select all

#Include <WebView2\WebView2>

EnvSet("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0x00FF00FF") ; 👈
main := Gui("+LastFound -Caption +AlwaysOnTop +ToolWindow")
main.BackColor := "FF00FF"
WinSetTransColor("FF00FF", main)
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd)
wv := wvc.CoreWebView2
wv.Navigate('https://output.jsbin.com/yimakuyedu/')

thqby · Post by **thqby** » 18 Aug 2023, 09:49

Strange, me too.
sorry, I just set the color and computer background is close, did not distinguish.

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 10:28

thqby wrote: ↑
18 Aug 2023, 09:49
Strange, me too.
sorry, I just set the color and computer background is close, did not distinguish.

I think I figured it out, it's the bitwise or with 0xff that's causing the issue.

Code: Select all

		DefaultBackgroundColor {
			get => (ComCall(26, this, 'uint*', &backgroundColor := 0), backgroundColor >> 8)	
			set => ComCall(27, this, 'uint', Value << 8 | 0xff)
		}

I changed my local copy to

Code: Select all

		DefaultBackgroundColor {
			get => (ComCall(26, this, 'uint*', &backgroundColor := 0), backgroundColor >> 8)	
			set => ComCall(27, this, 'uint', Value << 8)
		}

And now there's no need to set environment variables. But anyone who wants to set non-transparent color as default must explicitly pass 0xFF....

thqby · Post by **thqby** » 18 Aug 2023, 10:36

20170201225639 wrote: ↑
18 Aug 2023, 10:28
I think I figured it out, it's the bitwise or with 0xff that's causing the issue.

The previous version did not allow setting alpha, but now it does.

20170201225639 · Post by **20170201225639** » 18 Aug 2023, 10:45

thqby wrote: ↑
18 Aug 2023, 10:36

20170201225639 wrote: ↑
18 Aug 2023, 10:28
I think I figured it out, it's the bitwise or with 0xff that's causing the issue.
The previous version did not allow setting alpha, but now it does.

Right, worth mentioning though that any value between 00 and FF for alpha still won' t work (yet)

https://github.com/MicrosoftEdge/WebView2Feedback/blob/e51774a3ddd0221cd07fbc9047c80862c90cfba1/specs/BackgroundColor.md?plain=1#L57

20170201225639 · Post by **20170201225639** » 19 Aug 2023, 17:35

Does anyone have a good solution for DOM manipulation?

I have a script that does type-ahead search, each query potentially returns a large quantity of search results, so rendering speed is important.

With the old mshtml webbrowser control, to reflect the results back to the DOM, I just loop through the DOM nodes and set InnerText or attribute and it's blazing fast.

How would one go about doing this in Webview2 now that DOM access has been taken away (https://github.com/MicrosoftEdge/WebView2Feedback/issues/77)? The only ways I can think of
(1) write a bunch of wrapper functions ("setInnerTextByID" "setAttributeByID", ...), all implemented by individual ExecuteScript calls
(2) serialize each batch of data in a JSON str, store it in a property of the host object, ExecuteScript calls a JS function to deserialize the JSON, and then do direct DOM manipulation to insert the data into the relevant divs
(3) give up on fine-grained DOM manipulation, just generate a big HTML string in ahk, send it via the host object, and let a JS function set the innerHTML

All these methods strike me as so unsatisfactory. The performance overhead of (1) and (3) must be pretty big for any usage scenario (like typeahead search) where instantaneous display is highly desired. (2) might be a bit better, but last time I tested it in mshtml webbrowser control it's actually slower than direct AHK DOM manipulation. Not to mention, there's now more moving parts because you now need to maintain separate JS code that you must make sure understands the data you send it the same way your own AHK code does.

Panaku · Post by **Panaku** » 20 Aug 2023, 03:57

I've setup a couple of handlers for things such as NavigationCompleted and NavigationStarting, but I can't figure out how to pull the uri or url from the EventArgs. Could you maybe shed some light on this?

WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2

Re: WebView2