Menu
AI驱动的网页标注工具，支持高亮元素和添加文字批注。智能防重复、自动滚动、碰撞检测。兼容 GitHub 等严格 CSP 网站。适用场景：(1) 标记网页元素进行讲解 (2) 添加文字批注和注释 (3) 代码审查和设计评审 (4) 教学演示和用户引导 (5) Bug 报告和问题标记
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | page-annotator |
| description | AI驱动的网页标注工具，支持高亮元素和添加文字批注。智能防重复、自动滚动、碰撞检测。兼容 GitHub 等严格 CSP 网站。适用场景：(1) 标记网页元素进行讲解 (2) 添加文字批注和注释 (3) 代码审查和设计评审 (4) 教学演示和用户引导 (5) Bug 报告和问题标记 |
在当前网页上创建可视化标注层，支持高亮和文字批注两种标注方式，所有标注可一键清除。
兼容性: 通过浏览器扩展权限绕过 CSP 限制，可在 GitHub、Google 等严格安全策略的网站上正常使用。
⚠️ 防止重复标注的关键：
"text": "YAML" → 匹配 12 处（侧边栏、正文、小标题）"text": "Beyond the markdown content, you can configure skill behavior using YAML" → 唯一匹配selector 限定范围（如 "selector": "main", "text": "长文本"）maxMatches: 1，只标注第一个匹配项💡 长文本匹配的优势：
| 脚本 | 功能 | 主要参数 |
|---|---|---|
annotate.js | 高亮元素并添加标签 | selector/text, label, color |
comment.js | 添加文字批注 | selector/text, comment, position, style, color |
clear.js | 清除所有标注 | 无 |
debug.js | 诊断标注问题 | 无 |
重要提示：始终使用长文本（完整句子）而不是短词，这是避免重复标注的最有效方法。
高亮元素（使用长文本匹配）：
{
"skill_name": "page-annotator",
"script_path": "scripts/annotate.js",
"arguments": {
"text": "Click the button below to start the installation process",
"label": "安装步骤",
"color": "yellow"
}
}
添加文字批注（长文本匹配）：
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"text": "Beyond the markdown content, you can configure skill behavior using YAML",
"comment": "这里说明了如何使用 YAML 配置",
"position": "right",
"style": "bubble",
"color": "blue"
}
}
添加文字批注（便签样式）：
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"text": "Make sure to backup your data before proceeding with the upgrade",
"comment": "⚠️ 升级前务必备份数据",
"style": "sticky",
"color": "orange"
}
}
清除标注：
{
"skill_name": "page-annotator",
"script_path": "scripts/clear.js",
"arguments": {}
}
诊断问题：
{
"skill_name": "page-annotator",
"script_path": "scripts/debug.js",
"arguments": {}
}
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"text": "用户登录",
"comment": "这是登录功能",
"position": "right",
"color": "blue",
"style": "bubble"
}
}
组合使用选择器和文本：
{
"skill_name": "page-annotator",
"script_path": "scripts/annotate.js",
"arguments": {
"selector": "h1",
"text": "欢迎",
"label": "标题",
"color": "yellow"
}
}
禁用自动滚动：
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"selector": ".footer",
"comment": "页脚信息",
"autoScroll": false
}
}
限制匹配数量（避免重复）：
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"text": "MCP",
"comment": "Model Context Protocol",
"maxMatches": 1
}
}
标注多个匹配项：
{
"skill_name": "page-annotator",
"script_path": "scripts/annotate.js",
"arguments": {
"text": "重要",
"label": "注意",
"color": "red",
"maxMatches": 5
}
}
包括隐藏元素：
{
"skill_name": "page-annotator",
"script_path": "scripts/comment.js",
"arguments": {
"text": "折叠菜单",
"comment": "这是隐藏的菜单项",
"onlyVisible": false
}
}
通用参数（annotate.js 和 comment.js）：
selector (string, 可选*): CSS 选择器，用于定位元素text (string, 可选*): 文本内容，用于搜索包含该文本的元素color (string, 可选): 颜色主题，支持 yellow/red/blue/green/orange，默认 yellowautoScroll (boolean, 可选): 是否自动滚动到元素位置，默认 truemaxMatches (number, 可选): 限制标注数量，默认 1（只标注第一个匹配项）onlyVisible (boolean, 可选): 是否只标注可见元素，默认 true（跳过隐藏元素）*注：selector 和 text 至少提供一个，推荐使用 text 更可靠
高亮专用（annotate.js）：
label (string, 可选): 标签文字，显示在元素上方批注专用（comment.js）：
comment (string, 必需): 批注内容position (string, 可选): 批注位置，支持 right/left/top/bottom，默认 rightstyle (string, 可选): 批注样式
bubble（气泡）- 默认，圆角矩形，适合一般说明sticky（便签）- 方形带图标，适合重要提醒inline（行内）- 紧凑型，适合简短说明| 颜色 | 用途 | 适用场景 |
|---|---|---|
yellow | 一般信息（默认） | 普通说明、提示 |
red | 错误、警告 | 问题标记、重要警告 |
blue | 信息、说明 | 功能讲解、步骤说明 |
green | 成功、推荐 | 正确做法、成功提示 |
orange | 注意、待优化 | 需要改进的地方 |
强制使用长文本匹配（推荐）：
长文本匹配是最可靠的方式，可以避免 99% 的重复标注问题。
// ✅ 最佳实践：使用完整句子
{
"text": "Beyond the markdown content, you can configure skill behavior using YAML frontmatter",
"comment": "YAML 配置说明"
}
// ✅ 推荐：使用段落开头
{
"text": "The installation process is straightforward and takes only a few minutes to complete",
"label": "安装说明"
}
文本长度建议：
如何选择文本：
文本搜索的智能优先级：
当使用 text 参数时，系统会按以下优先级搜索元素：
<main> 或 <article> 中的 <h1>-<h6>）<main> 或 <article> 中的段落、列表等）.content 区域的标题和文本自动排除的区域：
<nav>, .navigation, .navbar<aside>, .sidebar<header>, <footer>, .header, .footer优先级评分机制：
<main> 标签内：权重 10（最优先）<article> 标签内：权重 8<section> 标签内：权重 6这样可以确保标注始终定位到最相关的内容区域。
使用 CSS 选择器（不推荐）：
只在以下情况使用 CSS 选择器：
// 可以使用的选择器
{
"selector": "#unique-id",
"label": "特定元素"
}
// 避免使用的选择器
{
"selector": "div > div > div > button:nth-child(3)" // 太复杂，容易失效
}
强制使用长文本匹配（最重要）
// ❌ 错误：短词匹配多处
{ "text": "YAML" } // 可能匹配 12+ 处
// ❌ 错误：短句仍可能重复
{ "text": "配置文件" } // 可能匹配多处
// ✅ 正确：使用完整句子（15+ 字符）
{
"text": "Beyond the markdown content, you can configure skill behavior using YAML",
"comment": "YAML 配置说明"
}
// ✅ 正确：使用唯一的长文本
{
"text": "Click the button below to start the installation process and follow the on-screen instructions",
"comment": "安装步骤说明"
}
提取目标位置的完整句子
组合使用结构限制（可选）
// 在主内容区搜索长文本
{
"selector": "main",
"text": "This section describes the advanced configuration options available",
"comment": "高级配置说明"
}
避免使用的文本类型
"YAML", "配置", "按钮""点击这里", "了解更多", "查看详情"推荐使用的文本类型
验证文本唯一性
遇到问题时先诊断
{ "script_path": "scripts/debug.js" }
Q: 标注位置不准确？
autoScroll: true 自动滚动到元素Q: 出现重复的标注？
"text": "YAML" → 匹配 12 处"text": "Beyond the markdown content, you can configure skill behavior using YAML" → 唯一匹配maxMatches: 1 只标注第一个匹配项debug.js 检查重复情况clear.js 清除后重新标注Q: 找不到元素？
suggestions 字段获取建议Q: 批注相互重叠？
Q: 批注会遮挡原文吗？
pointer-events: none，鼠标可以穿透批注点击下方内容Q: 如何只标注主内容区的元素？
// 方法 1：使用长文本（推荐）
{
"text": "This is the main content paragraph that appears only once in the article",
"comment": "主要内容说明"
}
// 方法 2：组合选择器和长文本
{
"selector": "main",
"text": "Complete sentence from the main content area",
"comment": "说明"
}
Q: 如何避免标注到导航栏的内容？
<nav>, <aside>, <header>, <footer> 等区域onlyVisible: true（默认）会跳过隐藏元素selector: "main" 或 selector: "article" 限制范围详细文档请参考：