AI 工具箱

【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://、扩展商店页等）可能无法注入。 • 公司电脑如有安全策略限制扩展权限，请遵循所在组织规范…