开发一个名为“TL;DR Crawler”的Chrome扩展程序(Manifest V3),该扩展程序可在任何普通网页上运行。
它的功能
点击工具栏图标:当前页面上会出现一只线条绘制的蜘蛛,它会跟随光标移动(滚动页面时也会跟随),读取它爬过的文本,并在一个浮动面板中生成一个简短的总结(TL;DR)。再次点击该图标:所有内容都会消失,页面恢复原状。
- 切换
- background.js: chrome.action.onClicked 使用 chrome.scripting.executeScript 注入 content.js。
content.js 会检查一个全局标志。如果爬虫已经在运行,它会关闭并清理资源;否则,它会启动。每个标签页只能运行一个实例。
- 找到文本
- 找到主要可读区域:首选或者否则,选择段落文本最多的元素。跳过导航栏、页眉、页脚、侧边栏、菜单、表单、代码、广告和隐藏元素。
- 收集文本块(p、li、blockquote、h2-h4),并将它们拆分成句子。将每个句子存储为 DOM Range(句子可以跨越链接和粗体文本,因此不要将它们包裹在元素中)。
- 使用防抖 MutationObserver (1s) 监视该区域,以获取稍后加载的文本(无限滚动、延迟加载内容)。
- 选择关键句子
- 每句话加分:+2 位数字,%、$、 € 、百万、十亿 +2 分;第一、记录、启动、宣布、新的、唯一、最大的、最快的、警告、提高、削减等词语 +1.5 分;每个大写字母 +0.3 分(最高 +2 分);少于 40 个字符或超过 260 个字符 -2 分。
- 将前 25% 的句子标记为关键句(最少 5 个,最多80) ,分散放置,以便大多数段落都能得到一个关键句。
- 摘要,每篇最多9个字:
- 如果设置了 API 密钥:将所有关键语句通过一个请求发送给 Claude,并请求返回一个包含简短、简洁摘要的 JSON 数组(最多 9 个单词,数字和名称必须完全一致,不要夸大其词)。当出现新文本时,分批再次请求。
- 没有键:备用摘要 = 删除填充词开头(and、but、however、also、according to)的句子,在单词边界处用“…”切断。
- 蜘蛛
- 文档根目录下的 Shadow DOM 主机包含一个全屏固定窗口(指针事件:无,z-index 2147483646)和面板。
- 外观:小圆矩形身体,椭圆形腹部,头部有两个白色眼睛,轮廓在#5ab8ff中。8 条腿,3px 蓝色线条,粉色 ( #ff4f7a ) 关节点,每条腿分为两节,每节具有反向运动学,膝盖向外弯曲。
步态:两组交替迈步。只有当一只脚距离理想位置约 80 像素且另一组脚着地时……
后面还有1000多字