TypeScript definitions for window.chrome.webview #4028
Replies: 8 comments
-
It behaves like the DOM add/removeEventListener. You can subscribe to the We've recently added ref docs for the JS APIs we have in the WebView2 which can hopefully answer your questions. The JS ref docs are new so let me know if you see problems. In the future I'd also like for us to publish a ts.d file somewhere. Maybe include it in our nuget? |
Beta Was this translation helpful? Give feedback.
-
FYI I made an attempt here to include it in the standard @types repo but there are a few issues with this attempt, namely the lack of proper proxy property handling (currently, I'm using a catch-all DefinitelyTyped/DefinitelyTyped@master...jeremyong:DefinitelyTyped:master Anyone is welcome to work from here as a starting point though. |
Beta Was this translation helpful? Give feedback.
-
Thanks for doing that! |
Beta Was this translation helpful? Give feedback.
-
No problem! I should mention that I think there are a few fields missing in the docs I had to add locally. Specifically, the event listener is documented as being the same as the built-in event listener, but I believe WebView2 adds non-standard fields to the event passed to the handler. For example, when posting a shared buffer object, the event receives an |
Beta Was this translation helpful? Give feedback.
-
@jeremyong would you submit a PR? I would absolutely use your code, but we need proper licensing, which is covered if the code is part of |
Beta Was this translation helpful? Give feedback.
-
@BalassaMarton I haven't been using WebView2 recently and have been a bit swamped with other work so I don't have time to clean up the PR with tests needed for now. However, to unblock you:
Hopefully that helps you move forward with your project, but let me know if something else is needed. |
Beta Was this translation helpful? Give feedback.
-
Thanks for your type definitions @jeremyong and releasing it to the public. I created these two helper functions based on those types (below code is public domain).
export const getWebView = (): WebView | undefined => window?.chrome?.webview
type RemoveIndex<T> = {
[K in keyof T as {} extends Record<K, 1> ? never : K]: T[K]
}
export const getHostObject = <T extends HostObjectAsyncProxy>(name: string) =>
getWebView()?.hostObjects[name] as RemoveIndex<T> | undefined Usage: interface MyHostObject extends HostObjectAsyncProxy {
DoSomething: () => Promise<void>
}
getHostObject<MyHostObject>('my')?.DoSomething() // ok
getHostObject<MyHostObject>('my')?.Oops() // errors |
Beta Was this translation helpful? Give feedback.
-
This definition is missing in the repo: export interface WebView extends EventTarget {
/**
* When the page calls `postMessageWithAdditionalObjects`, the `message` parameter is sent to WebView2 in the same
* fashion as {@link WebView.postMessage}.
* Objects passed as 'additionalObjects' are converted to their native types and will be available in the
* `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` property.
* @param message The message to send to the WebView2 host. This can be any object that can be serialized to JSON.
* @param additionalObjects A sequence of DOM objects that have native representations in WebView2.
* This parameter needs to be ArrayLike.
*
* The following DOM types are mapped to native:
* DOM | Win32 | .NET | WinRT
* ------ | ------------------ | ------------------- | ---------------------------
* File | ICoreWebView2File | System.IO.FileInfo | Windows.Storage.StorageFile
*
* `null` or `undefined` entries will be passed as `null` type in WebView2. Otherwise if an invalid or unsupported
* object is passed via this API, an exception will be thrown and the message will fail to post.
*/
postMessageWithAdditionalObjects(message: any, additionalObjects: ArrayLike<any>): void;
} |
Beta Was this translation helpful? Give feedback.
-
Hi, I'm looking through the WebView2 docs and can't find any API reference for
window.chrome.webview
. Specifically I'm looking to define a global TypeScript interface forwindow.chrome.webview.postMessage
andwindow.chrome.webview.addEventListener
.I have a couple of questions:
1. What's the method for removing event listeners?
I can't tell if
window.chrome.addEventListener
returns an unsubscribe callback or if there's an adjacentremoveEventListener
that behaves the same as adding/removing DOM events.2. Do you have a recommendation for a global TypeScript definition?
Here's what I've got so far but I'm not sure if it's accurate
Beta Was this translation helpful? Give feedback.
All reactions