我做了一个为 ai 模型实现代码预览和实时交互的谷歌浏览器插件.

项目背景

在与 ChatGPT 等 AI 助手进行编程对话时，我们往往会遇到一系列阻碍编程效率的问题：

AI 生成的代码效果无法直观预览。 React 组件和 CSS 样式被分散在多个对话中，代码组织变得复杂。 需要将代码片段手动复制粘贴到编辑器中，才能查看运行效果。 多次复制粘贴导致代码格式可能混乱，不利于开发效率。

为了解决这些痛点，我开发了一款名为 AI Code Preview 的 Chrome 扩展。它让编程对话变得更加高效便捷，通过集成预览和管理功能，为前端开发者、学习者和技术支持人员提供直观、流畅的开发体验。

核心功能

实时代码预览 支持一键预览 HTML/CSS/JS 组合代码的运行效果，让用户快速查看代码在页面中的效果。 实时渲染 React 组件，避免频繁的复制粘贴操作。 支持 Vue 单文件组件（.vue 文件）的即时预览，便于 Vue 开发者调试和查看组件。 提供预览视图和源码视图之间的快速切换功能。

智能代码收集 能自动识别 React/JSX 代码片段，方便前端开发者在不同对话中获取和整合代码。 支持自动收集分散在多个对话中的 CSS 样式，便于样式的管理和优化。 实现 React 组件与 CSS 样式的自动关联，避免手动整合的麻烦。 支持将多个代码块组合在一起预览，便于整体查看和调试复杂组件。

便捷管理工具 提供一键复制代码到剪贴板的功能，方便在开发环境中快速调用代码。 支持本地文件下载，用户可以将生成的代码直接保存。 支持实时重新加载预览，帮助开发者迅速查看改动效果。 集成代码语法高亮显示，增强代码的可读性和调试体验。

使用场景

前端开发 快速验证组件效果：在 AI 助手生成代码后，即可实时查看组件的外观和功能效果。 实时调试样式和布局：在预览窗口中实时调整 CSS 和布局，优化设计。 收集和整理代码片段：适合频繁使用代码片段的开发者进行高效的代码收集和管理。

学习交流 直观理解代码运行结果：对于新手来说，能实时查看代码效果，有助于更快掌握知识点。 便于分享代码示例：扩展工具支持的代码管理功能，使得与他人分享代码更方便。 加速学习反馈循环：在学习过程中实时预览代码效果，加快理解和反馈速度。

技术支持 快速验证解决方案：技术支持人员可以直接在预览中测试代码，迅速找到解决方案。 实时展示修复效果：在协助解决问题时，可以即时查看修复效果，提高沟通效率。

技术特点

安全性 使用隔离的 iframe 运行环境，确保代码的安全运行。 无需依赖外部服务，所有代码预览和处理都在本地进行，保障数据安全。 支持本地资源加载，不需要将代码片段上传到远程服务器。

易用性 自动识别代码类型，无需手动指定代码语言。 智能代码预处理，减少运行错误。 友好的错误提示，帮助用户快速定位并修复问题。

扩展性 支持多种代码类型，适应不同的前端框架和语言。 提供灵活的预览配置，用户可以根据需求自定义预览效果。 支持可定制的样式主题，满足个性化的需求。

为什么选择 AI Code Preview

提升效率 节省了多次复制粘贴的时间，简化了开发流程。 避免了环境配置和兼容性问题，使用更加便捷。 实现了快速验证代码效果，使开发和测试流程更加流畅。

改善体验 通过所见即所得的方式，开发者可以直接查看预览效果。 实时反馈让用户能够更快发现和调整代码中的问题。 提供便捷的操作体验，减少不必要的步骤。

专业可靠 持续更新和维护，确保适应最新的开发环境和需求。 提供社区支持，与更多开发者一起改进和优化。

安装使用

用户可以在 Chrome Web Store 搜索“AI Code Preview”进行安装。同时，建议安装 CSP Unblock 扩展，以获得最佳体验。在安装完成后，用户即可在 ChatGPT 等 AI 平台中直接使用该工具。

这是插件地址： https://chromewebstore.google.com/detail/ai-code-preview/loajhmclhgofappkpogllbhjpocgeoil?hl=en-US&utm_source=ext_sidebar

未来展望

我们将不断改进和扩展 AI Code Preview 的功能，计划添加更多框架支持、代码片段管理、自定义主题等。此外，我们也在积极考虑引入对 TypeScript 和 Python 语言的支持，以满足更多开发者的需求，为跨语言开发提供更加全面的预览体验。通过这些功能扩展，我们希望为用户提供更强大的功能和更好的用户体验。