SingleFile浏览器扩展：实现多页面下载时保持相对链接的技术方案

在Web应用开发中，经常需要将动态生成的仪表盘或网页保存为静态HTML文件以便离线使用。SingleFile作为一款强大的浏览器扩展，能够将完整网页保存为单个HTML文件，但在处理多页面应用时，保持页面间的相对链接是一个常见需求。

技术背景

现代Web框架如Dash和Vizro构建的仪表盘通常采用多页面架构，页面间通过相对路径链接。例如，一个链接可能指向"/correlation/bubble"这样的相对路径。当使用常规方法保存这些页面时，SingleFile默认会将相对链接转换为绝对URL，这会导致离线使用时链接失效。

解决方案

通过SingleFile的隐藏配置选项，可以实现保持相对链接的功能：

1. 禁用链接解析：设置resolveLinks为false，阻止SingleFile将相对链接转换为绝对URL
2. 自定义文件名模板：使用{url-pathname}作为文件名模板，确保保存的文件名与原始URL路径一致
3. 启用用户脚本：通过设置userScriptEnabled为true，可以在保存前对页面进行自定义处理

实现细节

对于需要更复杂处理的场景，可以考虑以下进阶方案：

1. 用户脚本定制：编写用户脚本在保存前动态修改链接，例如添加.html扩展名
2. 批量保存配置：通过SingleFile的批量保存功能，一次性保存多个相关页面
3. 扩展定制：在特殊情况下，可以fork SingleFile项目进行深度定制，将常用配置内置

应用场景

这种技术特别适用于：

• 数据可视化仪表盘的离线保存
• 多页面Web应用的静态归档
• 需要保持内部链接结构的文档保存

注意事项

实现时需考虑以下技术要点：

1. 安全限制：浏览器扩展通常不允许网页直接控制保存行为
2. 路径处理：确保保存的文件路径与原始URL路径匹配
3. 文件扩展名：可能需要额外处理来保证文件扩展名一致性

通过合理配置SingleFile，开发者可以轻松实现多页面应用的完整静态保存，保持原有的导航结构，为用户提供更好的离线使用体验。