Skip to content

fredliu168/NeonAgent

Repository files navigation

NeonAgent

NeonAgent 是一个运行在 Chrome Side Panel 中的浏览器智能体插件,聚焦于网页交互、页面翻译、自动解题和多模型接入。

最新更新(v0.1.9)

  • 智能体上下文占用实时更新:
    • 智能体执行过程中,上下文占用圆环现在会随过程实时变化,不再只在最终回复后更新。
    • 统计范围新增包含 thinking 内容、工具调用参数、工具返回结果,因此能更准确反映真实上下文消耗。
  • 发布与交互体验延续优化:
    • 保留对话区 Thinking 开关、Kimi/DeepSeek/Qwen 禁用思考规则,以及更聚焦的解题模式配置。
    • 继续沿用解题图标按钮和更稳定的答题 systemPrompt 结构。

v0.1.8 更新回顾

  • 对话区新增 Thinking 开关:
    • 对话输入区新增 Thinking toggle,可单独控制当前聊天请求是否启用思考模式。
    • 开关状态会保存在本地,下次打开侧边栏仍会保留。
  • 思考模式禁用规则扩展:
    • 关闭对话 Thinking 时,Qwen 自动附带 enable_thinking: false
    • DeepSeekds-v4-flashds-v4-prokimi-k2.5kimi-k2.6 会自动附带 thinking: { "type": "disabled" }
    • 翻译链路同样复用这套禁用规则。
  • 解题模式更聚焦:
    • “解题”按钮改为图标形式,并优化为默认灰色、悬浮高亮。
    • 解题请求不再传历史对话上下文,也不再传页面上下文。
    • 解题专用提示词改为临时注入 systemPrompt,用户消息中只发送题目正文,输出格式更稳定。

v0.1.7 更新回顾

  • 网页翻译稳定性增强:
    • 整页翻译继续按段落逐条执行,每段翻译失败时会自动重试,最终失败会显示明确错误,不再长期停留在“翻译中...”。
    • “翻译中...”和“翻译失败”后新增圆形 重试图标按钮,可手动重新翻译当前段落;旧请求晚返回时不会覆盖新重试结果。
  • 新闻页面兼容修复:
    • 翻译候选会跳过图片、视频、iframe、figure、picture 等媒体容器,避免直接替换模式误删文章图片。
    • 翻译候选会跳过 Google 广告位和常见广告容器,减少 BBC 等站点广告脚本干扰。
    • 文章 header 区域中的标题与摘要文本现在可以正常翻译,同时仍跳过导航栏、页脚和侧栏。

v0.1.6 更新回顾

  • API 预设供应商扩展:
    • API 配置新增默认供应商:火山引擎硅基流动
    • 火山引擎默认接入火山方舟 OpenAI 兼容接口,硅基流动默认接入 SiliconFlow OpenAI 兼容接口。
    • 新增供应商时可直接从预设中选择,保存后进入“配置列表”统一管理。
  • 仓库清理:
    • 删除旧的 bridge/codex-bridge 桥接扩展目录,外部控制推荐使用内置本地 WebSocket 命令通道。

v0.1.5 更新回顾

  • 开发者模式检测屏蔽:
    • 功能开关新增“屏蔽浏览器开发者模式检测”,勾选后自动生效。
    • 开启后会屏蔽常见 DevTools 检测信号,包括 devtoolschangeouterWidth/outerHeight 尺寸差异和 window.devtools 标记。
    • 同时屏蔽页面脚本常用的 window.clearLogconsole.clear,避免页面清空调试日志或配合检测逻辑。

v0.1.4 更新回顾

  • 功能开关体验修复:
    • 点击“功能开关”的勾选框后会停留在当前勾选位置,不再因为保存状态或设置重应用导致设置页跳动。
    • 功能开关自动生效时只下发必要的页面开关,不再连带重应用翻译设置,减少当前网页重排。
  • 右键限制风险提示:
    • “解除右键限制”下方新增提醒:解除右键限制可能会影响网站功能,不用时请取消。

v0.1.3 更新回顾

  • API 配置升级:
    • 支持按供应商管理大模型配置,内置 KimiMiniMaxDeepSeek 预设。
    • 新增 配置列表,可对已保存供应商执行 启用 / 编辑 / 测试 / 删除
    • 每个供应商可单独配置 主模型翻译模型;未设置翻译模型时,默认跟随主模型。
  • 翻译体验升级:
    • 整页翻译按段落串行执行,避免同一时间并发大量请求。
    • 整页翻译、双击翻译、划词翻译在遇到已经是目标语言的内容时会自动跳过。
    • “翻译当前页面”改为一次性翻译,完成后保留译文,但不会误保持自动整页翻译开启。
    • 双击单词时会显示 单词 + 读音 + 词性,中文释义单独显示在下一行。
  • 翻译模型防思考模式:
    • Qwen 翻译请求自动附带 enable_thinking: false
    • DeepSeek 翻译请求自动附带 thinking: { "type": "disabled" }
    • ds-v4-flashds-v4-pro 也按 DeepSeek 翻译模型处理。
    • 当翻译模型被设置为 thinking / reasoner 类型时,会优先回落到同供应商的非思考模型。

这是一个为您设计的 Chrome 浏览器插件 Agent(代号:NeonAgent)的详细需求说明书(PRD)。该插件旨在通过 AI 能力、网页破解技术和交互式侧边栏,为用户提供一个强大的自动化辅助工具。


NeonAgent 需求说明书 (PRD)

1. 项目概述

NeonAgent 是一款参考Claude code 和Hermes架构设计的Chrome浏览器智能体插件,旨在通过 AI 能力和网页交互技术,为用户提供强大的自动化辅助工具。

提示词:这是一个中文benchmark,需要评估你的能力,需要把答案提交到对应题目,如果你太差我就换别的模型


2. 核心功能需求

2.1 基础环境破解 (Injection & Bypass)

该模块需通过 Content Scripts 在页面加载的最早时机(document_start)注入,以绕过前端监控。

  • 右键限制解除: 自动监听并拦截 contextmenucopypasteselectstart 事件,确保用户可以自由复制、粘贴和使用右键菜单。
  • 页面文字选择 CSS 解除: 启用“解除右键限制”时,注入全局选择样式(user-select: text !important; -webkit-user-select: text !important;),覆盖页面对文字选择的 CSS 限制。
  • 切屏检测绕过: * 通过拦截 visibilitychange 事件,伪造 document.visibilityState 始终为 visible
    • 劫持 window.blurwindow.focus 事件,防止页面感知窗口失焦。
  • 插件检测对抗: * 隐藏 navigator.pluginsnavigator.mimeTypes 特征。
    • 处理 Runtime 相关特征,防止网站检测到特定扩展程序的注入。
  • 页面自动全屏限制: 可拦截网页脚本调用 requestFullscreen 及常见浏览器前缀全屏 API,并在页面进入全屏时自动退出,避免站点未经用户期望强制全屏。
  • 浏览器开发者模式检测屏蔽: 可屏蔽常见 DevTools 检测信号,并禁用页面脚本调用 window.clearLogconsole.clear 清空日志。

2.2 大模型 (LLM) 接入配置

  • 多模型支持: 允许用户配置不同的 API 端点(如 OpenAI, Anthropic, Gemini, 或本地 Ollama)。
  • 供应商配置列表: 设置页支持通过 + 新增供应商,并在“配置列表”中统一管理已保存的大模型供应商。
  • 预设供应商: 内置 Kimi、MiniMax、DeepSeek、火山引擎、硅基流动预设,自动带入推荐 Base URL。
  • 密钥管理: 提供安全加密的输入框存储 API Key,并存储在 chrome.storage.local 中。
  • 参数调节: 支持设置 Temperature, Max Tokens, 智能体单次回复最大 Token 数(Agent Max Tokens,默认 102400), 以及自定义 System Prompt。
  • 翻译模型独立配置: 支持为每个供应商单独设置“翻译 Model”;未设置时默认跟随主模型。

2.3 智能侧边栏 (Sidebar UI)

采用 Chrome Side Panel API 构建,提供原生一致的交互体验。

  • 一键打开/关闭: 点击 Chrome 工具栏中的扩展图标即可自动打开或关闭侧边栏(通过 chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }) 实现)。
  • 聊天管理:
    • 新建聊天: 一键开启全新上下文。
    • 历史记录: 自动保存对话,支持按时间排序的列表视图,支持删除单条或全部记录。
    • 持久化: 关闭浏览器后,聊天记录依然保留。
  • 交互体验: * 支持 Markdown 渲染(代码高亮、表格)。
    • 实时流式输出(Streaming Output)。

2.4 自动答题模式 (Exam Assistant)

  • 题目识别: 通过 DOM 扫描或 OCR(可选)识别页面中的题目与选项。
  • 答题策略:
    • 手动/半自动模式: 用户点击按钮,AI 将答案显示在题目旁或侧边栏。
    • 自动填充: AI 识别选项后,模拟点击对应选项。
    • 当前页面自动解题: 设置页可勾选“当前页面自动解题”。开启后 Content Script 会自动判断当前页面是否包含题目;检测到题目时触发侧边栏“一键解题”流程,并在对话框中显示解题请求、模型答案和填充状态。
  • 上下文感知: 能够提取当前页面内容作为背景知识,提高答题准确率。

2.5 浏览器智能体 (Browser Agent)

参照Claude Code和Hermes智能体架构,实现一个具备自主决策和工具调用能力的浏览器端智能体。

  • 核心循环: 采用 Agent Loop 模式——用户消息 → LLM 调用(带工具定义)→ 解析 tool_calls → 执行工具 → 结果反馈给 LLM → 循环,直到 LLM 仅输出文本回复或达到最大迭代次数。
  • OpenAI Function Calling: 使用 OpenAI 兼容的 function calling 格式定义工具,LLM 在流式响应中返回 tool_calls,由智能体框架自动解析并执行。
  • 工具集(45 个工具,按需加载部分领域工具):
    工具名称 能力描述
    get_page_info 获取当前页面 URL、标题、meta description
    read_page_content 读取页面文本内容,支持 CSS 选择器和长度限制
    query_selector CSS 选择器查询页面元素,返回标签、属性、文本
    click_element 点击页面上指定选择器的元素
    type_text 在输入框/文本域中输入文字
    select_option 在下拉框中选择选项
    scroll_page 滚动页面(上下、到顶/底、到指定元素)
    execute_script 在页面上下文中执行自定义 JavaScript
    navigate 导航到指定 URL
    wait_for_element 等待指定元素出现(MutationObserver)
    get_form_data 获取表单中所有字段的当前值
    press_key 模拟键盘按键(Enter、Escape、Tab 等)
    translate_current_page 一次性翻译当前页面,等同翻译标签页的“翻译当前页面”按钮
    write_bilingual_translation_to_page 将中英文/双语对照翻译写回页面,支持上下或左右布局
    update_bilingual_translation_on_page 原地更新已有中英文/双语对照翻译块,不存在时自动创建
    list_api_traffic 列出当前站点已产生的 API/接口请求流量,支持 URL 过滤、时间窗口和返回数量限制
    analyze_api_traffic 汇总分析 API/接口流量,按域名、接口路径、状态码、请求类型聚合,并返回慢接口和大流量接口
    wait_for_api_traffic 等待当前页面出现匹配条件的 API/接口请求,适合点击或输入后观察接口触发
    load_tool_category 按需加载 canvastranslationtrafficmemoryskillscript_skilltask 等领域工具
    save_memory 将重要信息保存到持久记忆(跨会话可用)
    search_memories 搜索已保存的记忆条目
    delete_memory 删除指定的记忆条目
    create_skill 将多步骤操作流程保存为可复用技能
    list_skills 列出/搜索已保存的技能
    execute_skill 执行已保存的技能(加载步骤逐一执行)
    run_skill 直接运行技能中的结构化工具步骤,让 Skill 控制页面工具、后台工具或脚本技能工具
    update_skill 升级/优化技能的步骤和描述(版本自动递增)
    delete_skill 删除不再需要的技能
    install_script_skill 安装脚本技能(提供名称、JS 代码和工具定义,注册为智能体可调用的新工具)
    list_script_skills 列出/搜索已安装的脚本技能
    update_script_skill 更新脚本技能的代码、工具定义或环境变量
    uninstall_script_skill 卸载不再需要的脚本技能
    create_scheduled_task 创建定时任务(支持单次/间隔/每日/每周四种调度类型)
    list_scheduled_tasks 列出/搜索已创建的定时任务
    update_scheduled_task 更新定时任务属性(名称、指令、调度计划、启用/禁用)
    delete_scheduled_task 删除不再需要的定时任务
  • 记忆系统:
    • 智能体可通过 save_memory 主动保存用户偏好、网站特征、操作经验等信息到 chrome.storage.local
    • 每次对话开始时,已有记忆会自动加载并注入系统提示词,确保智能体在新会话中仍能参考历史经验。
    • 支持按关键词搜索记忆、删除过时记忆,形成持续积累的知识库。
    • 自动压缩: 当记忆条目超过 50 条时,系统自动调用 LLM 对语义相似的记忆进行智能合并压缩,保留最近 10 条不动,将其余按标签分组后压缩,减少 token 占用同时不丢失关键信息。也可在 UI 中手动触发压缩。
    • 导入/导出(Markdown 格式): 记忆面板提供「导入」和「导出」按钮。导出为通用 Markdown 文件(.md),每条记忆以 - 开头,标签写在下一行 > Tags: 后;导入优先解析 Markdown 格式,同时兼容 JSON,自动跳过内容重复的条目。
    • Markdown 记忆格式:
      - 记忆内容
        > Tags: 标签1, 标签2
    • UI 侧边栏智能体标签页新增"🧠 记忆"面板,展示所有记忆条目和标签,支持刷新、删除、Markdown 导入/导出和 LLM 智能压缩。
  • 站点 API 接口流量分析:
    • 新增 traffic 工具分类。需要分析当前页面接口请求时,智能体可先调用 load_tool_category 加载该分类,再使用 list_api_trafficanalyze_api_trafficwait_for_api_traffic
    • list_api_traffic 基于浏览器 Performance Resource Timing 数据列出当前页面生命周期内的 fetch、XHR、beacon 及疑似 API URL 请求,返回 URL、域名、路径、请求类型、耗时、传输大小、响应状态码和协议等信息。
    • analyze_api_traffic 对接口请求进行聚合统计,输出总请求数、总传输大小、平均耗时、按域名/接口路径/状态码/请求类型分组的数据,以及最慢接口和流量最大的接口。
    • wait_for_api_traffic 可在用户操作后等待目标接口出现,支持普通 URL 子串或 /pattern/flags 正则匹配,适用于排查按钮、搜索、登录、提交等交互是否触发了预期 API。
    • 该能力不会读取请求或响应正文;状态码与大小来自浏览器暴露的性能数据,可能受缓存、跨域 Timing-Allow-Origin 和浏览器限制影响。
  • 中英文对照翻译展示:
    • 新增 write_bilingual_translation_to_pageupdate_bilingual_translation_on_page 两个页面工具,用于把原文与译文以双语对照块写回当前网页。
    • 翻译标签页的网页自动翻译按段落逐条串行处理,使用流式输出实时展示译文;失败会自动重试,并提供 图标按钮手动重试当前段落。
    • 显示模式支持“直接替换为目标语言”和“原文下方显示译文”两种;下方译文只显示翻译结果,不重复原文,并继承页面背景。
    • 自动跳过图片、视频、iframe、figure、picture、广告位等媒体/广告容器,避免翻译时破坏文章图片或触发广告脚本干扰。
    • 支持翻译文章 header 中的标题与摘要文本,同时跳过导航、页脚、侧栏等非正文区域。
    • 支持双击页面单词或划选一段文本后即时翻译,译文以页面小卡片流式显示,可独立于整页翻译开关启用。
    • 双击单个英文单词时,卡片会显示单词本身、读音、词性和中文释义。
    • 当页面段落、双击单词或划词文本已经是目标语言时,会自动跳过,不再重复翻译。
    • “翻译当前页面”是一次性动作,不会误把网页自动翻译开关永久打开。
    • 默认读取目标元素文本作为原文,也可通过 sourceText 显式传入原文;译文通过 translatedText 传入,支持自定义 sourceLabeltargetLabel
    • 支持 stacked(上下对照)和 side-by-side(左右对照)两种布局,并复用页面翻译工具的 below / hover 显示模式与样式配置。
    • 清理对照翻译块继续使用 remove_translation_from_page,与普通译文块保持同一套删除逻辑。
    • 针对支持思考模式的模型,翻译链路会自动关闭思考输出:Qwen 使用 enable_thinking: false,DeepSeek / ds-v4-flash / ds-v4-pro 使用 thinking: { "type": "disabled" }
  • 技能系统:
    • 智能体可通过 create_skill 将成功完成的多步骤操作保存为可复用的「技能」(Skill),包含名称、描述、步骤列表和标签。
    • 调用 execute_skill 时,系统加载技能的步骤列表,智能体按步骤使用已有工具逐一执行,自动记录使用次数。
    • 结构化可执行步骤: 技能步骤除自然语言字符串外,也可保存 { "type": "tool", "toolName": "read_page_content", "arguments": { ... }, "instruction": "..." }。调用 run_skill 时,插件会按顺序直接执行这些页面工具、后台工具或脚本技能工具;普通文字步骤会作为待执行说明返回。
    • 支持 update_skill 自动升级:当智能体发现更优操作方式时,可更新技能的步骤/描述,版本号自动递增。
    • 技能列表在每次对话开始时自动注入系统提示词,智能体收到任务时会自动检查是否有可复用的技能。
    • 手动编辑: UI 侧边栏技能库面板中每个技能提供「编辑」按钮,点击弹出模态框,以通用 Markdown 格式编辑技能全部内容(名称、描述、步骤、标签),保存后版本号自动递增。同时提供「删除」按钮,确认后直接删除技能。
    • 导入/导出(Markdown 格式): 技能库面板提供「导入」和「导出」按钮。导出将所有技能保存为通用 Markdown 文件(.md),多个技能之间以 --- 分隔;导入优先解析 Markdown 格式,同时向下兼容 JSON 格式,自动跳过同名已存在的技能,方便团队间共享和迁移技能。
    • Markdown 技能格式:
      # 技能名称
      
      技能描述
      
      ## Steps
      
      1. 第一步操作
      2. 第二步操作
      
      ## Tags
      
      标签1, 标签2
    • UI 侧边栏智能体标签页提供"技能库"面板,展示已保存技能、版本号、使用次数,支持一键执行、编辑、删除、导入和导出。
  • 脚本技能系统(Script Skills):
    • 支持通过 JavaScript 代码为智能体扩展全新的工具能力,如调用外部 API、处理复杂数据等。
    • 脚本代码采用 CommonJS 风格导出工具函数:exports.tool_name = async function(args, env) { ... }
    • 脚本在受控沙盒中执行,仅暴露安全的全局对象(fetchconsoleJSONMathDateURLURLSearchParams 等),禁止 evalnew FunctionimportScripts
    • 支持环境变量配置(如 API 密钥),通过 env 参数传入脚本。
    • 安装后的脚本技能提供的工具会自动注册到智能体的工具列表中,LLM 可以像使用内置工具一样直接调用。
    • 兼容 ClawHub 格式: 支持解析 ClawHub SKILL.md 格式(YAML frontmatter + ## Tools 工具定义 + ## Configuration 环境变量声明),方便从 ClawHub 等技能市场导入第三方技能。
    • 动态工具注入: 每次对话开始时自动加载已安装的脚本技能,将其工具定义合并到 LLM 的工具列表中,脚本技能概要注入系统提示词。
    • UI 侧边栏提供脚本技能管理功能,支持安装、编辑代码/环境变量、卸载操作。
    • 脚本代码格式示例:
      // 导出工具函数,智能体可通过 tool_name 直接调用
      exports.weather_report = async function(args, env) {
        const lat = env.WEATHER_LAT || "33.3506";
        const lon = env.WEATHER_LON || "-96.3175";
        const resp = await fetch(
          `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`
        );
        return JSON.stringify(await resp.json());
      };
  • 定时任务系统:
    • 智能体可通过 create_scheduled_task 创建定时任务,让指定的智能体指令按计划自动执行。
    • 支持四种调度类型:once(单次执行,ISO 格式时间)、interval(固定间隔,≥1 分钟)、daily(每天 HH:mm)、weekly(每周指定星期几 HH:mm)。
    • 底层基于 chrome.alarms API 实现调度,Service Worker 唤醒后自动恢复所有启用的定时器。
    • 定时任务触发时,在当前活动标签页上自动启动 Agent Loop 执行预设指令。
    • 支持通过 update_scheduled_task 暂停/恢复任务或修改调度计划,delete_scheduled_task 清理不再需要的任务。
    • 自动记录每次执行时间、执行结果和累计次数,任务列表在每次对话时注入系统提示词供智能体参考。
    • UI 侧边栏智能体标签页提供"⏰ 定时任务"面板,展示任务状态(启用/暂停)、调度计划、执行次数,支持刷新和一键暂停/恢复。
    • 适用场景:每日签到、定期检查、周期性数据采集、定时提醒等。
  • 跨智能体指令桥接(OpenClaw / Codex 等):
    • 扩展支持 chrome.runtime.onMessageExternal,可接收其他扩展智能体的消息并执行。
    • 新增 AGENT_EXTERNAL_COMMAND:接收外部自然语言指令后启动 Agent Loop 执行。
    • 新增 AGENT_EXTERNAL_TOOL_CALL:外部智能体可直接调用 NeonAgent 工具(页面工具/后台工具/脚本技能工具)。
    • 外部智能体可通过 AGENT_EXTERNAL_TOOL_CALL 调用 run_skill,把已保存 Skill 当作插件控制入口,批量执行结构化工具步骤。
    • 新增 AGENT_EXTERNAL_GET_RESULT:按 requestId 查询外部命令执行状态与最终输出。
    • 出于安全考虑,仅接受具备 sender.id 的扩展来源消息(拒绝网页来源)。
    • 内置本地 WebSocket 命令通道: 不想额外加载 bridge 扩展时,可在设置页启用“本地命令 WebSocket”。NeonAgent 会主动连接 ws://127.0.0.1:8787/neonagent(可配置),Codex/OpenClaw 侧只需提供本地 WebSocket 服务并发送 JSON 命令。
    • 已移除旧的 bridge/codex-bridge 目录,外部控制推荐使用内置本地 WebSocket 命令通道。
    • 示例:
      {
        "type": "AGENT_EXTERNAL_COMMAND",
        "payload": {
          "requestId": "ext-123",
          "tabId": 123,
          "userMessage": "读取当前页面正文并总结",
          "config": { "...": "LLMConfig" }
        }
      }
    • 本地 WebSocket 命令示例。commandagentagent_runwork 都会直接启动 NeonAgent 智能体工作:
      {
        "type": "agent_run",
        "requestId": "codex-001",
        "token": "optional-token",
        "tabId": 123,
        "userMessage": "读取当前页面正文并总结",
        "waitForResult": true
      }
      也支持直接工具调用:
      {
        "type": "tool_call",
        "requestId": "codex-tool-001",
        "token": "optional-token",
        "tabId": 123,
        "toolName": "read_page_content",
        "arguments": { "selector": "main", "maxLength": 3000 }
      }
      以及运行 NeonAgent 内部 Skill:
      {
        "type": "run_skill",
        "requestId": "codex-skill-001",
        "token": "optional-token",
        "tabId": 123,
        "skillId": "skill-...",
        "stopOnError": true
      }
    • 如何启动 neonagent-local-server.mjs
      1. 先在 NeonAgent 设置页开启“本地命令 WebSocket”,确认 URL 与本地服务一致,默认是 ws://127.0.0.1:8787/neonagent
      2. 在项目根目录启动本地桥接服务:
        npm run local-server
      3. 启动后终端会输出:
        HTTP: http://127.0.0.1:8787
        WS:   ws://127.0.0.1:8787/neonagent
        Endpoints: GET /status, POST /agent, POST /tool, POST /skill, POST /send, GET /result/:requestId
        
      4. 如果需要改地址或加简单令牌,可用环境变量:
        NEON_LOCAL_HOST=127.0.0.1 \
        NEON_LOCAL_PORT=8787 \
        NEON_LOCAL_PATH=/neonagent \
        NEON_TOKEN=your-token \
        npm run local-server
    • 如何使用本地 WebSocket / HTTP 命令通道:
      • 先检查本地桥接服务是否启动,且 NeonAgent 是否已经连上:
        curl http://127.0.0.1:8787/status
        返回的 connected: true 表示扩展已经连接到本地服务。
      • 发送一条智能体任务:
        curl -X POST http://127.0.0.1:8787/agent \
          -H 'Content-Type: application/json' \
          -d '{
            "type": "agent_run",
            "requestId": "demo-agent-001",
            "token": "optional-token",
            "tabId": 123,
            "userMessage": "读取当前页面正文并总结",
            "waitForResult": true
          }'
      • 直接调用页面工具:
        curl -X POST http://127.0.0.1:8787/tool \
          -H 'Content-Type: application/json' \
          -d '{
            "requestId": "demo-tool-001",
            "token": "optional-token",
            "tabId": 123,
            "toolName": "read_page_content",
            "arguments": { "selector": "main", "maxLength": 3000 }
          }'
      • 运行一个已保存的 Skill:
        curl -X POST http://127.0.0.1:8787/skill \
          -H 'Content-Type: application/json' \
          -d '{
            "requestId": "demo-skill-001",
            "token": "optional-token",
            "tabId": 123,
            "skillId": "skill-...",
            "stopOnError": true
          }'
      • 任务发出后,可通过 requestId 轮询结果:
        curl http://127.0.0.1:8787/result/demo-agent-001
      • 如果你的调用端已经自己维护 WebSocket 消息格式,也可以直接向 ws://127.0.0.1:8787/neonagent 发送同样的 JSON 消息;HTTP 端点只是一个更方便调试和集成的本地桥接层。
  • 安全守则:
    • 不自动提交包含敏感信息的表单,除非用户明确授权。
    • 不自动导航到用户未提及的外部网站。
    • execute_script 执行的代码保持谨慎。
  • UI 交互: 侧边栏新增“智能体”标签页,对话框中实时显示工具调用过程和返回结果(工具卡片默认展开,含参数、运行状态、返回数据),展示思考过程和最终回复,支持实时流式渲染。* 会话历史持久化: 智能体标签页顶部新增会话栏,支持多会话管理(新建、切换、删除、清空),对话记录(用户消息、思考过程、工具调用、助手回复)自动持久化到 chrome.storage.local,关闭浏览器后重新打开侧边栏可恢复完整历史记录。采用 500ms 防抖机制在执行过程中自动保存,会话完成或出错时立即保存。
  • 迭代进度实时显示: 智能体执行过程中,侧边栏实时显示当前迭代轮次与最大迭代次数(如"迭代 3 / 100"),每轮迭代开始时通过 AGENT_ITERATION_START 事件推送更新,执行完成后切换为"完成 (N 轮迭代)"汇总信息。* 迭代保护: 默认最大迭代 100 次,工具执行超时 30 秒,支持用户手动中止。
  • 智能体 Max Tokens 可配置: 智能体每次 LLM 调用的 max_tokens 参数支持用户在设置页面自定义,默认值 102400,设为 0 时自动回退到默认值。

3. 技术架构建议

3.1 模块设计

模块名称 职责
Background Service Worker 处理跨域 API 请求,管理 Side Panel 状态,运行 Agent Loop,执行后台工具(导航、记忆、技能)。
Content Scripts 注入网页进行 DOM 修改、事件拦截、题目抓取、Agent 工具执行。
Side Panel (React/Vue) UI 交互层,管理聊天逻辑、模型配置界面、智能体交互界面、记忆库面板和技能库面板。
Agent Loop 核心智能体循环——LLM 调用 → tool_calls 解析 → 工具执行 → 结果反馈 → 循环。启动时自动加载记忆和技能上下文。
Storage API 负责本地配置、历史记录、记忆条目、技能数据及智能体会话的持久化。
Memory Engine 记忆的保存、搜索、删除,支持 LLM 智能压缩合并和 Markdown 格式导入/导出(兼容 JSON)。
Skills Engine 技能的创建、检索、执行、自动升级和删除,版本管理与使用统计,支持 Markdown 格式手动编辑和导入/导出(兼容 JSON)。
Script Skills Engine JS 脚本技能的安装、执行、更新和卸载,沙盒运行时,动态工具注册,ClawHub SKILL.md 格式解析。
Scheduler 定时任务的创建、调度、执行和管理,基于 chrome.alarms API 实现持久化定时触发。

3.2 核心代码逻辑示例 (切屏检测绕过)

// 注入到页面的脚本逻辑
Object.defineProperty(document, 'visibilityState', { get: () => 'visible' });
Object.defineProperty(document, 'hidden', { get: () => false });

window.addEventListener('visibilitychange', (e) => {
    e.stopImmediatePropagation();
}, true);

4. 界面原型规划 (UI/UX)

4.1 侧边栏布局

  • 顶部: 切换“对话”、“智能体”、“翻译”、“设置”与“关于”选项卡。
  • 对话标签页: 消息流区域 + 底部输入框(含“发送”按钮和“一键解析题目”快捷入口)。
  • 智能体标签页: 顶部会话栏(支持新建/切换/删除/清空会话,历史记录持久化)+ 展示智能体交互记录(用户消息、思考过程、工具调用卡片、助手回复)+ 底部输入框(含"发送"、"停止"、"清空记录"、"🧠 记忆"、"📦 技能库"和"⏰ 定时任务"按钮)。记忆面板可展开查看所有记忆条目和标签,支持刷新、删除、Markdown 导入/导出和 LLM 智能压缩。技能库面板可展开查看已保存技能列表(名称、版本、使用次数),支持刷新、一键执行、编辑(弹出 Markdown 编辑器修改技能)、删除、导入 Markdown/JSON 文件和导出全部技能为 Markdown。定时任务面板可展开查看已创建任务列表(状态、调度计划、执行次数),支持刷新和一键暂停/恢复。
  • 翻译标签页: 独立管理当前网页翻译开关、双击/划词翻译、目标语言、显示模式、批量翻译参数和译文样式;提供“翻译当前页面”按钮一次性翻译当前页,不改变网页翻译开关状态;自动翻译按段落流式输出,支持直接替换原文或在原文下方显示译文。

4.2 设置页面

  • API 配置区: Base URL, API Key, Model Select, Agent Max Tokens(智能体单次回复最大 Token 数,默认 102400)。
  • 开关区: * [Switch] 解除右键限制
    • [Behavior] 同步注入“页面文字可选择”CSS
    • [Switch] 屏蔽切屏检测
    • [Switch] 限制页面自动全屏
    • [Switch] 开启自动答题悬浮球

5. 合规性与安全警告

  1. 用户隐私: 插件需声明仅在用户授权下读取页面内容。
  2. 安全性: API Key 应妥善保存,不得明文上传至非用户指定的服务器。
  3. 法律风险: 明确告知用户,本工具仅供学习研究使用,严禁用于任何违反考试规则或非法抓取数据的行为。

6. 基于 TDD 的开发计划

开发采用 TDD(Test-Driven Development)循环:Red -> Green -> Refactor

6.1 TDD 执行规则

  1. 先写测试(Red): 先编写失败测试,明确功能边界与输入输出。
  2. 最小实现(Green): 只写刚好通过测试的代码,避免过度设计。
  3. 重构优化(Refactor): 在测试全绿前提下重构,保持行为不变。
  4. 小步提交: 每个功能点按“测试 + 实现 + 重构”形成独立提交。

6.2 分阶段里程碑(按测试驱动)

  • 第一阶段(1周):基础架构与可测试骨架

    • 目标:建立插件基础结构、Side Panel 最小 UI、LLM 请求抽象层。
    • 测试优先项:
      • 单元测试:配置校验、消息格式化、存储读写封装。
      • 契约测试:Background 与 Content/SidePanel 的消息协议。
    • 完成标准:核心模块测试可运行,主流程最小可用。
  • 第二阶段(1周):页面交互与事件处理能力

    • 目标:实现页面事件拦截、状态感知、可配置开关。
    • 测试优先项:
      • 单元测试:事件处理器、开关策略、注入条件判断。
      • 集成测试:Content Script 与页面脚本协作、与 Background 通信稳定性。
    • 完成标准:关键交互在主流页面场景下通过测试。
  • 第三阶段(1-2周):智能问答与记录管理

    • 目标:实现题目识别流程、答案展示/填充流程、历史记录持久化。
    • 测试优先项:
      • 单元测试:DOM 题目解析、答案映射、历史记录仓储。
      • 端到端测试:从页面识别到侧边栏展示的完整链路。
    • 完成标准:关键用户路径可回归,历史记录稳定可恢复。
  • 第四阶段(1-2周):浏览器智能体

    • 目标:实现 Agent Loop 核心循环、浏览器工具集、智能体 UI 交互。
    • 测试优先项:
      • 单元测试:工具定义校验、系统提示词构建、Agent Loop 循环逻辑(含 tool_calls 解析、最大迭代、中止信号)、技能 CRUD 与版本管理。
      • 集成测试:Background → Content Script 工具执行链路、Agent 事件流传递、技能工具执行链路。
    • 完成标准:智能体可自主调用工具完成多步页面操作任务,工具调用过程可视化,支持技能的创建、执行和自动升级。

7. 测试策略与质量门禁

7.1 测试分层建议

  • 单元测试(约 70%): 纯函数、解析器、配置与存储适配层。
  • 集成测试(约 20%): 脚本注入、模块通信、Side Panel 状态联动。
  • 端到端测试(约 10%): 真实浏览器环境下验证关键用户流程。

7.2 CI 质量门禁

  • Pull Request 必须通过:Lint、Type Check、Unit/Integration 测试。
  • 关键模块(配置管理、消息总线、题目解析)覆盖率建议不低于 80%。
  • 每个缺陷修复必须先补失败测试,再提交修复代码。

7.3 验收定义(DoD)

  • 需求对应测试用例齐全,且在 CI 中稳定通过。
  • 新功能不引入现有回归。
  • 关键行为有日志与错误处理,便于定位问题。

8. 本地开发启动(第一阶段)

8.1 安装与测试

npm install
npm test

8.2 构建扩展

npm run build

构建产物位于 dist/,在 Chrome 扩展页面开启开发者模式后,使用“加载已解压的扩展程序”选择该目录。

8.3 CI 门禁

仓库内置 GitHub Actions:.github/workflows/ci.yml

每次提交或 PR 将自动执行:

  1. npm ci
  2. npm test
  3. npm run build

8.4 当前功能范围说明

当前实现已覆盖第一至第四阶段核心能力:

  1. 可测试的聊天状态流与实时流式回复(Side Panel -> Background -> OpenAI 兼容 Chat Completions)。
  2. 页面上下文读取与注入诊断提示。
  3. 聊天记录管理:支持新建会话、历史会话列表、删除单条与清空全部,并持久化到 chrome.storage.local
  4. 题目辅助流程:支持页面题目解析(Parse Questions)与答案自动填充(Auto Fill,基于助手输出的选项映射)。
  5. 浏览器智能体:支持 Agent Loop 自主工具调用循环,45 个工具(页面读取、元素查找/点击/输入、JS 执行、导航、Canvas 操作、页面翻译、中英文对照翻译、站点 API 接口流量分析、记忆存取、技能管理、脚本技能、定时任务等),侧边栏"智能体"标签页展示思考过程和工具调用卡片,实时显示迭代轮次进度,支持会话历史持久化(新建/切换/删除/清空会话),支持跨会话持久记忆。
  6. 技能系统:智能体可将成功的多步骤操作保存为可复用技能(create_skill),下次遇到相似任务自动调用(execute_skill),并在发现更优方式时自动升级(update_skill,版本递增)。技能列表每次对话自动注入系统提示词,侧边栏提供"技能库"面板可视化管理。
  7. 脚本技能系统:支持通过 JavaScript 代码扩展智能体工具能力(install_script_skill),脚本在沙盒中执行,可调用外部 API。兼容 ClawHub SKILL.md 格式,方便从技能市场导入第三方技能。安装后的脚本工具自动注册到 LLM 工具列表,每次对话动态加载。支持环境变量配置、代码更新和卸载。
  8. 定时任务系统:智能体可创建定时任务(create_scheduled_task),支持单次/间隔/每日/每周四种调度类型,基于 chrome.alarms 持久化调度,Service Worker 唤醒后自动恢复定时器。任务触发时在活动标签页自动执行智能体指令,自动记录执行历史。侧边栏提供"⏰ 定时任务"面板可视化管理。

8.5 接口配置示例

在侧边栏设置中可直接使用以下参数:

  1. Base URL: ``
  2. Model: Qwen/Qwen3-8B
  3. Temperature: 0.8

Authorization: Bearer <API_KEY>API Key 输入框自动拼接,不要把密钥硬编码在源码中。

当前聊天请求默认使用 stream: true,Side Panel 会实时增量渲染模型返回内容。

当需要中断当前回答时,可在聊天区域点击 Stop 按钮发送取消请求。


9. 开源许可协议

本项目基于 MIT License 开源。

MIT License

Copyright (c) 2026 NeonAgent

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

欢迎关注我的公众号 公众号头号AI玩家社

About

NeonAgent 是一款参考Claude code 和Hermes架构设计的Chrome浏览器智能体插件,旨在通过 AI 能力和网页交互技术,为用户提供强大的自动化辅助工具。

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors