Spotube 插件如何用 WebView API 打开网页、监听 URL 变化并获取 Cookies

Spotube 插件如何用 WebView API 打开网页、监听 URL 变化并获取 Cookies

【免费下载链接】spotube🎧 Open source music streaming app! Available for both desktop & mobile!项目地址: https://gitcode.com/GitHub_Trending/sp/spotube

如果你在开发 Spotube 插件，需要应用内展示一个网页、跟踪用户在页面中的导航、并在页面访问后读取其 Cookies，就可以使用 Spotube 内置的 WebView API。该 API 通过内置模块hetu_spotube_plugin暴露给插件，插件本身用 hetu_script（一种基于 Dart 的脚本语言）编写。这篇文章按“声明 API → 创建并打开网页 → 监听 URL 变化 → 获取 Cookies → 编译验证”的顺序，给出可以直接对照执行的完整路径。

前置条件与项目初始化

Spotube 插件开发的要求见 插件开发入门文档：

• 基本的编程知识；
• Dart 和 Flutter 知识（hetu_script 与 Typescript 风格接近，懂 Dart 或 Javascript 的人上手很快）；
• VSCode 或其他代码编辑器。

初始化插件项目时，使用官方模板仓库spotube-plugin-template（clone 或在仓库页面点 "Use this template"）：

$ git clone https://github.com/KRTirtho/spotube-plugin-template.git $ cd spotube-plugin-template

模板中的example文件夹包含一个简单 Flutter app，会调用 Spotube 对你的插件调用的全部方法，后面用它来做验证。

在 plugins.json 中声明 webview API

模板根目录下的plugins.json决定了 Spotube 如何识别你的插件，其中的apis字段是一个数组，用于确定哪些 API 对插件可用。文档列出的可用值只有三个："webview"、"localstorage"、"timezone"。要使用 WebView API，必须保证apis中包含"webview"：

{ "type": "metadata", "version": "1.0.0", "name": "Alphanumeric plugin name with hyphens or underscore", "author": "Your Name", "description": "A brief description of the plugin's functionality.", "entryPoint": "plugin class name", "apis": ["webview", "localstorage", "timezone"], "abilities": ["authentication", "scrobbling"], "repository": "https://github.com/KRTirtho/spotube-plugin-template", "pluginApiVersion": "1.0.0" }

其余字段（name、author、description、entryPoint等）按你的插件信息修改。如果apis里没有"webview"，插件就不可用 WebView API。

创建并打开网页

hetu_spotube_plugin是 Spotube 插件开发用的内置库（提供 Webview、Forms、LocalStorage 等内部 API 的访问），先以模块形式导入，再用uri参数创建Webview实例：

import "module:spotube_plugin" as spotube let webview = spotube.Webview(uri: "https://example.com")

之后用open方法打开网页，用close方法关闭，两者都返回Future<void>：

webview.open() // returns Future<void> webview.close() // returns Future<void>

其中uri是你要加载的页面地址，替换为你插件实际需要打开的网址即可。

监听 URL 变化

要跟踪用户在网页中的导航（跳转到别的页面、点击链接等），使用onUrlRequestStream方法：它在 Webview 的 URL 发生变化时触发。文档要求同时导入hetu_std并使用其中的Stream，示例如下：

// 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()

回调参数url就是变化后的地址。文档特别提醒：不再需要监听时，要调用subscription.cancel()取消订阅，否则会一直持有该监听。

获取 Cookies

从 Webview 中读取 Cookies 使用getCookies方法，传入目标网址：

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

该方法返回Future<List<Cookie>>。Cookie类本身的所有方法与属性，文档指明以hetu_spotube_plugin模块源码为准（该模块源码中的webview.ht文件定义了Cookie类）。文档没有列举Cookie的具体字段，使用前请查阅模块源码确认属性名，不要自行假设。

编译并运行 example app 验证

模板自带的 example app 是验证插件功能的方式。先要把插件编译成字节码：

$ make

这一步需要系统安装了make命令，并且全局安装了hetu_script_dev_tools包（它是 hetu_script 的 CLI 工具，可将 hetu 脚本文件编译为字节码或直接运行，并提供 REPL）。

编译完成后，像运行普通 Flutter app 一样运行 example：

$ cd example $ flutter run

需要注意文档给出的提示：example app 中大多数按钮在插件方法尚未实现前不会有效果，按钮对应的功能需要你在插件源码中实现相应方法后才会工作。因此运行 example app 的验证意义在于确认插件能编译、加载，以及你已实现的方法被正确调用。

限制与已知问题

• 插件只能使用plugins.json的apis中声明的 API，可用值仅限webview、localstorage、timezone三种。
• hetu_script 生态尚新，社区库不多。开发辅助方面，VSCode 的 Hetu Script 扩展目前只提供基础语法高亮，尚不支持 LSP，因此没有自动补全和 linting。
• Cookie类的字段与方法未在 Spotube 文档中展开，需以hetu_spotube_plugin模块源码为唯一依据。

更多 API 背景可参阅 WebView API 文档、创建第一个插件 与 插件库列表。

【免费下载链接】spotube🎧 Open source music streaming app! Available for both desktop & mobile!项目地址: https://gitcode.com/GitHub_Trending/sp/spotube