TypeScript definitions for window.chrome.webview

[danbahrami]

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 for window.chrome.webview.postMessage and window.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 adjacent removeEventListener 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

declare global {
    interface Window {
        chrome?: {
            webview?: {
                addEventListener: (
                    message: string,
                    handler: (event: any) => void, // not sure yet what the event type should be
                ) => void;
                postMessage: (message: string) => void;
            };
        };
    }
}

[david-risney]

It behaves like the DOM add/removeEventListener. You can subscribe to the message event and the sharedbufferreceived event via window.chrome.webview.addEventListener and unsubcribe window.chrome.webview.removeEventListener.

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?

[jeremyong]

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 [key: string]: any indexer which isn't quite right I don't think (I'm not a TS expert):

DefinitelyTyped/DefinitelyTyped@master...jeremyong:DefinitelyTyped:master

Anyone is welcome to work from here as a starting point though.

[david-risney]

Thanks for doing that!

[jeremyong]

Thanks for doing that!

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 additionalData property and getBuffer: () => ArrayBuffer property. There may be other cases also but I'm a relatively new user of the WebView2 API so you likely would know those corner cases best. edit: I did add the SharedBufferReceivedEvent to the file but haven't modified the event listener types yet

[BalassaMarton]

@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 @types

[jeremyong]

@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:

As the author of this commit, I hereby release all code therein into the public domain for anyone to use as they wish.

Hopefully that helps you move forward with your project, but let me know if something else is needed.