TL;DR爬虫Chrome扩展构建器

构建一个名为“TL;DR Crawler”的Chrome扩展程序（Manifest V3），它可以在任何普通网页上运行。 功能说明 点击工具栏图标：一只线条绘制的蜘蛛出现在当前页面上，跟随您的光标移动（滚动时也会跟随），读取它经过的文本，并在浮动面板中生成简短的TL;DR摘要。再次点击图标：所有内容消失，页面恢复原状。 1. 切换开关 - background.js：chrome.action.onClicked 通过 chrome.scripting.executeScript 注入 content.js。 - content.js 检查一个全局标志。如果爬虫已在运行，则关闭并清理。否则启动。每个标签页始终只有一个实例。 2. 查找文本 - 找到主要可读区域：优先选择 <article> 或 <main>，否则选择包含最多段落文本的元素。跳过导航、页眉、页脚、侧边栏、菜单、表单、代码、广告和隐藏元素。 - 收集文本块（p、li、blockquote、h2-h4）并将其拆分为句子。将每个句子存储为DOM Range（句子可以跨越链接和粗体文本，因此不要将它们包裹在元素中）。 - 使用防抖的MutationObserver（1秒）监视该区域，以捕获稍后加载的文本（无限滚动、延迟内容）。 3. 挑选关键句子 - 对每个句子评分：+2 数字，+2 百分比、美元、欧元、百万、十亿；+1.5 词语如 first、record、launch、announce、new、only、biggest、fastest、warns、raises、cuts；+0.3 每个大写名称（最高 +2）；-2 如果少于40或超过260个字符。 - 将前25%标记为关键句子（最少5个，最多80个），分布均匀，使大多数段落各有一个。 - 摘要，每个最多9个词： - 如果设置了API密钥：将所有关键句子在一次请求中发送给Claude，并要求返回一个JSON数组，包含简短、朴素的摘要（最多9个词，保留数字和名称，不夸大）。当出现新文本时，分批再次请求。 - 没有密钥时：回退摘要 = 移除填充词（and、but、however、also、according to）后的句子，在词边界处截断并添加“…”。 4. 蜘蛛 - 在文档根部的Shadow DOM宿主中，包含一个全屏固定 <canvas>（pointer-events: none，z-index 2147483646）和面板。 - 外观：小圆角矩形身体，椭圆腹部，带有两只白色眼睛的头部，轮廓为 #5ab8ff。8条腿为3px蓝色线条，带有粉色（#ff4f7a）关节圆点，每条腿两段，使用反向运动学，膝盖向外弯曲。 - 步态：两组交替的腿。一只脚仅在距离理想位置约80px且另一组已着地时迈步。步幅持续0.13秒，带有轻微抬起，落地时略微向前（行走方向）。 - 移动：目标 = 光标位置 + 滚动，因此滚动时也会跟随。最大速度约420 px/s，平滑加速，在距光标约40px处停止，平滑转向其方向。如果光标空闲8秒，则在视口内漫游。 - 使用requestAnimationFrame，固定1/120秒物理步长。支持devicePixelRatio和窗口大小调整。 5. 爬行 - 每80毫秒以及每次脚落地时，使用 document.caretRangeFromPoint 查找蜘蛛下方的文本（忽略扩展自身的元素）。 - 如果该点位于尚未发现的关键句子内：使用CSS自定义高亮API（::highlight(tldr-found) 带有柔和的黄色背景）高亮它，并将其摘要添加到面板。 - 如果脚落在普通单词上：约25%的情况下，仅对该单词进行故障效果。仅将该单词包裹在span中（它是单个文本节点，因此安全），并应用一种随机效果：等宽字体、蓝色轮廓、蓝色高亮、轻微旋转、宽字距、模糊或大写。每个单词最多2种效果。记录每次更改以便撤销。 6. 面板 - 右上角，可通过其标题栏拖动，位于Shadow DOM内，因此站点CSS不会影响它。 - 深色（#16181c），等宽标题“TL;DR”为黄色（#ffd166），“已找到 / 总计”计数器，粉色进度条，以及按文章顺序编号的列表。最新项目闪烁黄色，列表自动滚动到它。列表在最大高度内滚动。 - 按钮：“复制TL;DR”（纯文本到剪贴板）、“重新开始”（清除高亮、故障效果和列表）和“关闭”（完全关闭）。 - 如果设置了密钥，添加“使用Claude编写TL;DR”：发送所有已找到的句子，返回3行简短内容，仅使用其中的事实，数字不变。显示“思考中...”状态，然后在列表下方显示答案。 7. API密钥 - options.html：用户输入Anthropic API密钥和模型名称的字段，存储在 chrome.storage.local 中。 - 所有API调用通过 background.js 使用 fetch 到 https://api.anthropic.com，包含标头 x-api-key、anthropic-version: 2023-06-01 和 content-type: application/json。 - 静默处理错误：如果调用失败，保留回退摘要，并显示一条小的“AI不可用”提示。 8. 质量规则 - 绝不破坏站点的滚动、点击、链接或文本选择。 - 关闭时完全清理：画布、面板、高亮、包裹的单词span、内联样式、监听器、观察器、定时器。 - prefers-reduced-motion：无故障效果，行走速度较慢。 - 纯JavaScript，无库。文件：manifest.json、background.js、content.js、options.html、options.js、图标（16、48、128）。 - 权限：activeTab、scripting、storage。主机权限：https://api.anthropic.com/*。 最后，提供安装步骤：打开 chrome://extensions，启用开发者模式，点击“加载已解压的扩展程序”，选择文件夹，然后打开选项并粘贴API密钥。