---
layout: "layouts/DocLayout.astro"
title: WebView
description: Documentation for the WebView API for spotube plugins
order: 0
---

The [hetu_spotube_plugin][hetu_spotube_plugin] is a built-in module that plugin developers can use in their plugins.

```hetu_script
import "module:spotube_plugin" as spotube
```

## WebView API

The WebView API allows plugins to create and manage web views within the Spotube application.

### Usage

First, an WebView instance needs to be created with `uri`.

```hetu_script
import "module:spotube_plugin" as spotube

let webview = spotube.Webview(uri: "https://example.com")
```

To open the webview, you can use the `open` method:

```hetu_script
webview.open() // returns Future<void>
```

To close the webview, you can use the `close` method:

```hetu_script
webview.close() // returns Future<void>
```

### Listening to URL changes

You can listen to url change events by using the `onUrlRequestStream` method. It's emitted when the URL of the webview changes,
such as when the user navigates to a different page or clicks a link.

```hetu_script
// Make sure to import the hetu_std and Stream
import "module:hetu_std" as std

var Stream = std.Stream

// ... created webview instance and other stuff

var subscription = webview.onUrlRequestStream().listen((url) {
    // Handle the URL change
    print("URL changed to: $url")
})

// Don't forget to cancel the subscription when it's no longer needed
subscription.cancel()
```

### Retrieving cookies

To get cookies from the webview, you can use the `getCookies` method:

```hetu_script
webview.getCookies("https://example.com") // returns Future<List<Cookie>>
```

You can find the [`Cookie` class][spotube_plugin_cookie] and all it's methods and properties in the
`hetu_spotube_plugin` module source code

{/* Links */}
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[spotube_plugin_cookie]: https://github.com/KRTirtho/hetu_spotube_plugin/blob/main/lib/assets/hetu/webview.ht