AI 工具箱

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

【AI 工具箱是什么】 「AI 工具箱」是一款面向前端开发者、测试同学与效率用户的 Chrome 侧边栏扩展。它把浏览器里最高频的两类能力放进同一个工作台： 1）侧边栏 AI 助手：连续对话、划词翻译、OCR 识图、页面内容理解与整理； 2）本地开发与设计辅助：API 调试（类 Postman）、API Mock、网络监控与响应查看器、请求头修改、CORS 跨域助手、代理切换、JSON 工具（含差异对比与删除字段）、字符串工具、TypeScript 类型生成、时间工具，以及取色器、尺子、截图、Mermaid 思维导图、图片工具等。 你可以把它理解成「常驻在浏览器旁边的前端效率面板」：一边浏览网页或调试页面，一边立刻调用 AI 或本地工具，而不必在多个独立插件、临时网站、命令行脚本之间来回切换。主界面采用 Chrome Side Panel（侧边栏），也支持在 DevTools 场景下使用工具面板，尽量贴近开发者真实工作习惯。 本扩展的定位非常明确：服务「个人开发效率与本地调试」，强调本地可控、按需启用、开发场景优先。它不是广告工具，不是强制改搜索的工具栏，也不是需要把数据上传到我们自有服务器才能用的「黑盒 SaaS」。 【用户为什么应该安装它】 前端同学每天会反复遇到这些碎片化、但又极其真实的场景： • 打开一篇英文技术文档或 API 说明，想先翻译，再追问「这段配置到底影响什么」； • 从文档或终端复制一段 cURL，想快速改环境变量后再发一次请求，并把响应落到 Mock 或生成 TS 类型； • 后端接口还没好，或联调环境不稳定，想先用 Mock 把页面流程跑通； • 本地前端调远端 API 时撞上跨域，或需要临时加 Token / 灰度 Header 才能复现问题； • 需要在直连、本地 Whistle、测试代理之间快速切换，测完又要立刻恢复； • 接口返回一大段 JSON / SSE，要格式化、压缩、Diff、删字段，或按帧展开查看并搜索关键字； • 走查 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｜网络抓包与响应核对 打开网络监控观察 fetch / XHR / EventSource → 按 URL 过滤定位目标请求 → 双击打开响应查看器（支持 SSE 分帧、JSON 树形折叠、筛选高亮）→ 需要时复制到 JSON / 字符串工具继续处理。 工作流 E｜cURL / API 调试到 Mock 与类型 粘贴 cURL 到「API 调试」→ 用环境变量切换开发/测试域名 → 发送并查看响应 → 一键送到 Mock 落成拦截规则，或送到 JSON / TS 类型生成继续处理。需要登录态时可勾选附带 Cookie，或按当前标签页填入 Cookie 头。 工作流 F｜视觉核对与材料沉淀 取色器吸取主色与状态色 → 尺子测量间距与对齐 → 区域/可视区域/长截图留存 UI 问题 → 用 Mermaid 把流程、架构、决策树整理成图，放进文档或评审材料。 【功能详解｜AI 能力（需配置 API Key）】 1. 智能对话 在侧边栏与 AI 连续对话，支持流式输出，适合问答、改写、方案梳理、根据任务生成步骤。提供「新建对话」：一键清空当前会话与输入态，避免旧上下文干扰新任务。聊天工具栏可快速切换翻译、OCR，并把尺子、截图放在手边，减少「先找工具再做事」的路径。会话历史支持独立列表管理；设置页支持配置本地导入导出与 GitHub/GitCode 同步（敏感 Key/Token 不上线）。 2. 翻译 工具栏进入翻译模式后，可指定中英方向或自动识别语言。也支持在网页选中文本后通过右键菜单直接送到侧边栏翻译，减少复制粘贴。翻译不是终点：你可以继续追问「解释术语」「改成更口语」「整理成表格」等，把一次性翻译变成可持续的阅读工作流。 3. OCR 文字提取 对图片中的文字进行提取，再继续总结、翻译或整理成清单。适合会议截图、参数图、海报、表格截图、错误弹窗等无法直接复制的内容。对网页图片也可结合右键 OCR 相关能力减少「先保存再上传」的步骤（受页面与权限环境影响时，刷新页面后再试通常更稳）。 4. 页面内容理解与整理 可结合当前页面或你粘贴的内容做总结、提炼重点、生成汇报结构。适合快速浏览长文、把材料压成可执行结论，或把零散笔记整理成大纲。 关于 AI 数据：你的请求会发送到你配置的模型服务商（例如智谱等，以及你启用的其他兼容服务）。API Key 与对话相关数据用于完成你主动发起的请求；开发者不出售用户数据。详见隐私政策：https://luoyangs.github.io/ai-toolbox/privacy/ 【功能详解｜开发调试工具】 1. API 调试（类 Postman） 在侧边栏联调 HTTP 接口：编辑 Method / URL / Params / Headers / Body（含 raw、urlencoded、multipart 文件），发送后以 Tab 查看响应正文与响应头。支持流式模式接收 SSE / 长连接响应，大响应正文虚拟化渲染不卡顿。支持多集合管理请求、多环境变量（如 {{baseUrl}}）、按集合隔离的历史记录；删除集合会一并清理对应历史。支持导入 / 导出 cURL；可勾选自动附带 Cookie，或按请求 URL / 当前标签页填入 Cookie 头。响应可一键送到 Mock、JSON 工具或 TS 类型生成。本地自动保存，无需手动点保存。即使不配置 AI Key 也可独立使用。 2. API Mock 按 URL 匹配（支持更灵活的匹配方式）拦截请求并返回模拟数据，便于在后端未就绪、环境不稳定或需要固定数据时推进前端开发。可配置延迟等高级选项，模拟慢接口与加载态；支持文件模式查看与规则同步。规则保存在本地，可随时启用/停用；建议只对测试域名开启，避免误伤日常浏览。可与 API 调试 / 网络监控衔接，快速把真实响应落成 Mock 规则。 3. 网络监控 监控页面中的 fetch / XHR / EventSource 请求，支持正则、精确匹配与全量过滤，以及列表筛选。适合联调时快速确认请求是否发出、状态码与大致耗时，并与 Mock 规则配合排查「拦没拦住」。 4. 响应查看器 从网络监控双击打开整页响应查看：支持 SSE 分帧解析、JSON 树形折叠展开、原文/增强切换、响应头侧栏；内置筛选与 Ctrl/Cmd+F（Enter 提交、↑↓ 跳转高亮）。结合 DevTools 快照与拦截器正文缓存，尽量还原 POST 等非 GET 响应正文。 5. 请求头修改（ModHeader） 为匹配到的请求增删改 HTTP Header。常见用途：临时附加 Authorization、改 Accept-Language、加灰度/调试标识、验证服务端对 Header 的分支逻辑。任务结束后请关闭规则，以免影响正常站点行为。 6. CORS 跨域助手 协助处理开发阶段的跨域调试需求，降低「本地前端调用远端 API」时的摩擦。它服务于调试，不是绕过生产安全策略的手段；请只在你有权测试的环境使用。 7. 代理切换 提供情景化的代理能力（含 PAC / 自动切换思路），方便在直连、本地代理、指定调试环境之间切换。非直连时侧边栏与工具列表会展示角标提示。这是强网络权限能力：测完请务必切回直连，不要在日常上网时长期挂着调试代理。 8. JSON 工具 支持格式化、压缩、校验、差异对比（类 git diff 的增删高亮），以及删除指定字段（支持多字段、忽略大小写，并尽量清理嵌套字符串里的 JSON）。对大 JSON 还支持选区操作，提升局部编辑效率。可从 API 调试响应一键填入。即使不配置 AI Key，该工具也可独立使用。 9. 字符串工具 面向接口转义与文本清洗：Unicode / URL / HTML / Base64 编解码、乱码启发式还原、大小写与命名风格转换（camel / snake / kebab 等）、trim / 反转 / 字数统计。支持侧栏面板，也可从网页选区一键打开结果面板。 10. TypeScript 类型生成 从 JSON 结构生成 TypeScript 类型定义，缩短「看响应写 interface」的时间，适合快速原型与联调阶段补类型。支持从 cURL 解析并请求后生成；也可从 API 调试响应一键填入。 11. 时间工具 覆盖时间戳转换、时区相关换算等小需求，方便处理日志、订单、排障记录中的时间字段。 【功能详解｜设计与页面辅助】 1. 取色器：从真实页面吸取颜色，便于对齐设计规范与组件状态色。 2. 尺子：开启页面参考线与测量能力。可从顶部/左侧边缘拖出辅助线，进入测量模式后可量取距离；按住 Shift 可锁定水平或垂直方向。再次点击可关闭，避免遮挡正常操作。 3. 截图：提供区域截图、可视区域、滚动长图、手动滚动拼接等模式；编辑器支持所见即所得文字标注（字号/颜色/加粗倾斜、确认后再编辑）。适合留存 UI 问题、验收对比与文档配图。启动后按提示在页面操作，Esc 可取消（以实际页面提示为准）。 4. Mermaid 思维导图：把流程、架构、关系与决策树渲染成图，方便评审沟通与文档沉淀。 5. 图片工具：提供压缩、缩放等常见图片处理辅助，减少为了压缩/转换临时打开多个网站的成本。 【如何开始使用（建议路径）】 1. 安装扩展，点击浏览器工具栏图标打开侧边栏；如需，也可在 Chrome DevTools 中使用相关面板。 2. 打开设置，填写你自己的大模型 API Key。只有 AI 对话/翻译/OCR 等能力依赖 Key；API 调试、JSON、Mock、网络监控、尺子、截图等本地工具通常可直接用。 3. 在聊天页工具栏尝试：新建对话、翻译、OCR、尺子、截图。 4. 进入「更多工具」，按「开发工具 / 设计工具」分类打开 API 调试、Mock、网络监控、CORS、代理、JSON、字符串、取色器等完整面板。 5. 每次调试结束后：关闭 Mock/Header/CORS 规则，代理恢复直连，再去浏览无关网站。 【权限说明（用户可读版）】 为了实现侧边栏、划词翻译、页面尺子/截图，以及 Mock/CORS/代理/API 调试等能力，扩展需要申请相应浏览器权限。主要包括： • sidePanel / contextMenus：侧边栏主界面与右键翻译入口； • scripting 与主机访问：在网页中注入必要逻辑，以提供 Mock 拦截、网络监控、尺子、截图等能力； • declarativeNetRequest：落地 Mock、CORS、请求头等网络规则，并为 API 调试在发送时按需附带 Cookie； • cookies：仅用于「API 调试」——在你主动勾选附带 Cookie 或点击填入 Cookie 头时，按目标 URL / 当前标签页读取已有 Cookie；不会后台静默采集或上传； • proxy：仅服务于「代理切换」； • storage / unlimitedStorage：保存配置、API Key、规则、API 调试集合/环境/历史与较大本地数据（例如 OCR 相关资源）； • downloads：保存截图等导出文件。 我们坚持最小必要原则：调试类能力由你主动开启；隐私政策公开可查：https://luoyangs.github.io/ai-toolbox/privacy/ 【安全与合规使用建议】 • 把 API Key 当作密码保管，不要发给他人；泄露后请立即在服务商控制台轮换。 • 不要在生产环境对真实用户流量长期开启 Mock、改 Header 或异常代理。 • 仅对你有权测试的网站启用调试规则；API 调试读取 Cookie 也请只用于你有权联调的环境。 • 若某站点首次使用页面工具失败，先刷新页面再试；系统页（chrome://、扩展商店页等）可能无法注入。 • 公司电脑如有安全策略限制扩展权限，请遵循所在组织规范。 【常见问题（FAQ）】 Q：必须配置 API Key 才能用吗？ A：AI 对话/翻译/OCR 需要；API 调试、JSON、字符串、Mock、网络监控、尺子、截图、取色等本地工具一般不需要。 Q：数据会上传到你们服务器吗？ A：扩展本身以本地配置与本地规则为主。你发起的 AI 请求会发往你配置的模型服务商。我们不出售用户数据。详见隐私政策。 Q：会不会影响我正常上网？ A：默认不应。只有你启用 Mock/Header/CORS/代理等规则时才会改变对应请求行为。用完请关闭或恢复直连。 Q：命令行 curl 能通，API 调试却报缺 Cookie？ A：命令行 curl 通常自带登录 Cookie。请在 API 调试中勾选「发送时自动附带 Cookie」，或用 Cookie 页按请求 URL / 当前标签页填入 Cookie 头；先在浏览器登录目标站点再发送通常更稳。 Q：和分别安装多个单功能扩展比有什么优势？ A：统一入口、统一侧边栏、工具之间更容易衔接（例如 API 调试 → Mock / JSON / TS；网络监控 → 响应查看器 → JSON/字符串；翻译 → 继续追问；取色/尺子 → 截图留存），减少上下文切换。 Q：适合团队强制安装吗？ A：更适合个人与小组提效。若团队需要统一策略、审计与集中管控，请另选企业方案，并遵守公司安全要求。 【近期更新（Changelog）】 2026-08-18（v1.0.10） • 新标签页工作区左侧导航支持最小化折叠（仅展示图标），支持悬停弹出深色半透明毛玻璃气泡提示（Tooltip）与红点角标自适应 • 侧边栏（Sidebar）图标悬浮提示统一升级为深色半透明毛玻璃 Tooltip，支持状态角标展示 • 全局工具栏（Toolbar）操作统一规范为左对齐排布，优化视觉一致性与大屏空间利用 • 优化 DevTools 抓取性能与内存开销，修复高频存储通知引发的主线程卡顿与监听器泄漏 • 修复 ModHeader 折叠概要间距与展开输入框过宽问题 2026-08-15（v1.0.9） • 稳定性大幅提升：修复大 JSON 响应导致页面 OOM 崩溃、DevTools 长时间使用内存持续增长、SSE 长连接场景扩展进程内存暴涨等 P0/P1 问题 • API 调试支持流式 SSE / 长连接接口，通过 Port 增量接收响应；大响应正文虚拟化渲染，5MB+ 响应不再卡顿 • 通用设置新增 DevTools 面板启用/关闭开关（默认关闭以节省内存） • 通用设置新增划词悬浮条按钮自定义配置 • 响应查看器聚焦 JSON 与 SSE 内容类型，纯文本/JS 等不再接管 • SSE 帧列表虚拟化，万级帧数流畅滚动与筛选 • 响应正文缓存改为合并节流写入，杜绝 storage 写入风暴 • 网络监控 payload 批量合并写入，降低 IDB 事务频率 • Mock 删除规则自动清理孤儿 storage 键 • 拦截器重复注入守卫前置，流式 Port ACK 增加超时与断连处理 • 尺子 destroy 修复 window 监听泄漏；XHR loadend 添加 { once: true } 2026-08-03（v1.0.8） • 新增 API 调试（类 Postman）：多集合 / 多环境变量、cURL 导入导出、按集合隔离历史 • 响应与响应头分 Tab 展示；支持自动保存、侧栏可拖拽调宽 • 响应可一键打通 Mock / JSON 工具 / TS 类型生成 • 支持按需附带或填入 Cookie（cookies 权限仅用于主动联调） • 更新使用说明与商店详细描述 2026-07-31（v1.0.4–1.0.6） • 新增响应查看器：SSE 分帧 / JSON 树形折叠、筛选高亮与 Ctrl/Cmd+F 跳转 • 打通 DevTools 快照与拦截器正文缓存，提升 POST 等响应正文还原能力 • 新增字符串工具（编解码、乱码还原、命名风格转换；支持选区结果面板） • JSON 工具增强「删除指定字段」（多分隔符、忽略大小写、嵌套字符串清理） • Mock / 工具栏溢出与选区结果面板等体验优化；响应查看器误接管浏览页等问题修复 2026-07-30（v1.0.4） • 新增网络监控：覆盖 fetch / XHR / EventSource，支持正则 / 精确 / 全量 URL 过滤与列表筛选 • Mock 文件模式查看与 KeepAlive 同步完善 • 扩展版本升至 1.0.4 2026-07-27（v1.0.2 / 发布准备） • 截图编辑支持所见即所得文字标注（字号/颜色/加粗倾斜、确认与再编辑） • 长截图拼接与悬浮元素处理更稳；图片工具增强压缩与缩放 • 代理非直连时在侧边栏与工具列表展示角标提示 • 精简闲置模块，聚焦核心开发/设计工具链 2026-07-21 • 设置页支持配置同步：本地导入导出、GitHub/GitCode 上下传（敏感 Key/Token 不上线） • 历史记录改为独立会话列表；完善聊天思考中 loading、消息复制与下载 • 修复注入拦截器时 this 丢失导致的报错 2026-07-20 • 完成 Chrome 商店上架材料与隐私政策准备 • 聊天工具栏体验优化；开发/设计工具能力同步到侧边栏工作台 【总结】 「AI 工具箱」帮助你把前端日常里最磨人的碎片步骤收拢到一个侧边栏：既能用 AI 处理网页信息，又能在同一处完成 API 调试、Mock、网络监控、跨域、代理、JSON/字符串/TS 与设计核对。它强调本地可控、按需启用、开发场景优先——让你少装几个扩展，少切几次窗口，把注意力留给真正要交付的产品。 如果你正在寻找「翻译理解 + 接口调试 + 视觉核对」一体化的浏览器效率方案，欢迎安装试用，并把最常用的工具固定在侧边栏工作流中。