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-templateclone 或在仓库页面点 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 plugins 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方法关闭两者都返回Futurevoidwebview.open() // returns Futurevoid webview.close() // returns Futurevoid其中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) }) // Dont forget to cancel the subscription when its no longer needed subscription.cancel()回调参数url就是变化后的地址。文档特别提醒不再需要监听时要调用subscription.cancel()取消订阅否则会一直持有该监听。获取 Cookies从 Webview 中读取 Cookies 使用getCookies方法传入目标网址webview.getCookies(https://example.com) // returns FutureListCookie该方法返回FutureListCookie。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考