AI 工具箱

AI 侧边栏助手与前端效率工具箱：支持对话、翻译、OCR 与页面总结；提供 Mock、请求头、CORS、代理切换、JSON/TS 调试，以及取色器、尺子、截图与思维导图。

【AI 工具箱是什么】 「AI 工具箱」是一款面向前端开发者、测试同学与效率用户的 Chrome 侧边栏扩展。它把浏览器里最高频的两类能力放进同一个工作台： 1）侧边栏 AI 助手：连续对话、划词翻译、OCR 识图、页面内容理解与整理； 2）本地开发与设计辅助：API Mock、请求头修改、CORS 跨域助手、代理切换、JSON 工具（含差异对比）、TypeScript 类型生成、时间工具，以及取色器、尺子、截图、Mermaid 思维导图、图片工具等。 你可以把它理解成「常驻在浏览器旁边的前端效率面板」：一边浏览网页或调试页面，一边立刻调用 AI 或本地工具，而不必在多个独立插件、临时网站、命令行脚本之间来回切换。主界面采用 Chrome Side Panel（侧边栏），也支持在 DevTools 场景下使用工具面板，尽量贴近开发者真实工作习惯。 本扩展的定位非常明确：服务「个人开发效率与本地调试」，强调本地可控、按需启用、开发场景优先。它不是广告工具，不是强制改搜索的工具栏，也不是需要把数据上传到我们自有服务器才能用的「黑盒 SaaS」。 【用户为什么应该安装它】 前端同学每天会反复遇到这些碎片化、但又极其真实的场景： • 打开一篇英文技术文档或 API 说明，想先翻译，再追问「这段配置到底影响什么」； • 后端接口还没好，或联调环境不稳定，想先用 Mock 把页面流程跑通； • 本地前端调远端 API 时撞上跨域，或需要临时加 Token / 灰度 Header 才能复现问题； • 需要在直连、本地 Whistle、测试代理之间快速切换，测完又要立刻恢复； • 接口返回一大段 JSON，要格式化、压缩、和另一份结果做 Diff，再顺手生成 TS 类型； • 走查 UI 时要取色、量间距、截图留存，还要把流程画成思维导图放进文档。 这些需求单独看都不难，但工具非常分散：翻译一个扩展、Mock 一个扩展、改 Header 一个扩展、代理又一个扩展……结果是安装多、入口散、上下文割裂，最浪费的是「切换工具」的时间与注意力。 「AI 工具箱」要解决的正是这个问题：用一个扩展覆盖「读网页 → 理解/翻译 → 调试接口 → 核对视觉」这条前端日常链路，减少工具切换成本，让你把精力留在真正要交付的功能上。 建议安装的人群： • 前端 / 全栈开发者：经常联调接口、排查跨域、改请求头、切换代理环境； • 需要边看文档边翻译、总结，并继续与 AI 讨论方案的同学； • 希望取色、尺子、截图、Mermaid 等设计辅助就在侧边栏随手可用的同学； • 希望 API Key、规则与数据主要保存在本地，由自己配置模型服务的用户； • 不想同时维护十几个「单点功能」扩展，希望收敛到一个工作台的人。 请先了解的限制（避免预期不符）： • 本扩展不是「免 Key、无限免费 AI」。对话 / 翻译 / OCR 等 AI 能力需要你自行配置大模型 API Key； • Mock、CORS、请求头、代理会改变浏览器网络行为，请仅在开发或测试环境使用，用完及时关闭或恢复直连； • 它不是企业统一网关、团队协作平台或云端项目管理系统，定位是个人效率与本地调试助手； • 在 chrome:// 等受保护页面上，内容脚本可能无法注入，这是浏览器安全限制。 【核心价值：一个侧边栏，覆盖四条高频工作流】 工作流 A｜网页阅读与信息处理 打开任意网页 → 划词后右键「在侧边栏翻译」，或把内容放入侧边栏对话 → 继续追问、改写、提炼要点、生成清单。适合读英文文档、技术博客、需求说明、竞品页面文案。 工作流 B｜接口未就绪时的前端开发 配置 Mock 规则拦截指定 URL → 返回自定义 JSON（可配合延迟模拟慢接口）→ 继续开发页面交互与状态流；需要时可把响应粘贴到 JSON 工具整理，再用 TS 类型生成补齐类型定义。 工作流 C｜联调与排障 临时修改请求头（鉴权、语言、灰度、调试标记）→ 用 CORS 助手降低跨域摩擦 → 必要时切换代理情景到本地代理或指定环境 → 复现并定位问题 → 关闭规则并恢复直连。这条链路对「偶发环境问题」特别有用。 工作流 D｜视觉核对与材料沉淀 取色器吸取主色与状态色 → 尺子测量间距与对齐 → 区域/可视区域/长截图留存 UI 问题 → 用 Mermaid 把流程、架构、决策树整理成图，放进文档或评审材料。 【功能详解｜AI 能力（需配置 API Key）】 1. 智能对话 在侧边栏与 AI 连续对话，支持流式输出，适合问答、改写、方案梳理、根据任务生成步骤。提供「新建对话」：一键清空当前会话与输入态，避免旧上下文干扰新任务。聊天工具栏可快速切换翻译、OCR，并把尺子、截图放在手边，减少「先找工具再做事」的路径。 2. 翻译 工具栏进入翻译模式后，可指定中英方向或自动识别语言。也支持在网页选中文本后通过右键菜单直接送到侧边栏翻译，减少复制粘贴。翻译不是终点：你可以继续追问「解释术语」「改成更口语」「整理成表格」等，把一次性翻译变成可持续的阅读工作流。 3. OCR 文字提取 对图片中的文字进行提取，再继续总结、翻译或整理成清单。适合会议截图、参数图、海报、表格截图、错误弹窗等无法直接复制的内容。对网页图片也可结合右键 OCR 相关能力减少「先保存再上传」的步骤（受页面与权限环境影响时，刷新页面后再试通常更稳）。 4. 页面内容理解与整理 可结合当前页面或你粘贴的内容做总结、提炼重点、生成汇报结构。适合快速浏览长文、把材料压成可执行结论，或把零散笔记整理成大纲。 关于 AI 数据：你的请求会发送到你配置的模型服务商（例如智谱等，以及你启用的其他兼容服务）。API Key 与对话相关数据用于完成你主动发起的请求；开发者不出售用户数据。详见隐私政策：https://luoyangs.github.io/ai-toolbox/privacy/ 【功能详解｜开发调试工具】 1. API Mock 按 URL 匹配（支持更灵活的匹配方式）拦截请求并返回模拟数据，便于在后端未就绪、环境不稳定或需要固定数据时推进前端开发。可配置延迟等高级选项，模拟慢接口与加载态。规则保存在本地，可随时启用/停用；建议只对测试域名开启，避免误伤日常浏览。 2. 请求头修改（ModHeader） 为匹配到的请求增删改 HTTP Header。常见用途：临时附加 Authorization、改 Accept-Language、加灰度/调试标识、验证服务端对 Header 的分支逻辑。任务结束后请关闭规则，以免影响正常站点行为。 3. CORS 跨域助手 协助处理开发阶段的跨域调试需求，降低「本地前端调用远端 API」时的摩擦。它服务于调试，不是绕过生产安全策略的手段；请只在你有权测试的环境使用。 4. 代理切换 提供情景化的代理能力（含 PAC / 自动切换思路），方便在直连、本地代理、指定调试环境之间切换。这是强网络权限能力：测完请务必切回直连，不要在日常上网时长期挂着调试代理。 5. JSON 工具 支持格式化、压缩、校验，并提供差异对比（类 git diff 的增删高亮），方便核对两份接口结果、配置文件或导出数据的差异。对大 JSON 还支持选区操作，提升局部编辑效率。即使不配置 AI Key，该工具也可独立使用。 6. TypeScript 类型生成 从 JSON 结构生成 TypeScript 类型定义，缩短「看响应写 interface」的时间，适合快速原型与联调阶段补类型。 7. 时间工具 覆盖时间戳转换、时区相关换算等小需求，方便处理日志、订单、排障记录中的时间字段。 【功能详解｜设计与页面辅助】 1. 取色器：从真实页面吸取颜色，便于对齐设计规范与组件状态色。 2. 尺子：开启页面参考线与测量能力。可从顶部/左侧边缘拖出辅助线，进入测量模式后可量取距离；按住 Shift 可锁定水平或垂直方向。再次点击可关闭，避免遮挡正常操作。 3. 截图：提供区域截图、可视区域、滚动长图、手动滚动拼接等模式，适合留存 UI 问题、验收对比与文档配图。启动后按提示在页面操作，Esc 可取消（以实际页面提示为准）。 4. Mermaid 思维导图：把流程、架构、关系与决策树渲染成图，方便评审沟通与文档沉淀。 5. 图片工具：提供常见图片处理辅助，减少为了压缩/转换临时打开多个网站的成本。 【如何开始使用（建议路径）】 1. 安装扩展，点击浏览器工具栏图标打开侧边栏；如需，也可在 Chrome DevTools 中使用相关面板。 2. 打开设置，填写你自己的大模型 API Key。只有 AI 对话/翻译/OCR 等能力依赖 Key；JSON、Mock、尺子、截图等本地工具通常可直接用。 3. 在聊天页工具栏尝试：新建对话、翻译、OCR、尺子、截图。 4. 进入「更多工具」，按「开发工具 / 设计工具」分类打开 Mock、CORS、代理、JSON、取色器等完整面板。 5. 每次调试结束后：关闭 Mock/Header/CORS 规则，代理恢复直连，再去浏览无关网站。 【权限说明（用户可读版）】 为了实现侧边栏、划词翻译、页面尺子/截图，以及 Mock/CORS/代理等调试能力，扩展需要申请相应浏览器权限。主要包括： • sidePanel / contextMenus：侧边栏主界面与右键翻译入口； • scripting 与主机访问：在网页中注入必要逻辑，以提供 Mock 拦截、尺子、截图等能力； • declarativeNetRequest：落地 Mock、CORS、请求头等网络规则； • proxy：仅服务于「代理切换」； • storage / unlimitedStorage：保存配置、API Key、规则与较大本地数据（例如 OCR 相关资源）； • downloads：保存截图等导出文件。 我们坚持最小必要原则：调试类能力由你主动开启；隐私政策公开可查：https://luoyangs.github.io/ai-toolbox/privacy/ 【安全与合规使用建议】 • 把 API Key 当作密码保管，不要发给他人；泄露后请立即在服务商控制台轮换。 • 不要在生产环境对真实用户流量长期开启 Mock、改 Header 或异常代理。 • 仅对你有权测试的网站启用调试规则。 • 若某站点首次使用页面工具失败，先刷新页面再试；系统页（chrome://、扩展商店页等）可能无法注入。 • 公司电脑如有安全策略限制扩展权限，请遵循所在组织规范。 【常见问题（FAQ）】 Q：必须配置 API Key 才能用吗？ A：AI 对话/翻译/OCR 需要；JSON、Mock、尺子、截图、取色等本地工具一般不需要。 Q：数据会上传到你们服务器吗？ A：扩展本身以本地配置与本地规则为主。你发起的 AI 请求会发往你配置的模型服务商。我们不出售用户数据。详见隐私政策。 Q：会不会影响我正常上网？ A：默认不应。只有你启用 Mock/Header/CORS/代理等规则时才会改变对应请求行为。用完请关闭或恢复直连。 Q：和分别安装多个单功能扩展比有什么优势？ A：统一入口、统一侧边栏、工具之间更容易衔接（例如 Mock → JSON → TS 类型；翻译 → 继续追问；取色/尺子 → 截图留存），减少上下文切换。 Q：适合团队强制安装吗？ A：更适合个人与小组提效。若团队需要统一策略、审计与集中管控，请另选企业方案，并遵守公司安全要求。 【总结】 「AI 工具箱」帮助你把前端日常里最磨人的碎片步骤收拢到一个侧边栏：既能用 AI 处理网页信息，又能在同一处完成 Mock、跨域、代理、JSON/TS 与设计核对。它强调本地可控、按需启用、开发场景优先——让你少装几个扩展，少切几次窗口，把注意力留给真正要交付的产品。 如果你正在寻找「翻译理解 + 接口调试 + 视觉核对」一体化的浏览器效率方案，欢迎安装试用，并把最常用的工具固定在侧边栏工作流中。 【提BUG或者Feature】 欢迎到github仓库（https://github.com/Luoyangs/ai-assistant/issues）提出你的建议，我会认真阅读您的每一条意见。