# 给网页做个 minimap，一览全局、轻松跳到任何段落

> 本文公开全文。

原文：https://utgd.net/article/21341

网页本质是个超长的卷轴，就像《清明上河图》，只不过方向掉转了九十度。

既是卷轴，就应该可以像古代画卷那样打开，令人一览无遗，哪里图片密集，哪里有资源列表，哪里是作者自己总结的思维导图，应当一目了然。很可惜，这并非任一主流浏览器的默认功能，我们依然得靠手动滚动，辅以干巴巴的滚动条。固然，章节设置合理的文章，可利用目录，或自制目录，图片为主的，还可自制图例，但不规则的，可将卷轴作为兜底方案，直接摊开。

印象里，我分明在一些网站上见过完整页面的导航缩略图，通常称作 minimap。Sublime Text 等编辑器内置了类似功能。当时查了一些资料，结果只是一盆新的冷水——在技术上，和 Safari 无缘。

相关的 CSS 属性，也成了我持续追踪的技术变化之一。不过，追踪的同时，我还注意到另一件事——人工智能以比任何“相关领域人员”都快的速度在进步。突然有一天，ChatGPT 就能给出答案了：

Keyboard Maestro 示例动作下载（GitHub）

人工智能给出的是一段 Javascript 代码，用于在当前网页上显示一个 minimap 浮窗，一览网页全貌，辅助导航。我习惯用 Keyboard Maestro，顺手打包成了 Keyboard Maestro Macro，你可以在别处用，或者一键生成小书签（bookmarklet），在缺乏自动化工具的移动端使用。理论上，既然是 Javascript，而且连吊车尾 Safari 都能用，估计也兼容多数现代浏览器。

缩略图中的图文排版可能不完美，偶尔会“穿模”，但不影响大局，如果介意，找人工智能改一下！

缩略图 minimap 基本是可视化的滚动条，依然可以拖动，可以点击，但是呈有页面全局，并且框出当前所在位置，非常适合辅助阅读长文，避免乱了方向。

我不知道前几年求 minimap 插件的贴子有无后续，反正我的需求已经解决了。至于长尾中的意外，例如一些每逢滚到底部就无限加载新内容的网站，我并不考虑，毕竟我主要考虑文章。

从意识到 minimap 直至最终落地成实用小工具，跨度一年左右，其间，我通过三种方式追踪这一问题。首先是问题本身，即有无 minimap 插件或控件发布，其次是 Safari 是否支持了相关 CSS 特性，如果解决，我自己都会手挫代码。前两个方向，也交给人工智能追踪，最初是 DEVONagent 中的老式人工智能——这个名字颇具前瞻性——后期则是基于 LLM 的 Agent。两个方向都杳无音讯。

真正的突破，却来自随机的兴致：随口问了 ChatGPT 一句。一年来，既没有人折腾 minimap，Safari 也还是半死不活（我甚至在用两年前的旧系统），但是人工智能突然就突破了问题，找到了某种方案。这种信息获取，截然不同于关键词监控或爬虫，基本只能主动问——或让人工智能 Agents 定期跑，但是太烧 token——你不知道，人工智能在那一天忽然就想通了。

这好像一个真正有创造力的研发人员，资料还是那些资料，日常还是那个日常，悬置的问题也从来没有腾出时间专门研究，但突然有一日，福至心灵，他就想明白了。作为专利律师，原则上要否定机器的创造性，但现在，我不得不完全重新认识人工智能。

如果机械追踪不起作用，也烧不起 token 让人工智能持续思考，怎么解决那些悬置的问题呢？我最终发现，我也是整个解决系统的一环。人工智能足够强大，但它之所以正好解决了我的问题，是因为我关心。

与其问人工智能智能可以做什么，不如先自问你想干什么。关切才是最好的追踪。

---

[前往标准阅读页](https://utgd.net/article/21341?audience=web)