Fitten Code浏览器插件支持CodeSandbox、StackBlitz和GitHub Codespaces三大网页端编辑器，实现AI补全、生成与诊断功能。需安装带“Web”后缀的官方插件，登录后启用对应环境，按规范触发指令即可完成函数补全、自然语言生成组件及报错自动诊断修复。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在网页端代码编辑器中启用Fitten Code浏览器插件
你正在用CodeSandbox、StackBlitz或GitHub Codespaces写前端项目，但每次切到ChatGPT复制粘贴再切回来，光是窗口切换就打断三次思路。Fitten Code浏览器插件能直接注入网页版编辑器，让AI补全、解释、生成代码的操作全部发生在当前页面内，不跳转、不中断、不暴露源码。
打开Chrome或Edge浏览器（Firefox暂未支持），确保版本≥115。访问Chrome网上应用店或Edge加载项市场，搜索“Fitten Code Web”——注意不是“Fitten Code”，后者是IDE插件，【必须认准带Web后缀的官方插件】。点击“添加至Chrome”，确认权限请求时勾选“在所有网站上运行”，否则无法注入代码编辑器页面。
安装完成后，刷新任意网页端编辑器页面（如codesandbox.io/new），右上角会出现一个蓝色“FC”图标。点击它，首次使用需微信扫码登录，登录成功后图标变为绿色并显示“Ready”。这一步不可跳过，未登录状态下插件不会响应任何快捷键或右键指令。
在CodeSandbox中实现函数级AI补全
CodeSandbox默认禁用第三方脚本注入，Fitten Code需手动激活上下文感知能力。打开任意React或Vue沙盒，点击右上角FC图标→选择“Enable in this sandbox”。此时插件会扫描当前项目依赖，自动识别是否安装了React、Vite或Next.js等框架，并加载对应提示词模板。
在App.tsx文件中，输入const fetchData = async () => {后换行，光标停在大括号内。Fitten Code会在0.8秒内弹出建议框，显示完整fetch调用+try-catch封装+类型断言。按Tab接受整段补全，或按Ctrl+→逐词采纳。
若补全未触发，检查是否误开了“Strict Mode”：点击FC图标→Settings→关闭“Require explicit @ts-ignore before AI edits”。该选项开启时，插件拒绝修改含TypeScript校验的代码块，防止覆盖类型定义。
用于在用户想通过浏览器自动化与 Google Gemini 或 ChatGPT 交互时。触发短语包括“ask Gemini”“ask ChatGPT”“ask GPT”“让...”。
在StackBlitz中用自然语言生成组件
StackBlitz的Angular和Node.js环境对AI插件兼容性较弱，必须通过指令前缀强制唤醒。在main.ts或app.component.html中，将光标置于空行，输入// @fc generate a responsive card component with image, title and description，然后按下Ctrl+Enter。
方法一：使用右键菜单
选中上述注释行→右键→选择“Fitten Code → Generate from comment”。插件会删除该注释，并在下方插入完整HTML+CSS+TS代码块，包含Tailwind类名和响应式断点。
方法二：调用侧边栏对话框
点击FC图标→选择“Open Chat Panel”，在输入框中粘贴相同需求描述，发送后点击生成结果右下角的“Insert to editor”按钮。此方式支持多轮追问，比如追加“把标题字体放大到1.5rem并居中”。
【注意：StackBlitz免费版禁止执行AI生成的Node.js后端代码，仅前端文件可直接运行】生成的服务端逻辑会高亮标黄，需手动复制到本地环境验证。
在GitHub Codespaces中调试报错代码
Codespaces的VS Code Web版已深度集成Fitten Code，但调试功能需主动绑定终端输出。当终端报出TypeError: Cannot read property 'map' of undefined时，不要手动翻找源码——选中报错堆栈中第一行文件路径（如src/utils/data.ts:42），右键→“Fitten Code → Diagnose this error”。
- 插件自动定位到data.ts第42行，高亮疑似问题代码
items.map(...) - 分析上下文后，在右侧弹出诊断卡片，指出
items未做空值校验，并给出三行修复建议：if (!items || !Array.isArray(items)) return []; - 点击卡片中的“Apply fix”按钮，代码立即被替换，且保留原有缩进和分号风格
- 若修复后仍报错，点击卡片底部“Explain why this happens”可展开底层原理说明，包括JavaScript原型链和undefined属性访问机制
这一步操作起来很简单，直接把报错行选中就行。但必须确保Codespaces工作区已加载完整Git历史——如果刚fork仓库就启动，插件可能因缺少package.json而降级为通用JS诊断模式，无法识别React或Vue特有错误模式。
